Example gallery ​

小さなdiagramから始め、group、layout constraint、provider icon、production-likeなsystemへ段階的に進めます。下のthumbnailはすべて、公開Stack specificationへpinしたcanonical sourceから生成しています。

Provider exampleのartworkはcaller-ownedです。Brand iconを使う場合は表示されたicon packを導入してください。Packがなくても同じsourceはvalidで、Stackのdeterministicなmissing-icon fallbackを使ってrenderされます。

Pin済みsource: 8e5477c6

小さく始める

A minimal diagram with Web app connected to API

Hello Stack

starter

Start with two nodes and one directed edge.

Icon pack組み込みicon
期待する出力A web app points to an API in one compact row.
node
2
group
0
edge
1
Syntax feature
  • directed edges
Canonical .stack sourceを見る
Application and Primary database nodes connected by a SQL edge

Application and data

starter

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

Icon pack組み込みicon
期待する出力An application sends SQL data to a PostgreSQL database.
node
2
group
0
edge
1
Syntax feature
  • themes
  • node kinds
  • node details
  • edge labels
  • edge kinds
  • directed edges
Canonical .stack sourceを見る

表現を広げる

Client and Platform groups connected through an Edge gateway

Groups and layout

intermediate

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

Icon pack組み込みicon
期待する出力Browser and mobile clients converge on a gateway before the API and database.
node
5
group
2
edge
4
Syntax feature
  • node kinds
  • groups
  • layout direction
  • rank constraints
  • order constraints
  • edge labels
  • edge kinds
  • directed edges
Canonical .stack sourceを見る
AWS checkout architecture with Edge, Serverless compute, and Data groups

AWS serverless checkout

intermediate

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

Icon packaws
期待する出力AWS edge and Lambda services emit an order event before persisting receipts.
node
8
group
3
edge
7
Syntax feature
  • themes
  • node kinds
  • groups
  • layout direction
  • edge labels
  • edge kinds
  • directed edges
  • provider icons
Canonical .stack sourceを見る
GCP application and analytics groups connected to a web client

GCP data service

intermediate

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

Icon packgcp
期待する出力A Cloud Run API serves a web client and feeds Cloud SQL, Cloud Storage, and BigQuery.
node
6
group
2
edge
5
Syntax feature
  • themes
  • node kinds
  • groups
  • layout direction
  • edge labels
  • edge kinds
  • directed edges
  • provider icons
Canonical .stack sourceを見る
Azure delivery, event processing, and data groups in a left-to-right flow

Azure event platform

intermediate

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

Icon packazure
期待する出力Front Door and App Service hand work to functions and Service Bus before storage.
node
8
group
3
edge
7
Syntax feature
  • themes
  • node kinds
  • groups
  • layout direction
  • edge labels
  • edge kinds
  • directed edges
  • provider icons
Canonical .stack sourceを見る
GitHub repository and Actions connected to Vercel and Sentry

GitHub delivery workflow

intermediate

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

Icon packsimple-icons
期待する出力A developer push triggers GitHub Actions, deployment, and error reporting.
node
5
group
2
edge
4
Syntax feature
  • themes
  • node kinds
  • groups
  • layout direction
  • edge labels
  • edge kinds
  • directed edges
  • provider icons
Canonical .stack sourceを見る

Systemを描く

A production commerce architecture from customer through storefront, services, data, and partners

Commerce platform

advanced

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

Icon pack組み込みicon
期待する出力Storefront, commerce, processing, data, and partner groups show a full order flow.
node
13
group
5
edge
12
Syntax feature
  • node kinds
  • node details
  • groups
  • layout direction
  • rank constraints
  • order constraints
  • edge labels
  • edge kinds
  • directed edges
Canonical .stack sourceを見る
A mixed-provider platform spanning Vercel, GCP, AWS, Azure, PostgreSQL, and Sentry

Mixed-provider platform

advanced

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

Icon packaws, gcp, azure, simple-icons
期待する出力A web client crosses provider boundaries for API, processing, events, data, and monitoring.
node
7
group
4
edge
6
Syntax feature
  • themes
  • node kinds
  • groups
  • nested groups
  • layout direction
  • rank constraints
  • order constraints
  • edge labels
  • edge kinds
  • directed edges
  • bidirectional edges
  • association edges
  • provider icons
Canonical .stack sourceを見る