Sigrid blog

mermaid支持的各种图表

5 min read

https://docs.min2k.com/zh/mermaid/intro/

Mermaid 和 Markdown 的关系

Mermaid 是一个基于 JavaScript 的图表生成库，它可以在 Markdown 中使用，但不是 Markdown 的原生功能。

Markdown 原生支持：

  • 标题 (# ## ###)
  • 列表（有序、无序）
  • 链接和图片
  • 代码块
  • 表格
  • 引用块
  • 粗体、斜体等基本格式

Mermaid 提供的图表类型

除了甘特图，Mermaid 还支持：

gantt

**mermaid：**图中红框第一行内容与最后一行内容，表示当前使用的语言为mermaid。
**gantt：**表示图表类型为甘特图
**dateFormat：**指定日期格式（Y表示年，M表示月，D表示日）。YYYY-MM-DD（2019-03-14），YY-MM-DD(19-03-14)
section： 项目关键字，空格之后输入项目名称。
任务行： section后每一行为一个任务。第一个字符串为任务名称，之后以:开头，添加任务属性。

接下来用下面代码实例说明常见任务属性。
任务状态：

  • done 已完成
  • active正在进行
  • crit 关键任务
  • 默认任务都为待完成状态

**任务描述：**在des1、des2位置添加任务描述，其它任务引用时直接引用des1就可以。
after: 描述任务时间关系。des3, after des2表示des3紧跟在des2之后。
任务时长有三种方式：

  • 时间范围 如：2014-01-06,2014-01-08
  • 指定天数 如：5d
  • 指定开始日期+天数 如：2014-01-06，5d
    d 天 w 周 h 小时 m 分钟
    （1m = 1 minute；如果想写 month，请用 4w 或写绝对日期，避免歧义）
    PS:所有关键字之间用“,”分隔，关键字需要属性时用空格分隔(如：after des2,)。
    支持的其他格式示例

Table

Copy

格式串例子说明
YYYY-MM-DD2025-11-18最常用
DD/MM/YYYY18/11/2025欧洲习惯
X1731926400Unix 秒时间戳

二、任务时间的 3 种合法写法

Table

Copy

写法示例渲染结果
起 + 止（绝对）2025-11-01, 2025-11-07精确到日
起 + 时长（相对）2025-11-01, 7d从 1 号开始 7 天
起 + 时长（周/月）2025-11-01, 2w / 2025-11-01, 1m1 个月≈30 天

注意：逗号是分隔符，不能写成空格！

1. 流程图 (Flowchart)

graph TD
    A[开始] --> B{判断}
    B -->|是| C[执行操作]
    B -->|否| D[结束]
    C --> D

2. 序列图 (Sequence Diagram)

sequenceDiagram
    participant A as 用户
    participant B as 系统
    A->>B: 登录请求
    B-->>A: 登录成功

3. 类图 (Class Diagram)

classDiagram
    class Animal {
        +String name
        +void eat()
    }
    class Dog {
        +void bark()
    }
    Animal <|-- Dog

4. 状态图 (State Diagram)

stateDiagram-v2
    [*] --> 待机
    待机 --> 运行: 启动
    运行 --> 待机: 停止
    运行 --> 错误: 异常
    错误 --> 待机: 重置

5. 饼图 (Pie Chart)

pie title 任务时间分配
    "编码" : 40
    "测试" : 25
    "文档" : 20
    "会议" : 15

6. 思维导图 (Mindmap)

mindmap
  root((Mermaid))
    图表类型
      流程图
      序列图
      甘特图
      类图
    优点
      易学易用
      文本驱动
      版本可控

7. 时间线 (Timeline)

timeline
    title 项目里程碑
    2024-01 : 项目启动
    2024-03 : 原型完成
    2024-06 : 测试阶段
    2024-09 : 正式发布

在 Markdown 中使用 Mermaid

在支持 Mermaid 的 Markdown 编辑器中，使用代码块语法：

```mermaid
// 这里写 mermaid 代码
graph TD
    A --> B
```

其他 Markdown 扩展

除了 Mermaid，一些 Markdown 平台还支持：

  • 数学公式 (LaTeX)
  • 任务列表 (- [ ] 任务)
  • 目录生成 ([TOC])
  • 图表 (如 PlantUML、Graphviz)

总结

  • Gantt 是 Mermaid 的功能，不是 Markdown 原生功能
  • Mermaid 是 Markdown 的扩展，需要环境支持
  • Mermaid 提供多种图表类型，甘特图只是其中之一

您对哪种图表类型比较感兴趣？我可以提供更详细的示例和用法！

Graph View

Recent Notes