Mermaid 图表语法
本文整理 Markdown 中常用的 Mermaid 图表语法，涵盖流程图、时序图、甘特图、类图等，并附有 TCP 握手、HTTP 通信等实际案例。
Mermaid 图表语法参考
语法简介
流程图（Flowchart）
- 方向声明：
TD(上下)/LR(左右) - 节点类型：
[文本]矩形(文本)圆角矩形((文本))圆形{文本}菱形
- 连接线：
-->实线箭头-.->虚线箭头==>加粗箭头
序列图（Sequence Diagram）
语法要点：
participant定义参与者- 消息类型：
->>同步请求-->>异步响应-x失败消息
- 逻辑块：
loop循环alt/else条件分支par并行
类图（Class Diagram）
语法示例：
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal : +int age
Animal : +String gender
Animal: +isMammal()
class Duck{
+String beakColor
+swim()
+quack()
}
横向流程图
graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[横向流程图]
竖向流程图
graph TD
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[竖向流程图]
标准流程图
以下
flow 语法为 Typora 专有扩展，Hugo / Hextra 不支持渲染，仅供语法参考。st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op标准流程图（横向）
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->opUML 时序图
以下
sequence 语法为 Typora 专有扩展，Hugo / Hextra 不支持渲染，仅供语法参考。标准 Mermaid 时序图见下方「UML 标准时序」节。对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？UML 时序图复杂样例：
Title: 标题：复杂使用
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩UML标准时序
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
sequenceDiagram
participant 张三
participant 李四
张三->王五: 王五你好吗？
loop 健康检查
王五->王五: 与疾病战斗
end
Note right of 王五: 合理 食物 <br/>看医生...
李四-->>张三: 很好!
王五->李四: 你怎么样?
李四-->王五: 很好!
甘特图
%% 语法示例
gantt
dateFormat YYYY-MM-DD
title 软件开发甘特图
section 设计
需求 :done, des1, 2014-01-06,2014-01-08
原型 :active, des2, 2014-01-09, 3d
UI设计 : des3, after des2, 5d
未来任务 : des4, after des3, 5d
section 开发
学习准备理解需求 :crit, done, 2014-01-06,24h
设计框架 :crit, done, after des2, 2d
开发 :crit, active, 3d
未来任务 :crit, 5d
部署 :2d
section 测试
功能测试 :active, a1, after des3, 3d
压力测试 :after a1 , 20h
测试报告 : 48h
TCP三次握手
%% TCP 三次握手时序图
sequenceDiagram
title TCP 三次握手建立连接
participant Client as 客户端
participant Server as 服务器
Note left of Client: 客户端主动打开
Client->>Server: SYN=1, seq=x
Note right of Server: SYN_RCVD 状态\n收到SYN包，记录客户端ISN=x
Server-->>Client: SYN=1, ACK=1, seq=y, ack=x+1
Note left of Client: 收到SYN+ACK\n验证ack=x+1
Client->>Server: ACK=1, seq=x+1, ack=y+1
Note right of Server: ESTABLISHED 状态\n验证ack=y+1\n连接建立完成
TCP四次挥手
%% TCP 四次挥手时序图
sequenceDiagram
title TCP 四次挥手终止连接
participant Client as 客户端
participant Server as 服务器
Note left of Client: 客户端主动关闭
Client->>Server: FIN=1, seq=u
Note right of Server: CLOSE_WAIT 状态\n可能还有数据要发送
Server-->>Client: ACK=1, ack=u+1
Server->>Client: FIN=1, seq=v, ack=u+1
Note left of Client: TIME_WAIT 状态\n等待2MSL(60s)
Client-->>Server: ACK=1, ack=v+1
Note right of Server: 完全关闭连接
HTTP请求
%% HTTP 通信完整流程
sequenceDiagram
title HTTP 通信原理（含TCP连接）
participant Browser as 浏览器
participant Server as 服务器
%% TCP连接建立
Browser->>Server: SYN seq=100
Server-->>Browser: SYN seq=300, ACK=101
Browser->>Server: ACK=301
%% HTTP请求/响应
Browser->>Server: GET /index.html HTTP/1.1
Note left of Browser: 请求行+头部字段\nHost: example.com
Server-->>Browser: HTTP/1.1 200 OK
Note right of Server: 状态行+响应头\nContent-Type: text/html
%% TCP连接关闭
Browser->>Server: FIN seq=500
Server-->>Browser: ACK=501
Server->>Browser: FIN seq=700
Browser-->>Server: ACK=701
饼状图
pie
title HTTP状态码分类
"1xx 信息响应" : 5
"2xx 成功" : 40
"3xx 重定向" : 30
"4xx 客户端错误" : 20
"5xx 服务器错误" : 5
三方支付流程图
sequenceDiagram
participant 买家
participant 商户
participant 第三方支付
participant 银行
买家->>商户: 下单结算
商户->>第三方支付: 生成支付订单
第三方支付->>买家: 跳转支付页面
买家->>第三方支付: 完成授权
第三方支付->>银行: 资金扣款
银行-->>第三方支付: 扣款结果
第三方支付->>商户: 支付结果通知
商户->>买家: 订单状态更新
最后更新于