使用 Mermaid 创建精美图表

Mermaid 让你可以直接在 Markdown 文件中使用简单的文本语法创建图表和可视化内容。无需再在工具之间切换或嵌入静态图片——你的图表与文档共存，并可进行版本控制。

为什么选择 Mermaid？

传统图表工具需要独立文件、昂贵的许可证或云服务。Mermaid 图表的特点：

• 基于文本 — 对版本控制友好
• 可移植 — 在任何支持 Mermaid 的地方均可渲染
• 易维护 — 通过编辑文本即可更新图表
• 高效 — 无需 GUI

流程图

最常见的图表类型。使用 graph 或 flowchart 定义方向：

flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Do something]
    B -->|No| D[Do something else]
    C --> E[End]
    D --> E

方向选项：LR（从左到右）、RL、TB（从上到下）、BT。

时序图

非常适合记录 API 调用和系统交互：

sequenceDiagram
    User->>Server: GET /api/posts
    Server->>Database: SELECT * FROM posts
    Database-->>Server: rows[]
    Server-->>User: JSON response

甘特图

可视化项目时间线：

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Design
    Wireframes    :2024-01-01, 7d
    Mockups       :7d
    section Development
    Frontend      :2024-01-15, 14d
    Backend       :2024-01-20, 10d

类图

记录面向对象设计：

classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    Animal : +String name
    Animal : +makeSound()
    Dog : +fetch()
    Cat : +purr()

使用技巧

• 使用 %% 在图表中添加注释
• 保持图表专注——每张图表只表达一个概念
• 嵌入前先在 Mermaid Live Editor 测试你的语法