Mermaid 流程图与时序图的写法
Mermaid 让你在 Markdown 里写图。代码即图,diff 友好,版本管理友好。
流程图(Flowchart)
flowchart LR
A[收到需求] --> B{是否清晰?}
B -- 是 --> C[拆任务]
B -- 否 --> D[澄清]
D --> B
C --> E[实现]
E --> F[Code Review]
F --> G[上线]
时序图(Sequence Diagram)
sequenceDiagram
participant U as 用户
participant W as Web 前端
participant A as API 服务
participant D as 数据库
U->>W: 点击"登录"
W->>A: POST /login
A->>D: 查询用户
D-->>A: 用户信息
A-->>W: JWT Token
W-->>U: 跳转到首页
甘特图(Gantt)
gantt
title 上线排期
dateFormat YYYY-MM-DD
section 基础
搭骨架 :done, a1, 2026-05-23, 1d
部署上线 :active, a2, 2026-05-24, 2d
section 内容
首批文章 :a3, after a2, 5d
SEO 与统计 :a4, after a3, 3d
怎么写
直接在 Markdown 里用 ```mermaid 包起来即可,无需额外语法。本站已启用 hexo-filter-mermaid-diagrams,Butterfly 主题自动加载渲染脚本。
更多语法参见 Mermaid 官方文档。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 火火的记录!