HomeDiagramsSubgraph
Tag

Subgraph

Grouping nodes inside a labeled `subgraph` container, for a diagram whose flow naturally breaks into stages or systems.

13 examples across every diagram type

Read more in the Mermaid docs →
Flowchart, Zombie Mermaid Frontend Backend State Manager API Server React App Database
FlowchartSubgraphs
Flowchart, Zombie Mermaid Cloud US East Region US West Region Web Server App Server Load Balancer Web Server App Server
FlowchartNested Subgraphs
Flowchart, Zombie Mermaid Processing Pipeline Source Sink Input Parse Transform Output
FlowchartSubgraph Direction Override
Flowchart, Zombie Mermaid CI Pipeline No Yes No Yes Deploy Staging Build Image Tests Pass? QA Approved? Production Push Code Fix & Retry
FlowchartCI/CD Pipeline
Flowchart, Zombie Mermaid Client Layer Service Layer Data Layer Auth DB Auth Service Web App User DB API Gateway User Service Mobile App Order DB Order Service Message Queue
FlowchartSystem Architecture
Flowchart, Zombie Mermaid Outer Inner A B C D
FlowchartNested Subgraphs (RL)
Flowchart, Zombie Mermaid Outer Inner A B C D
FlowchartNested Subgraphs (BT)
Flowchart, Zombie Mermaid Cluster Request Cache Log Audit Reply A B C
FlowchartEdges Into and Out of Subgraphs
Flowchart, Zombie Mermaid 前端 いいえ 请求 확인 はい 결정 用户 完了 ログイン
FlowchartFlowchart: CJK Labels
Flowchart, Zombie Mermaid Cluster 1 2 3 4 5 other Start T U a
FlowchartFlowchart: Five Cluster Exit Siblings (TD)
Flowchart, Zombie Mermaid Cluster 1 2 3 4 5 6 other Start T U a
FlowchartFlowchart: Six Cluster Exit Siblings (TD)
Flowchart, Zombie Mermaid Cluster 1 2 3 Start T a
FlowchartFlowchart: Cluster Exit Siblings with No Other Exit (TD)
Flowchart, Zombie Mermaid Cluster 1 2 3 4 5 6 7 8 9 other Start T U a
FlowchartFlowchart: Nine Cluster Exit Siblings (TD)