Mermaid Diagram Gallery and Patterns
This page showcases a curated set of Mermaid diagrams that you can reuse across architecture, process, and planning documentation. Each snippet is ready to copy-paste into a Confluence Mermaid macro or any Mermaid-compatible renderer.
Tip: In Confluence, add the Mermaid macro and paste the code from each example below. Keep diagrams small and focused; link to deeper pages when they grow complex.
Architecture and Systems
1) Service Interaction (C4-style simplified)
Use for high-level service-to-service calls.
flowchart LR
subgraph Client
U[User]
FE[Web App]
end
subgraph Backend
API[API Gateway]
SVC1[Orders Service]
SVC2[Payments Service]
SVC3[Notifications]
end
DB[(PostgreSQL)]
Q[(Event Bus)]
CDN[(CDN)]
U --> FE
FE --> CDN
FE --> API
API --> SVC1
API --> SVC2
SVC1 -- publish --> Q
SVC3 -- subscribe --> Q
SVC1 -- read/write --> DB
SVC2 -- read/write --> DB
classDef data fill:#E3F2FD,stroke:#1E88E5,color:#0D47A1;
class DB,Q,CDN data;
2) Request Lifecycle Sequence
Trace an end-to-end request for troubleshooting and SLO mapping.
sequenceDiagram
autonumber
participant U as User
participant FE as Frontend
participant GW as API Gateway
participant OR as Orders Svc
participant DB as PostgreSQL
U->>FE: Click "Place Order"
FE->>GW: POST /orders
GW->>OR: Validate and forward
OR->>DB: BEGIN TX; INSERT order
DB-->>OR: OK
OR-->>GW: 201 Created (orderId)
GW-->>FE: 201 Created
FE-->>U: Show confirmation
3) Deployment Pipeline (CI/CD)
Visualize branch-to-prod flow with approvals and gates.
flowchart TD
A[Commit to main] -- triggers --> B[CI Build]
B -- run --> T[Unit + Lint + SCA]
T -- pass --> I[Build Image]
I -- push --> R[(Container Registry)]
R -- tag --> S[Staging Deploy]
S -- tests --> QA[QA Sign-off]
QA -- approve --> P[Prod Deploy]
P -- verify --> M[Monitoring & Rollback]
classDef gate fill:#FFF3E0,stroke:#EF6C00,color:#E65100;
class QA gate;
4) Cloud Reference Topology
Compact VPC diagram with subnets and core components.
flowchart LR
subgraph VPC[VPC 10.0.0.0/16]
subgraph Pub[Public Subnet 10.0.1.0/24]
ALB[ALB]
NAT[NAT GW]
end
subgraph Priv[Private Subnet 10.0.2.0/24]
ECS[ECS/Fargate Service]
RDS[(RDS PostgreSQL)]
REDIS[(ElastiCache)]
end
end
IGW[Internet]
IGW --> ALB
ALB --> ECS
ECS -- read/write --> RDS
ECS -- cache --> REDIS
ECS -- egress --> NAT
classDef store fill:#E8F5E9,stroke:#43A047,color:#1B5E20;
class RDS,REDIS store;
Processes and Operations
5) Incident Response Swimlanes
Coordinate roles and timelines during incidents.
sequenceDiagram
participant R as Reporter
participant IC as Incident Commander
participant ENG as On-call Engineer
participant COM as Comms Lead
R->>IC: Report Major Degradation
IC->>ENG: Page; start Zoom bridge
IC->>COM: Draft external update
ENG->>ENG: Mitigate (rollback feature X)
ENG-->>IC: Mitigation applied
COM-->>Users: Status page update
IC-->>All: Incident resolved; start RCA
6) Feature Lifecycle Kanban
Track work states with WIP focus.
flowchart LR
Backlog -- refine --> Ready
Ready -- pull --> InDev
InDev -- PR --> Review
Review -- merge --> InTest
InTest -- pass --> Release
Release -- monitor --> Done
subgraph Board[Swimlanes]
Backlog((Backlog))
Ready((Ready))
InDev((In Dev))
Review((Review))
InTest((In Test))
Release((Release))
Done((Done))
end
classDef state fill:#E3F2FD,stroke:#1976D2,color:#0D47A1;
class Backlog,Ready,InDev,Review,InTest,Release,Done state;
7) On-call Rotation Calendar (Gantt)
Schedule coverage windows and handoffs.
gantt
title On-call Rotation
dateFormat YYYY-MM-DD
section Primary
Alice :active, a1, 2026-05-01, 7d
Bob :a2, 2026-05-08, 7d
Carol :a3, 2026-05-15, 7d
section Secondary
Dan :b1, 2026-05-01, 7d
Erin :b2, 2026-05-08, 7d
Frank :b3, 2026-05-15, 7d
8) A/B Experiment Flow
Outline traffic splits and outcome evaluation.
flowchart TD
U[Users] -- 50% --> A[Variant A]
U -- 50% --> B[Variant B]
A -- events --> TE[Telemetry]
B -- events --> TE
TE -- analyze --> STAT[Stats Engine]
STAT -- decision --> GO{Ship B?}
GO -- yes --> RolloutB[Gradual Rollout B]
GO -- no --> KeepA[Retain A]
Data and Logic
9) ETL Pipeline
Map batch ingestion and transformations.
flowchart LR
SRC1[(S3 Raw)]
SRC2[(Kafka)]
E[Extract Jobs]
T[Transform (dbt)]
L[(DW Snowflake)]
BI[BI Dashboards]
SRC1 -- nightly --> E
SRC2 -- micro-batch --> E
E -- staged --> T
T -- models --> L
L -- datasets --> BI
classDef store fill:#FFFDE7,stroke:#FBC02D,color:#F57F17;
class SRC1,SRC2,L store;
10) State Machine (Checkout)
Represent deterministic UI logic for robust flows.
stateDiagram-v2
[*] --> Cart
Cart -- checkout --> Shipping
Shipping -- next --> Payment
Payment -- pay --> Review
Review -- confirm --> Success
Payment -- fail --> PaymentError
PaymentError -- retry --> Payment
Success --> [*]
11) ER Diagram (Conceptual)
Show core relationships before schema design.
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ ORDER_ITEM : contains
PRODUCT ||--o{ ORDER_ITEM : referenced
USER {
string user_id PK
string email
}
ORDER {
string order_id PK
date created_at
}
ORDER_ITEM {
string order_id FK
string product_id FK
int qty
}
PRODUCT {
string product_id PK
string name
money price
}
Planning and Strategy
12) Roadmap (Simple Gantt)
Quarterly initiatives by track.
gantt
title Product Roadmap
dateFormat YYYY-MM-DD
section Growth
Activation revamp :g1, 2026-06-01, 30d
Self-serve trials :g2, after g1, 30d
section Platform
Multi-Region :p1, 2026-07-01, 45d
Observability v2 :p2, 2026-06-10, 40d
section Compliance
SOC2 Type II :c1, 2026-06-01, 60d
13) OKR Tree
Connect objectives to measurable key results and initiatives.
mindmap
root((Company Objective: Sustainable Growth))
KR1:::kr(Expand ARR 30%)
Init: Pricing experiments
Init: Enterprise packaging
KR2:::kr(Reduce churn 20%)
Init: Onboarding overhaul
Init: Health scoring
KR3:::kr(Improve margin 5 pts)
Init: Infra efficiency
Init: Cost guardrails
classDef kr fill:#E3FCEF,stroke:#2E7D32,color:#1B5E20;
14) Risk Matrix
Map risk likelihood versus impact with mitigations.
flowchart LR
subgraph Likelihood
L1[Low]
L2[Med]
L3[High]
end
subgraph Impact
I1[Low]
I2[Med]
I3[High]
end
R1[[Data breach]]:::high
R2[[Service outage]]:::med
R3[[Vendor lock-in]]:::low
L3 -- vs --> R1
I3 -- affects --> R1
L2 -- vs --> R2
I2 -- affects --> R2
L1 -- vs --> R3
I1 -- affects --> R3
classDef high fill:#FFEBEE,stroke:#C62828,color:#B71C1C;
classDef med fill:#FFF8E1,stroke:#EF6C00,color:#E65100;
classDef low fill:#E3F2FD,stroke:#1E88E5,color:#0D47A1;
class R1 high;
class R2 med;
class R3 low;
Security and Governance
15) AuthN/AuthZ Sequence
Depict token issuance and authorization checks.
sequenceDiagram
participant C as Client
participant IDP as Identity Provider
participant API as Resource Server
C->>IDP: Authenticate (OIDC)
IDP-->>C: ID Token + Access Token
C->>API: GET /orders (Bearer)
API->>IDP: Introspect/Verify
IDP-->>API: Token valid + scopes
API-->>C: 200 OK (authorized)
16) Data Classification Flow
Guide teams to apply correct controls by data class.
flowchart TD
A[Start] -- classify --> B{Data Type}
B -- PII --> C[Encrypt at rest + in transit; restricted access]
B -- Financial --> D[SOX controls; dual approval]
B -- Public --> E[Open access; caching allowed]
C -- store --> S[(KMS-managed store)]
D -- audit --> L[Logging + Retention]
E -- publish --> CDN[(CDN/Website)]