Get 5 new diagram templates every month
以上每个示例的完整 Mermaid 语法。可复制到你自己的工具中，也可以在 FlowViz 编辑器中实时预览和编辑。
最后更新: · Mermaid v11
简单的是/否决策流程——Mermaid 的经典入门示例。
flowchart TD
A(Start) --> B{Is it working?}
B -->|Yes| C[Ship it]
B -->|No| D[Debug]
D --> B
C --> E(Done)展示数据摄取、转换和加载的 ETL 流程。
flowchart LR
A[(Raw Data)] --> B[Extract]
B --> C{Valid?}
C -->|Yes| D[Transform]
C -->|No| E[Error Log]
D --> F[Load]
F --> G[(Data Warehouse)]
E --> H[Alert]客户端、网关、缓存与数据库的方块图。
block-beta
columns 3
Client space:1 API["API Gateway"]
space:3
Cache[("Redis")] space:1 DB[("Postgres")]
Client --> API
API --> DB
API --> Cache从提交到部署的构建流水线方块图。
block-beta
columns 4
Commit Build Test Deploy
Commit --> Build
Build --> Test
Test --> Deploy含服务器、数据库与存储的 API 分组架构图。
architecture-beta
group api(cloud)[API]
service db(database)[Database] in api
service disk1(disk)[Storage] in api
service server(server)[Server] in api
db:L -- R:server
disk1:T -- B:db应用分组前的对外网关。
architecture-beta
group app(cloud)[App]
service gateway(internet)[Gateway]
service web(server)[Web Server] in app
service store(database)[Session Store] in app
gateway:R -- L:web
web:R -- L:store面向客户的银行系统 C4 上下文图。
C4Context
title Internet banking - system context
Person(customer, "Customer", "A customer of the bank")
System(banking, "Internet Banking", "Lets customers view accounts")
System_Ext(mail, "E-mail System", "Sends notifications")
Rel(customer, banking, "Uses")
Rel(banking, mail, "Sends e-mails", "SMTP")客户端、认证服务器与 API 之间的 OAuth2 令牌交换。
sequenceDiagram
participant U as User
participant C as Client App
participant A as Auth Server
participant API
U->>C: Click "Login"
C->>A: POST /authorize
A-->>C: Redirect + code
C->>A: POST /token (code)
A-->>C: access_token + refresh_token
C->>API: GET /data (Bearer token)
API-->>C: 200 OK + data
C-->>U: Show dashboard一次 Web 请求从浏览器到数据库的完整过程。
sequenceDiagram
participant B as Browser
participant CDN
participant S as Server
participant DB
B->>CDN: GET /page
CDN-->>B: Cache HIT (static assets)
B->>S: GET /api/data
activate S
S->>DB: SELECT * FROM items
DB-->>S: ResultSet
deactivate S
S-->>B: 200 JSON response含用户资料与会话的核心用户认证数据模型。
erDiagram
USER {
int id PK
string email UK
string password_hash
datetime created_at
bool is_active
}
PROFILE {
int id PK
int user_id FK
string display_name
string avatar_url
text bio
}
SESSION {
string token PK
int user_id FK
datetime expires_at
string ip_address
}
USER ||--|| PROFILE : "has"
USER ||--o{ SESSION : "owns"全球桌面浏览器使用份额饼图。
pie title Global Browser Market Share
"Chrome" : 65.3
"Safari" : 18.7
"Edge" : 4.2
"Firefox" : 4.1
"Samsung" : 2.5
"Other" : 5.2在线商店的订单、商品与客户。
erDiagram
CUSTOMER ||--o{ ORDER : "places"
ORDER ||--|{ LINE_ITEM : "contains"
PRODUCT ||--o{ LINE_ITEM : "in"
CUSTOMER {
int id PK
string name
string email
}
ORDER {
int id PK
int customer_id FK
date order_date
decimal total
}
LINE_ITEM {
int id PK
int order_id FK
int product_id FK
int quantity
decimal price
}
PRODUCT {
int id PK
string name
decimal price
int stock
}含抽象基类的面向对象继承示例。
classDiagram
class Shape {
<<abstract>>
+String color
+float opacity
+area() float
+perimeter() float
}
class Circle {
+float radius
+area() float
+perimeter() float
}
class Rectangle {
+float width
+float height
+area() float
+perimeter() float
}
class Triangle {
+float a
+float b
+float c
+area() float
}
Shape <|-- Circle
Shape <|-- Rectangle
Shape <|-- TriangleWeb 应用项目的高层拆解。
mindmap
root((Web App))
Frontend
React
TypeScript
Tailwind CSS
Backend
Node.js
PostgreSQL
Redis cache
DevOps
Docker
CI/CD
Monitoring
Product
Design system
User research
Analytics按影响与投入绘制的功能待办清单。
quadrantChart
title Feature Priority Matrix
x-axis Low Effort --> High Effort
y-axis Low Impact --> High Impact
quadrant-1 Quick Wins
quadrant-2 Major Projects
quadrant-3 Fill-ins
quadrant-4 Thankless Tasks
Dark mode: [0.2, 0.9]
Mobile app: [0.8, 0.85]
CSV export: [0.25, 0.6]
API docs: [0.4, 0.55]
Refactor DB: [0.9, 0.4]
Fix typos: [0.15, 0.2]按服务类别拆分的每月基础设施预算。
pie title Cloud spend by service
"Compute" : 42.5
"Storage" : 18.2
"Databases" : 16.8
"Networking" : 12.5
"Monitoring" : 10.0面向接口的设计，含两种通知渠道实现。
classDiagram
class Notifier {
<<interface>>
+send(message: string)
}
class EmailNotifier {
+smtpHost: string
+send(message: string)
}
class SmsNotifier {
+provider: string
+send(message: string)
}
class NotificationService {
-notifiers: Notifier[]
+broadcast(message: string)
}
Notifier <|.. EmailNotifier
Notifier <|.. SmsNotifier
NotificationService o-- Notifier用思维导图组织发布工作流和负责人。
mindmap
root((Product Launch))
Marketing
Landing page
Email campaign
Social posts
Engineering
Feature freeze
Load testing
Rollback plan
Support
Docs update
FAQ
Training按可能性与严重度绘制的项目风险。
quadrantChart
title Risk assessment
x-axis Low Likelihood --> High Likelihood
y-axis Low Severity --> High Severity
quadrant-1 Mitigate now
quadrant-2 Contingency plan
quadrant-3 Accept
quadrant-4 Monitor
Vendor lock-in: [0.3, 0.7]
Key person risk: [0.6, 0.8]
Scope creep: [0.8, 0.5]
Data breach: [0.25, 0.95]
Budget overrun: [0.55, 0.45]访客注册、激活到付费的桑基图。
sankey-beta
Visitors,Signed up,300
Visitors,Bounced,700
Signed up,Activated,180
Signed up,Dropped off,120
Activated,Paying,60
Activated,Free tier,120年度预算在部门与项目间分配的桑基图。
sankey-beta
Budget,Engineering,500
Budget,Marketing,250
Budget,Operations,150
Engineering,Headcount,350
Engineering,Infrastructure,150
Marketing,Paid ads,150
Marketing,Events,100六个月营收增长的柱状与折线序列。
xychart-beta
title "Monthly revenue"
x-axis [Jan, Feb, Mar, Apr, May, Jun]
y-axis "Revenue ($k)" 0 --> 120
bar [42, 55, 61, 74, 88, 105]
line [42, 55, 61, 74, 88, 105]各版本 p95 响应时间的折线图。
xychart-beta
title "p95 latency by release"
x-axis [v1.0, v1.1, v1.2, v1.3, v1.4, v1.5]
y-axis "Latency (ms)" 0 --> 500
line [420, 380, 310, 340, 260, 190]比较两名工程师五项技能的雷达图。
radar-beta
title Team skills
axis c["Coding"], d["Design"], o["Ops"]
axis p["Product"], m["Marketing"]
curve alice["Alice"]{80, 60, 70, 55, 40}
curve bob["Bob"]{55, 85, 45, 75, 70}
max 100
min 0TCP 头部前 96 位的数据包图。
packet-beta
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"含设计、开发和测试阶段的两周迭代计划。
gantt
title Sprint 12
dateFormat YYYY-MM-DD
section Design
Wireframes :done, d1, 2024-03-01, 3d
Review :done, d2, after d1, 1d
section Development
Frontend :active, dev1, after d2, 6d
Backend :dev2, after d2, 5d
Integration :dev3, after dev2, 2d
section QA
Testing :qa1, after dev1, 3d
Bug fixes :qa2, after qa1, 2d
section Release
Deploy :milestone, after qa2, 0d带里程碑的季度产品路线图。
gantt
title Product Roadmap 2024
dateFormat YYYY-MM-DD
section Q1
Beta launch :done, 2024-01-15, 30d
User research :done, 2024-02-01, 20d
v1.0 release :milestone, 2024-03-01, 0d
section Q2
Mobile app :2024-04-01, 45d
API v2 :2024-04-15, 30d
section Q3
Enterprise tier :2024-07-01, 60d
Integrations :2024-08-01, 45d电商订单从下单到送达的完整生命周期。
stateDiagram-v2
[*] --> Pending
Pending --> Confirmed : payment_ok
Pending --> Cancelled : payment_failed
Confirmed --> Processing : warehouse_ack
Processing --> Shipped : dispatched
Shipped --> Delivered : delivery_confirmed
Shipped --> ReturnRequested : customer_return
ReturnRequested --> Refunded : return_received
Delivered --> [*]
Refunded --> [*]
Cancelled --> [*]经典有限状态机——红绿灯循环。
stateDiagram-v2
[*] --> Red
Red --> Green : timer
Green --> Yellow : timer
Yellow --> Red : timer
note right of Red
Stop — 30s
end note
note right of Green
Go — 25s
end note
note right of Yellow
Caution — 5s
end note含 PR 合并与热修复的功能分支工作流。
gitGraph
commit id: "initial commit"
commit id: "project setup"
branch feature/auth
checkout feature/auth
commit id: "add login form"
commit id: "add JWT handler"
commit id: "tests passing"
checkout main
branch hotfix/typo
commit id: "fix README typo"
checkout main
merge hotfix/typo
merge feature/auth id: "PR #42"
commit id: "bump v1.1.0" tag: "v1.1.0"创业公司成长历程中的关键里程碑。
timeline
title Company Milestones
section 2021
Jan : Founded
Jun : Seed round \$1.2M
Dec : First 100 customers
section 2022
Mar : Series A \$8M
Sep : 10k users
section 2023
Feb : Product v2 launch
Nov : Profitable从 develop 切出发布分支并含生产热修复的 Git 分支图。
gitGraph
commit id: "init"
branch develop
commit id: "feature-a"
commit id: "feature-b"
branch release/1.0
commit id: "rc1"
checkout main
merge release/1.0 tag: "v1.0"
commit id: "hotfix"
checkout develop
merge main主要版本与基础设施里程碑的时间线。
timeline
title Platform releases
section v1
2023 Q1 : MVP launch
2023 Q3 : Mobile app
section v2
2024 Q1 : API platform
2024 Q3 : SSO and audit logs
section v3
2025 Q2 : AI assistant
2025 Q4 : Multi-region为在线购物每一步打分的用户旅程。
journey
title Checkout experience
section Browse
Find product: 5: Shopper
Compare prices: 3: Shopper
section Purchase
Add to cart: 4: Shopper
Enter payment: 2: Shopper
Confirm order: 5: Shopper, Support从邀请邮件到首次成功时刻的新用户旅程。
journey
title First-week onboarding
section Day 1
Open invite: 4: User
Create account: 3: User
Setup wizard: 2: User, Support
section Week 1
Invite teammates: 4: User
First report: 5: User将认证服务与其安全需求关联的需求图。
requirementDiagram
requirement login_req {
id: 1
text: Users must authenticate before accessing data.
risk: high
verifymethod: test
}
requirement session_req {
id: 2
text: Sessions expire after 30 minutes idle.
risk: medium
verifymethod: analysis
}
element auth_service {
type: service
}
auth_service - satisfies -> login_req
auth_service - satisfies -> session_req进行中迭代的看板快照。
kanban
todo[Todo]
t1[Write API spec]
t2[Design schema]
doing[In progress]
t3[Build endpoints]
t4[Auth middleware]
review[In review]
t5[Rate limiting]
done[Done]
t6[Project setup]