示例库

从小型图开始，逐步学习分组、布局约束、云服务商图标和接近生产环境的系统。下面的每个缩略图都由固定到公开 Stack 规范的规范源代码生成。

云服务商示例中的图标资源由调用方管理。需要品牌图标时，请安装页面标出的图标包。即使没有图标包，同一份源代码仍然有效，并会使用 Stack 的确定性缺失图标回退进行渲染。

固定源版本: 8e5477c6

从小处开始

Hello Stack

starter

Start with two nodes and one directed edge.

图标包内置图标

预期输出A web app points to an API in one compact row.

节点

2

分组

0

连线

1

语法特性

• directed edges

查看规范 .stack 源码

Application and data

starter

Add semantic node kinds, icons, details, an edge label, and a light theme.

图标包内置图标

预期输出An application sends SQL data to a PostgreSQL database.

节点

2

分组

0

连线

1

语法特性

• themes
• node kinds
• node details
• edge labels
• edge kinds
• directed edges

查看规范 .stack 源码

扩展表达

Groups and layout

intermediate

Organize clients and platform services with explicit direction, rank, and order hints.

图标包内置图标

预期输出Browser and mobile clients converge on a gateway before the API and database.

节点

5

分组

2

连线

4

语法特性

• node kinds
• groups
• layout direction
• rank constraints
• order constraints
• edge labels
• edge kinds
• directed edges

查看规范 .stack 源码

AWS serverless checkout

intermediate

Follow a checkout request through AWS edge, serverless compute, events, and storage services.

图标包aws

预期输出AWS edge and Lambda services emit an order event before persisting receipts.

节点

8

分组

3

连线

7

语法特性

• themes
• node kinds
• groups
• layout direction
• edge labels
• edge kinds
• directed edges
• provider icons

查看规范 .stack 源码

GCP data service

intermediate

Connect Cloud Run to transactional, object, and analytical data stores.

图标包gcp

预期输出A Cloud Run API serves a web client and feeds Cloud SQL, Cloud Storage, and BigQuery.

节点

6

分组

2

连线

5

语法特性

• themes
• node kinds
• groups
• layout direction
• edge labels
• edge kinds
• directed edges
• provider icons

查看规范 .stack 源码

Azure event platform

intermediate

Trace asynchronous work from Azure delivery services through functions, Service Bus, and data stores.

图标包azure

预期输出Front Door and App Service hand work to functions and Service Bus before storage.

节点

8

分组

3

连线

7

语法特性

• themes
• node kinds
• groups
• layout direction
• edge labels
• edge kinds
• directed edges
• provider icons

查看规范 .stack 源码

GitHub delivery workflow

intermediate

Describe a SaaS delivery path from source control and CI to hosting and error monitoring.

图标包simple-icons

预期输出A developer push triggers GitHub Actions, deployment, and error reporting.

节点

5

分组

2

连线

4

语法特性

• themes
• node kinds
• groups
• layout direction
• edge labels
• edge kinds
• directed edges
• provider icons

查看规范 .stack 源码

描述系统

Commerce platform

advanced

Model a production-like commerce system with nested responsibilities and asynchronous processing.

图标包内置图标

预期输出Storefront, commerce, processing, data, and partner groups show a full order flow.

节点

13

分组

5

连线

12

语法特性

• node kinds
• node details
• groups
• layout direction
• rank constraints
• order constraints
• edge labels
• edge kinds
• directed edges

查看规范 .stack 源码

Mixed-provider platform

advanced

Combine AWS, GCP, Azure, and SaaS services while preserving semantic kinds and portable flow.

图标包aws, gcp, azure, simple-icons

预期输出A web client crosses provider boundaries for API, processing, events, data, and monitoring.

节点

7

分组

4

连线

6

语法特性

• themes
• node kinds
• groups
• nested groups
• layout direction
• rank constraints
• order constraints
• edge labels
• edge kinds
• directed edges
• bidirectional edges
• association edges
• provider icons

查看规范 .stack 源码