Example gallery ​

Start with a small diagram, then move through groups, layout constraints, provider icons, and production-like systems. Every thumbnail below is generated from the canonical source pinned to the public Stack specification.

Provider examples keep artwork caller-owned: install the listed icon packs when you want branded icons. Without a pack, the same source remains valid and renders with Stack's deterministic missing-icon fallback.

Pinned source: 8e5477c6

Start small

A minimal diagram with Web app connected to API

Hello Stack

starter

Start with two nodes and one directed edge.

Icon packsBuilt-in icons
Expected outputA web app points to an API in one compact row.
nodes
2
groups
0
edges
1
Syntax features
  • directed edges
View 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 packsBuilt-in icons
Expected outputAn application sends SQL data to a PostgreSQL database.
nodes
2
groups
0
edges
1
Syntax features
  • themes
  • node kinds
  • node details
  • edge labels
  • edge kinds
  • directed edges
View canonical .stack source

Build fluency

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 packsBuilt-in icons
Expected outputBrowser and mobile clients converge on a gateway before the API and database.
nodes
5
groups
2
edges
4
Syntax features
  • node kinds
  • groups
  • layout direction
  • rank constraints
  • order constraints
  • edge labels
  • edge kinds
  • directed edges
View 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 packsaws
Expected outputAWS edge and Lambda services emit an order event before persisting receipts.
nodes
8
groups
3
edges
7
Syntax features
  • themes
  • node kinds
  • groups
  • layout direction
  • edge labels
  • edge kinds
  • directed edges
  • provider icons
View 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 packsgcp
Expected outputA Cloud Run API serves a web client and feeds Cloud SQL, Cloud Storage, and BigQuery.
nodes
6
groups
2
edges
5
Syntax features
  • themes
  • node kinds
  • groups
  • layout direction
  • edge labels
  • edge kinds
  • directed edges
  • provider icons
View 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 packsazure
Expected outputFront Door and App Service hand work to functions and Service Bus before storage.
nodes
8
groups
3
edges
7
Syntax features
  • themes
  • node kinds
  • groups
  • layout direction
  • edge labels
  • edge kinds
  • directed edges
  • provider icons
View 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 packssimple-icons
Expected outputA developer push triggers GitHub Actions, deployment, and error reporting.
nodes
5
groups
2
edges
4
Syntax features
  • themes
  • node kinds
  • groups
  • layout direction
  • edge labels
  • edge kinds
  • directed edges
  • provider icons
View canonical .stack source

Model systems

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 packsBuilt-in icons
Expected outputStorefront, commerce, processing, data, and partner groups show a full order flow.
nodes
13
groups
5
edges
12
Syntax features
  • node kinds
  • node details
  • groups
  • layout direction
  • rank constraints
  • order constraints
  • edge labels
  • edge kinds
  • directed edges
View 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 packsaws, gcp, azure, simple-icons
Expected outputA web client crosses provider boundaries for API, processing, events, data, and monitoring.
nodes
7
groups
4
edges
6
Syntax features
  • themes
  • node kinds
  • groups
  • nested groups
  • layout direction
  • rank constraints
  • order constraints
  • edge labels
  • edge kinds
  • directed edges
  • bidirectional edges
  • association edges
  • provider icons
View canonical .stack source