Every Mermaid diagram type that renders on GitHub, with practical examples.
flowchart LR
subgraph Client
A[Browser] --> B[React App]
end
subgraph Server
C[API Gateway] --> D[Auth Service]
C --> E[Data Service]
end
B --> C
E --> F[(PostgreSQL)]
sequenceDiagram
participant U as User
participant A as API
participant DB as Database
U->>A: POST /login
A->>DB: SELECT user WHERE email=?
DB-->>A: user record
A-->>U: 200 + JWT token
Note over A: Token expires in 1h
erDiagram
USERS ||--o{ POSTS : writes
USERS {
int id PK
string email UK
string name
}
POSTS ||--o{ COMMENTS : has
POSTS {
int id PK
int user_id FK
string title
text body
}
COMMENTS {
int id PK
int post_id FK
text content
}
classDiagram
class Animal {
+String name
+int age
+makeSound() void
}
class Dog {
+fetch() void
}
class Cat {
+purr() void
}
Animal <|-- Dog
Animal <|-- Cat
stateDiagram-v2
[*] --> Draft
Draft --> Review : Submit
Review --> Approved : Approve
Review --> Draft : Request Changes
Approved --> Published : Deploy
Published --> [*]
gantt
title Sprint 14
dateFormat YYYY-MM-DD
section Backend
API redesign :a1, 2026-03-01, 5d
Database migration :a2, after a1, 3d
section Frontend
UI components :b1, 2026-03-01, 4d
Integration :b2, after b1, 3d
section QA
Testing :c1, after a2, 4d
pie showData
title Token Usage by Model
"Claude Opus" : 42
"Claude Sonnet" : 35
"Claude Haiku" : 23
journey
title Developer Onboarding
section Day 1
Clone repo: 5: Dev
Read CLAUDE.md: 4: Dev
Run tests: 3: Dev
section Day 2
First PR: 4: Dev, Reviewer
Code review: 3: Dev, Reviewer
section Day 3
Ship to prod: 5: Dev, SRE
gitGraph
commit id: "init"
branch feature
checkout feature
commit id: "add auth"
commit id: "add tests"
checkout main
merge feature id: "merge feature"
commit id: "release v1.0"
mindmap
root((Project))
Frontend
React
Tailwind
Vite
Backend
Node.js
PostgreSQL
Redis
Infrastructure
GCP
Terraform
Docker
C4Context
title System Context
Person(user, "Developer", "Uses CLI tools")
System(cc, "Claude Code", "AI coding assistant")
System_Ext(api, "Anthropic API", "LLM inference")
Rel(user, cc, "Prompts")
Rel(cc, api, "API calls")
timeline
title Product Evolution
2024 : MVP Launch
: 100 users
2025 : API Released
: 10k users
: Series A
2026 : Enterprise
: 100k users
quadrantChart
title Feature Prioritization
x-axis Low Effort --> High Effort
y-axis Low Impact --> High Impact
quadrant-1 Do First
quadrant-2 Plan Carefully
quadrant-3 Quick Wins
quadrant-4 Avoid
Dark Mode: [0.2, 0.8]
SSO: [0.7, 0.9]
Emoji Picker: [0.1, 0.2]
Redesign: [0.9, 0.4]
xychart-beta
title "Deploys Per Week"
x-axis ["W1", "W2", "W3", "W4", "W5", "W6"]
y-axis "Count" 0 --> 25
bar [8, 12, 15, 11, 20, 18]
line [8, 12, 15, 11, 20, 18]
sankey-beta
Requests,Cache Hit,60
Requests,Cache Miss,40
Cache Miss,Database,30
Cache Miss,External API,10
block-beta
columns 3
Frontend["React Frontend"]:1
API["API Gateway"]:1
Auth["Auth Service"]:1
kanban
Backlog
Refactor auth
Add rate limiting
In Progress
API v2 migration
Review
Dashboard redesign
Done
CI pipeline
architecture-beta
group cloud(cloud)[Cloud Infrastructure]
service lb(server)[Load Balancer] in cloud
service api(server)[API Server] in cloud
service db(database)[PostgreSQL] in cloud
service cache(disk)[Redis Cache] in cloud
lb:R -- L:api
api:R -- L:db
api:B -- T:cache
venn-beta
title Engineering Skills
set Frontend
set Backend
set DevOps
union Frontend,Backend["Fullstack"]
union Backend,DevOps["SRE"]
union Frontend,DevOps["Platform UI"]
union Frontend,Backend,DevOps["Unicorn"]
radar-beta
axis Speed, Reliability, Cost, DX, Scale
curve a["Current"]{3, 4, 2, 5, 3}
curve b["Target"]{5, 5, 3, 4, 5}
max 5
min 0
All 20 diagram types verified rendering on GitHub, March 2026.