跳到主要内容

Mermaid 图表

Mermaid 是一种基于文本的图表语言，可以在 Markdown 中创建流程图、时序图、甘特图等。它让图表像代码一样可维护、可版本控制。

基本语法​

Mermaid 图表使用代码块语法，指定 mermaid 语言：

```mermaid
graph TD
    A[开始] --> B[结束]
```

渲染效果：

流程图​

流程图是最常用的图表类型，用于展示流程和决策。

基本结构​

方向​

  • TB 或 TD：从上到下
  • BT：从下到上
  • LR：从左到右
  • RL：从右到左

节点形状​

语法形状示例
[]方框[方框]
()圆角(圆角)
(())圆形((圆形))
{}菱形{菱形}
[[]]子程序[[子程序]]
[()]圆柱[(数据库)]
{{}}六边形{{六边形}}

连接线​

完整示例​

时序图​

时序图用于展示对象之间的交互顺序。

基本语法​

箭头类型​

激活框​

循环​

条件分支​

完整示例​

类图​

类图用于展示类之间的关系。

基本语法​

类成员可见性​

  • + public
  • - private
  • # protected

关系类型​

状态图​

状态图用于展示对象的状态变化。

甘特图​

甘特图用于项目进度管理。

饼图​

饼图用于展示数据占比。

ER 图​

实体关系图用于数据库设计。

子图​

在流程图中使用子图组织内容：

样式定制​

节点样式​

类样式​

最佳实践​

保持简洁​

图表应该清晰表达核心逻辑，避免过于复杂：

合理使用子图​

将相关节点组织在一起：

添加说明文字​

在连接线上添加说明文字：

统一方向​

同一文档中的图表方向保持一致。

兼容性​

平台支持情况
GitHub支持
GitLab支持
Obsidian支持
Typora支持
Docusaurus支持
VS Code (插件)支持

小结​

本章学习了 Mermaid 图表的使用方法：

  1. 流程图：展示流程和决策
  2. 时序图：展示对象交互
  3. 类图：展示类关系
  4. 状态图：展示状态变化
  5. 甘特图：项目进度管理
  6. 饼图：数据占比展示
  7. ER 图：数据库设计

练习​

  1. 创建一个用户登录流程图
  2. 创建一个 HTTP 请求的时序图
  3. 创建一个简单的项目甘特图
  4. 创建一个订单状态的状态图