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 官方文档