在 Markdown 中使用 Mermaid 绘图

这篇文章演示如何在 Markdown 文档中使用 Mermaid 创建多种图表，包括流程图、时序图、甘特图、类图、状态图和饼图。

流程图示例

流程图很适合表现业务流程或算法步骤。

graph TD A[开始] --> B{检查条件} B -->|是| C[处理步骤 1] B -->|否| D[处理步骤 2] C --> E[子流程] D --> E subgraph E [子流程详情] E1[子步骤 1] --> E2[子步骤 2] E2 --> E3[子步骤 3] end E --> F{再次判断} F -->|选项 1| G[结果 1] F -->|选项 2| H[结果 2] F -->|选项 3| I[结果 3] G --> J[结束] H --> J I --> J

时序图示例

时序图用来展示不同对象随时间发生的交互。

sequenceDiagram participant User as 用户 participant WebApp as Web 应用 participant Server as 服务器 participant Database as 数据库 User->>WebApp: 提交登录请求 WebApp->>Server: 发送身份验证请求 Server->>Database: 查询用户凭据 Database-->>Server: 返回用户数据 Server-->>WebApp: 返回验证结果 alt 验证成功 WebApp->>User: 显示欢迎页面 WebApp->>Server: 请求用户数据 Server->>Database: 获取用户偏好 Database-->>Server: 返回偏好设置 Server-->>WebApp: 返回用户数据 WebApp->>User: 加载个性化界面 else 验证失败 WebApp->>User: 显示错误信息 WebApp->>User: 提示重新输入 end

甘特图示例

甘特图很适合展示项目计划与时间安排。

gantt title 网站开发项目时间线 dateFormat YYYY-MM-DD axisFormat %m/%d section 设计阶段需求分析 :a1, 2023-10-01, 7d UI 设计 :a2, after a1, 10d 原型制作 :a3, after a2, 5d section 开发阶段前端开发 :b1, 2023-10-20, 15d 后端开发 :b2, after a2, 18d 数据库设计 :b3, after a1, 12d section 测试阶段单元测试 :c1, after b1, 8d 集成测试 :c2, after b2, 10d 用户验收测试 :c3, after c2, 7d section 部署阶段生产环境部署 :d1, after c3, 3d 正式上线 :milestone, after d1, 0d

类图示例

类图用于展示系统的静态结构，包括类、属性、方法以及它们之间的关系。

classDiagram class User { +String username +String password +String email +Boolean active +login() +logout() +updateProfile() } class Article { +String title +String content +Date publishDate +Boolean published +publish() +edit() +delete() } class Comment { +String content +Date commentDate +addComment() +deleteComment() } class Category { +String name +String description +addArticle() +removeArticle() } User "1" -- "*" Article : 撰写 User "1" -- "*" Comment : 发布 Article "1" -- "*" Comment : 包含 Article "1" -- "*" Category : 属于

状态图示例

状态图用于展示一个对象在生命周期中经历的状态变化。

stateDiagram-v2 [*] --> Draft Draft --> UnderReview : 提交 UnderReview --> Draft : 退回 UnderReview --> Approved : 通过 Approved --> Published : 发布 Published --> Archived : 归档 Published --> Draft : 撤回 state Published { [*] --> Active Active --> Hidden : 暂时隐藏 Hidden --> Active : 恢复显示 Active --> [*] Hidden --> [*] } Archived --> [*]

饼图示例

饼图适合展示占比和百分比数据。

pie title 网站流量来源分析 "搜索引擎" : 45.6 "直接访问" : 30.1 "社交媒体" : 15.3 "外部链接" : 6.4 "其他来源" : 2.6

总结

Mermaid 是在 Markdown 文档中绘制图表的强大工具。本文展示了流程图、时序图、甘特图、类图、状态图和饼图的基本写法，这些图表能让复杂概念、流程和数据结构更直观。

使用时，只需在代码块中指定 mermaid 语言，再用简洁的文本语法描述图表；Mermaid 会自动将它渲染成清晰美观的图形。

下次写技术文章或项目文档时，不妨试试 Mermaid，它能让内容更专业，也更容易理解。

vcg