예제 갤러리 ​

작은 다이어그램에서 시작해 그룹, 레이아웃 제약, 클라우드 제공자 아이콘, 프로덕션 수준의 시스템으로 단계적으로 확장합니다. 아래의 모든 썸네일은 공개 Stack 명세에 고정된 canonical source에서 생성됩니다.

Provider 예제의 아트워크는 caller-owned입니다. 브랜드 아이콘이 필요하면 표시된 아이콘 팩을 설치하세요. 팩이 없어도 같은 소스는 유효하며 Stack의 deterministic missing-icon fallback으로 렌더링됩니다.

고정된 소스: 8e5477c6

작게 시작하기

A minimal diagram with Web app connected to API

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
Canonical .stack 소스 보기
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.

아이콘 팩기본 아이콘
예상 출력An application sends SQL data to a PostgreSQL database.
노드
2
그룹
0
엣지
1
문법 기능
  • themes
  • node kinds
  • node details
  • edge labels
  • edge kinds
  • directed edges
Canonical .stack 소스 보기

표현 넓히기

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.

아이콘 팩기본 아이콘
예상 출력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
Canonical .stack 소스 보기
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.

아이콘 팩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
Canonical .stack 소스 보기
GCP application and analytics groups connected to a web client

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
Canonical .stack 소스 보기
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.

아이콘 팩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
Canonical .stack 소스 보기
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.

아이콘 팩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
Canonical .stack 소스 보기

시스템 모델링

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.

아이콘 팩기본 아이콘
예상 출력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
Canonical .stack 소스 보기
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.

아이콘 팩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
Canonical .stack 소스 보기