Typora Mermaid图表教程：流程图、时序图与甘特图实战

Mermaid图表概述

Typora集成了Mermaid图表库，允许用户使用简单的文本语法绘制各种图表，包括流程图、时序图、甘特图、饼图等。无需安装额外插件，直接在Markdown中编写Mermaid代码即可渲染为图表。本教程将详细介绍各种图表的绘制方法。

启用Mermaid支持

1. 点击「文件」→「偏好设置」
2. 进入「Markdown」选项卡
3. 勾选「Markdown扩展语法」下的「图表」
4. 重启Typora

流程图

流程图是最常用的图表类型，使用graph或flowchart关键字声明。

基本语法

```mermaid
graph TD
    A[开始] --> B{是否准备就绪?}
    B -->|是| C[执行任务]
    B -->|否| D[等待准备]
    D --> B
    C --> E[结束]
```

方向设置

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

节点形状

graph LR
    A[矩形节点]
    B(圆角节点)
    C([圆形节点])
    D[[子流程节点]]
    E{菱形判断}
    F((圆形))

连线样式

A --> B              实线箭头
A --- B              实线无箭头
A -.- B              虚线
A ==> B              粗线箭头
A -->|文字| B        带文字的连线
A -- 文字 --- B      另一种文字连线写法

实际示例：用户登录流程

```mermaid
flowchart TD
    A[用户访问登录页] --> B[输入账号密码]
    B --> C{验证通过?}
    C -->|是| D[生成Token]
    D --> E[跳转首页]
    C -->|否| F[显示错误信息]
    F --> B
```

时序图

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

基本语法

```mermaid
sequenceDiagram
    participant 用户
    participant 前端
    participant 后端
    participant 数据库
    
    用户->>前端: 点击登录按钮
    前端->>后端: 发送登录请求
    后端->>数据库: 查询用户信息
    数据库-->>后端: 返回用户数据
    后端-->>前端: 返回Token
    前端-->>用户: 显示登录成功
```

消息类型

A->>B: 实线箭头（请求）
B-->>A: 虚线箭头（响应）
A--B: 虚线无箭头
A-x B: 实线叉号

添加标注和分组

```mermaid
sequenceDiagram
    participant Client
    participant Server
    
    Note over Client: 客户端初始化
    Client->>Server: 建立连接
    
    rect rgb(240, 240, 240)
        Note right of Server: 认证流程
        Server->>Server: 验证Token
        Server-->>Client: 认证成功
    end
    
    Client->>Server: 请求数据
    Server-->>Client: 返回数据
```

循环和条件判断

loop 每隔5秒
    Client->>Server: 心跳检测
end

alt 成功
    Server-->>Client: 200 OK
else 失败
    Server-->>Client: 401 Unauthorized
end

甘特图

甘特图用于项目进度管理，展示任务时间线。

基本语法

```mermaid
gantt
    title 项目开发计划
    dateFormat YYYY-MM-DD
    
    section 设计阶段
    需求分析     :a1, 2026-01-01, 7d
    原型设计     :a2, after a1, 5d
    UI设计       :a3, after a2, 7d
    
    section 开发阶段
    前端开发     :b1, after a3, 14d
    后端开发     :b2, after a3, 14d
    接口联调     :b3, after b1, 5d
    
    section 测试阶段
    功能测试     :c1, after b3, 5d
    性能测试     :c2, after c1, 3d
    上线部署     :milestone, c3, after c2, 0d
```

任务状态

任务名     :done,    task1, 2026-01-01, 5d    已完成
任务名     :active,  task2, after task1, 5d   进行中
任务名     :         task3, after task2, 5d   未开始
任务名     :crit,    task4, after task3, 5d   关键任务

关键语法说明

• dateFormat：定义日期格式
• section：任务分组
• after：任务依赖关系
• milestone：里程碑（菱形标记）
• crit：标记为关键路径

饼图

饼图用于展示数据占比。

```mermaid
pie title 浏览器市场份额
    "Chrome" : 65.0
    "Safari" : 18.0
    "Edge" : 5.0
    "Firefox" : 3.5
    "其他" : 8.5
```

状态图

状态图用于描述对象的状态变化。

```mermaid
stateDiagram-v2
    [*] --> 待审核
    待审核 --> 审核中: 提交审核
    审核中 --> 已通过: 审核通过
    审核中 --> 已拒绝: 审核拒绝
    已通过 --> [*]
    已拒绝 --> 待审核: 重新提交
```

类图

类图用于面向对象设计中的类关系描述。

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +eat() void
        +sleep() void
    }
    
    class Dog {
        +bark() void
    }
    
    class Cat {
        +meow() void
    }
    
    Animal <|-- Dog
    Animal <|-- Cat
```

图表优化技巧

添加样式

可以为节点自定义颜色和样式：

graph LR
    A[默认节点]
    B[绿色节点]
    style B fill:#90EE90,stroke:#333,stroke-width:2px
    C[红色节点]
    style C fill:#FFB6C1,stroke:#333

链接和点击事件

Mermaid图表中的节点可以添加超链接：

click A "https://example.com" "链接提示文字"

导出图表

在Typora中右键点击渲染后的图表，选择「导出」可以将图表保存为PNG或SVG图片。

总结

Typora集成的Mermaid图表功能让用户无需专业的绘图工具，仅用文本语法就能创建专业的流程图、时序图、甘特图等。掌握各种图表的基本语法和常用元素，就能在技术文档中高效地表达复杂逻辑和流程。建议在实际使用中多参考本文的示例，逐步熟悉Mermaid语法，提升文档的可读性和专业度。