Typora Mermaid图表教程：流程图/时序图/甘特图/类图完整速查

Typora的Mermaid图表到底怎么用

Typora从0.9.98版本开始支持Mermaid图表。打开Typora后,创建Mermaid图表只需两步:

1. 输入 ```mermaid (三个反引号+ mermaid)
2. 输入Mermaid语法代码
3. 在代码块外点击,Typora自动渲染为图表

效果:你写的是文本代码块,Typora实时渲染成精美的流程图、时序图、甘特图等可视化图表。

本文以速查表+实战案例为主,你可以直接复制粘贴文中代码修改使用。

Mermaid基础概念速查

代码块声明

```mermaid
flowchart TD
    A[开始] --> B{判断}
    B -->|是| C[执行]
    B -->|否| D[结束]
```

图表方向

节点形状速查

12个实战案例(直接复制用)

案例1:基本流程图

flowchart TD
    A[用户访问网站] --> B{是否登录?}
    B -->|是| C[显示主页]
    B -->|否| D[跳转登录页]
    D --> E[输入账号密码]
    E --> F{验证通过?}
    F -->|是| C
    F -->|否| G[显示错误]
    G --> E

案例2:数据处理流水线

flowchart LR
    A[原始数据] --> B[数据清洗]
    B --> C[数据转换]
    C --> D[特征工程]
    D --> E[模型训练]
    E --> F{准确率达标?}
    F -->|是| G[模型部署]
    F -->|否| H[调整超参数]
    H --> E

案例3:用户登录时序图

sequenceDiagram
    participant U as 用户
    participant B as 浏览器
    participant S as 服务器
    participant D as 数据库

    U->>B: 输入账号密码
    B->>S: POST /login
    S->>D: 查询用户
    D-->>S: 返回用户信息
    S->>S: 验证密码哈希
    alt 验证成功
        S-->>B: 返回JWT Token
        B-->>U: 显示登录成功
    else 验证失败
        S-->>B: 返回401
        B-->>U: 显示错误
    end

案例4:API调用时序图

sequenceDiagram
    participant App as 移动App
    participant GW as API网关
    participant Auth as 认证服务
    participant Order as 订单服务
    participant Pay as 支付服务

    App->>GW: POST /api/orders
    GW->>Auth: 验证Token
    Auth-->>GW: 用户ID
    GW->>Order: 创建订单
    Order->>Pay: 请求支付
    Pay-->>Order: 支付链接
    Order-->>GW: 订单结果
    GW-->>App: 响应数据

案例5:项目甘特图

gantt
    title 某App开发计划
    dateFormat YYYY-MM-DD
    section 设计阶段
    需求分析       :a1, 2026-01-01, 7d
    UI设计        :a2, after a1, 10d
    section 开发阶段
    后端开发       :b1, after a2, 20d
    前端开发       :b2, after a2, 15d
    测试环境部署   :b3, after b1, 3d
    section 测试上线
    功能测试       :c1, after b2, 7d
    性能测试       :c2, after c1, 5d
    正式上线       :milestone, after c2, 0d

案例6:OOP类图

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +String breed
        +bark()
        +fetch()
    }
    class Cat {
        +String color
        +meow()
        +climb()
    }
    Animal <|-- Dog
    Animal <|-- Cat
    Dog ..|> Trainable : 实现
    class Trainable {
        <<interface>>
        +train()
        +perform()
    }

案例7:订单状态机

stateDiagram-v2
    [*] --> 待支付
    待支付 --> 已支付 : 用户付款
    待支付 --> 已取消 : 超时取消
    已支付 --> 待发货 : 商家处理
    待发货 --> 已发货 : 物流揽收
    已发货 --> 已收货 : 用户确认
    已支付 --> 申请退款 : 用户申请
    申请退款 --> 已退款 : 商家同意
    已收货 --> [*]
    已退款 --> [*]

案例8:电商系统架构图

flowchart TB
    subgraph 用户层
        A1[Web端]
        A2[移动App]
        A3[小程序]
    end
    
    subgraph 网关层
        B[API网关]
    end
    
    subgraph 业务层
        C1[用户服务]
        C2[商品服务]
        C3[订单服务]
        C4[支付服务]
    end
    
    subgraph 数据层
        D1[(MySQL)]
        D2[(Redis)]
        D3[(Elasticsearch)]
    end

    A1 --> B
    A2 --> B
    A3 --> B
    B --> C1
    B --> C2
    B --> C3
    B --> C4
    C1 --> D1
    C2 --> D1
    C3 --> D1
    C1 --> D2
    C2 --> D3

案例9:饼图(数据可视化)

pie title 浏览器市场份额
    "Chrome" : 65
    "Safari" : 18
    "Edge" : 5
    "Firefox" : 4
    "其他" : 8

案例10:Git分支图

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    merge feature
    commit

案例11:用户旅程图(Journey)

journey
    title 用户从了解到付费的旅程
    section 认识
      浏览搜索结果: 3: 用户
      阅读产品介绍: 4: 用户
    section 考虑
      对比竞品: 3: 用户
      查看定价: 4: 用户
      观看教程视频: 4: 用户
    section 试用
      注册免费账户: 5: 用户
      体验核心功能: 4: 用户
    section 购买
      查看套餐: 3: 用户
      完成支付: 5: 用户

案例12:C4架构图

flowchart LR
    subgraph 外部用户
        USER[终端用户]
    end
    
    subgraph 系统边界
        WEB[Web应用]
        API[API服务]
        DB[(数据库)]
    end
    
    USER -->|使用| WEB
    WEB -->|调用| API
    API -->|读写| DB

Mermaid主题设置

Typora v1.0+支持切换Mermaid主题:

Typora → 偏好设置 → Markdown → Mermaid Theme:
• 默认 (Default)
• 森林 (Forest) — 适合白底文档
• 暗黑 (Dark) — 适合深色主题
• 中性 (Neutral)

或在代码块中临时指定:

```mermaid
%%{init: {'theme':'forest'}}%%
flowchart TD
    A --> B
```

Mermaid导出注意事项

Typora导出PDF/HTML时,Mermaid图表的处理:

导出PDF的最佳实践:

1. 用Typora 1.5+版本(Mermaid v10兼容性更好)
2. 如果PDF中图表显示异常,改用HTML格式导出PDF(用Chromium)

常见Mermaid错误与修复

错误1:图表不渲染

原因:代码块第一行有空格或Tab
修复:确保 ```mermaid 顶格写

错误2:连线断错位置

flowchart TD
    A --> B
    B --> C
    C --> D

错误3:特殊字符未转义

如果节点文字包含 ()[]{}| 等特殊字符:

flowchart TD
    A["包含(括号)的文字"] --> B

用双引号包起来转义。

错误4:中文标点问题

中文逗号、句号在某些版本会破坏流程图。建议改用英文标点或用引号包裹:

flowchart TD
    A["开始,处理用户请求"] --> B[保存到数据库]

错误5:时序图渲染失败

sequenceDiagram
    Alice->>Bob: 你好

Alice、Bob中间->>不能有空格,且必须是大写开头的合法标识符或被引号包裹。

错误6:图表与文本混合渲染失败

确保Mermaid代码块与上下文本之间有空行,否则Typora可能识别为普通代码块。

Mermaid vs PlantUML vs Graphviz对比

如果只是写文档配图,Mermaid是最简单快捷的选择。

进阶:Mermaid 10新功能(2024+)

如果你的Typora版本够新(Mermaid 10+),还能用这些高级功能:

子图与图块

flowchart TB
    subgraph Frontend["前端"]
        FE1[React]
        FE2[Vue]
    end
    subgraph Backend["后端"]
        BE1[Node.js]
        BE2[Java]
    end
    FE1 --> BE1
    FE2 --> BE2

注释

flowchart TD
    A[开始] --> B[处理]
    %% 这是注释
    B --> C[结束]

时间轴

timeline
    title 编程语言发展
    1950 : Fortran
    1970 : C
    1990 : Python
    2010 : Go

总结:Mermaid是Typora的“隐藏大招”

很多Typora用户买完软件,只用它写作常规Markdown,错过了Mermaid这个核心优势。Mermaid让你在Markdown里直接画流程图、时序图、架构图、甘特图,不需要额外工具,导出PDF/HTML时图表照样精美。

本文提供的12个模板覆盖了90%的常用图表场景。建议:

1. 收藏本文,需要时查代码
2. 自己常用的3-4个图表(流程图、时序图、类图、甘特图)代码记下来
3. 在团队技术文档、需求文档、设计文档中大量使用

下次写技术文档不用再画Visio或PPT架构图了——Typora + Mermaid,纯文本出图,所见即所得。