Markdown 图表绘制

除了文本和数学公式，图表也是文档中的重要元素。虽然标准 Markdown 不支持图表，但可以通过集成的图表工具来创建流程图、时序图、甘特图等。本章将介绍如何在 Markdown 中绘制各种图表。

Mermaid 简介

Mermaid 是一个基于 JavaScript 的图表绘制工具，可以在 Markdown 中直接使用简单的文本语法来创建各种图表。

基本语法

使用三个反引号和 mermaid 标识：

markdown

```mermaid
graph TD;
    A-->B;


## 流程图

### 基本流程图

```markdown
```mermaid
graph TD;
    A[开始] --> B{判断};
    B -->|是| C[执行操作];
    B -->|否| D[跳过];
    C --> E[结束];
    D --> E;


**效果：**

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

从左到右的流程图

markdown

```mermaid
graph LR;
    A[开始] --> B[处理];
    B --> C[结束];


**效果：**

```mermaid
graph LR;
    A[开始] --> B[处理];
    B --> C[结束];

复杂流程图

markdown

```mermaid
graph TD;
    Start(开始) --> Init[初始化];
    Init --> Check{检查条件};
    Check -->|成功| Process[处理数据];
    Check -->|失败| Error[记录错误];
    Process --> Save[保存结果];
    Error --> Retry{重试?};
    Retry -->|是| Init;
    Retry -->|否| End(结束);
    Save --> End;


**效果：**

```mermaid
graph TD;
    Start(开始) --> Init[初始化];
    Init --> Check{检查条件};
    Check -->|成功| Process[处理数据];
    Check -->|失败| Error[记录错误];
    Process --> Save[保存结果];
    Error --> Retry{重试?};
    Retry -->|是| Init;
    Retry -->|否| End(结束);
    Save --> End;

节点形状

markdown

```mermaid
graph TD;
    A[方形节点] --> B(圆角节点);
    B --> C([圆形节点]);
    C --> D[(圆柱体)];
    D --> E{{子程序}};


**效果：**

```mermaid
graph TD;
    A[方形节点] --> B(圆角节点);
    B --> C([圆形节点]);
    C --> D[(圆柱体)];
    D --> E{{子程序}};

时序图

基本时序图

markdown

```mermaid
sequenceDiagram;
    participant A as 用户
    participant B as 系统
    A->>B: 发送请求
    B-->>A: 返回响应


**效果：**

```mermaid
sequenceDiagram;
    participant A as 用户
    participant B as 系统
    A->>B: 发送请求
    B-->>A: 返回响应

完整的登录流程

markdown

```mermaid
sequenceDiagram;
    participant User as 用户
    participant Frontend as 前端
    participant Backend as 后端
    participant DB as 数据库

    User->>Frontend: 输入用户名密码
    Frontend->>Backend: 发送登录请求
    Backend->>DB: 查询用户信息
    DB-->>Backend: 返回用户数据
    Backend-->>Frontend: 返回认证令牌
    Frontend-->>User: 登录成功


**效果：**

```mermaid
sequenceDiagram;
    participant User as 用户
    participant Frontend as 前端
    participant Backend as 后端
    participant DB as 数据库

    User->>Frontend: 输入用户名密码
    Frontend->>Backend: 发送登录请求
    Backend->>DB: 查询用户信息
    DB-->>Backend: 返回用户数据
    Backend-->>Frontend: 返回认证令牌
    Frontend-->>User: 登录成功

自激活和循环

markdown

```mermaid
sequenceDiagram;
    participant A as 客户端
    participant B as 服务器

    A->>B: 请求数据
    activate B
    B->>B: 处理请求
    loop 重试3次
        B->>B: 尝试获取
    end
    B-->>A: 返回结果
    deactivate B


**效果：**

```mermaid
sequenceDiagram;
    participant A as 客户端
    participant B as 服务器

    A->>B: 请求数据
    activate B
    B->>B: 处理请求
    loop 重试3次
        B->>B: 尝试获取
    end
    B-->>A: 返回结果
    deactivate B

甘特图

基本甘特图

markdown

```mermaid
gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计
    需求分析      :2024-01-01, 5d
    系统设计      :after 需求分析, 7d
    section 开发
    前端开发      :2024-01-13, 10d
    后端开发      :2024-01-13, 12d
    section 测试
    功能测试      :2024-01-25, 5d
    部署上线      :2024-01-30, 2d


**效果：**

```mermaid
gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计
    需求分析      :2024-01-01, 5d
    系统设计      :after 需求分析, 7d
    section 开发
    前端开发      :2024-01-13, 10d
    后端开发      :2024-01-13, 12d
    section 测试
    功能测试      :2024-01-25, 5d
    部署上线      :2024-01-30, 2d

完整的项目管理

markdown

```mermaid
gantt
    title 软件开发项目
    dateFormat  YYYY-MM-DD
    axisFormat  %m-%d

    section 规划
    项目启动      :p1, 2024-01-01, 2d
    需求收集      :p2, after p1, 5d
    需求评审      :p3, after p2, 1d

    section 设计
    架构设计      :d1, after p3, 4d
    数据库设计    :d2, after d1, 3d
    UI 设计       :d3, after d1, 5d

    section 开发
    后端开发      :dev1, after d2, 15d
    前端开发      :dev2, after d3, 12d
    API 对接      :dev3, after dev1 dev2, 3d

    section 测试
    单元测试      :t1, after dev1, 3d
    集成测试      :t2, after dev3, 4d
    用户测试      :t3, after t2, 5d

    section 部署
    预发布部署    :dp1, after t3, 2d
    正式上线      :dp2, after dp1, 1d


**效果：**

```mermaid
gantt
    title 软件开发项目
    dateFormat  YYYY-MM-DD
    axisFormat  %m-%d

    section 规划
    项目启动      :p1, 2024-01-01, 2d
    需求收集      :p2, after p1, 5d
    需求评审      :p3, after p2, 1d

    section 设计
    架构设计      :d1, after p3, 4d
    数据库设计    :d2, after d1, 3d
    UI 设计       :d3, after d1, 5d

    section 开发
    后端开发      :dev1, after d2, 15d
    前端开发      :dev2, after d3, 12d
    API 对接      :dev3, after dev1 dev2, 3d

    section 测试
    单元测试      :t1, after dev1, 3d
    集成测试      :t2, after dev3, 4d
    用户测试      :t3, after t2, 5d

    section 部署
    预发布部署    :dp1, after t3, 2d
    正式上线      :dp2, after dp1, 1d

状态图

基本状态图

markdown

```mermaid
stateDiagram-v2
    [*] --> 待处理
    待处理 --> 处理中
    处理中 --> 已完成
    处理中 --> 已取消
    已完成 --> [*]
    已取消 --> [*]


**效果：**

```mermaid
stateDiagram-v2
    [*] --> 待处理
    待处理 --> 处理中
    处理中 --> 已完成
    处理中 --> 已取消
    已完成 --> [*]
    已取消 --> [*]

复杂状态图

markdown

```mermaid
stateDiagram-v2
    [*] --> 离线
    离线 --> 登录中
    登录中 --> 在线
    登录中 --> 离线 : 登录失败
    在线 --> 忙碌
    在线 --> 离线
    在线 --> 隐身
    忙碌 --> 在线
    忙碌 --> 离线
    隐身 --> 在线


**效果：**

```mermaid
stateDiagram-v2
    [*] --> 离线
    离线 --> 登录中
    登录中 --> 在线
    登录中 --> 离线 : 登录失败
    在线 --> 忙碌
    在线 --> 离线
    在线 --> 隐身
    忙碌 --> 在线
    忙碌 --> 离线
    隐身 --> 在线

类图

基本类图

markdown

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


**效果：**

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

完整的类图

markdown

```mermaid
classDiagram
    class User {
        -String username
        -String password
        -String email
        +login()
        +logout()
        +updateProfile()
    }
    class Admin {
        +addUser()
        +deleteUser()
        +viewLogs()
    }
    class Post {
        -String title
        -String content
        -DateTime createTime
        +publish()
        +edit()
        +delete()
    }
    class Comment {
        -String content
        -DateTime createTime
        +addComment()
        +deleteComment()
    }
    
    User <|-- Admin
    User "1" --> "*" Post : creates
    Post "1" --> "*" Comment : has


**效果：**

```mermaid
classDiagram
    class User {
        -String username
        -String password
        -String email
        +login()
        +logout()
        +updateProfile()
    }
    class Admin {
        +addUser()
        +deleteUser()
        +viewLogs()
    }
    class Post {
        -String title
        -String content
        -DateTime createTime
        +publish()
        +edit()
        +delete()
    }
    class Comment {
        -String content
        -DateTime createTime
        +addComment()
        +deleteComment()
    }
    
    User <|-- Admin
    User "1" --> "*" Post : creates
    Post "1" --> "*" Comment : has

实体关系图

基本ER图

markdown

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses


**效果：**

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

数据库设计

markdown

```mermaid
erDiagram
    USER {
        int id PK
        string username
        string email
        datetime created_at
    }
    POST {
        int id PK
        int user_id FK
        string title
        text content
        datetime created_at
    }
    COMMENT {
        int id PK
        int post_id FK
        int user_id FK
        text content
        datetime created_at
    }
    
    USER ||--o{ POST : creates
    USER ||--o{ COMMENT : writes
    POST ||--o{ COMMENT : has


**效果：**

```mermaid
erDiagram
    USER {
        int id PK
        string username
        string email
        datetime created_at
    }
    POST {
        int id PK
        int user_id FK
        string title
        text content
        datetime created_at
    }
    COMMENT {
        int id PK
        int post_id FK
        int user_id FK
        text content
        datetime created_at
    }
    
    USER ||--o{ POST : creates
    USER ||--o{ COMMENT : writes
    POST ||--o{ COMMENT : has

饼图

markdown

```mermaid
pie
    title 编程语言使用分布
    "JavaScript" : 35
    "Python" : 25
    "Java" : 20
    "C++" : 12
    "其他" : 8


**效果：**

```mermaid
pie
    title 编程语言使用分布
    "JavaScript" : 35
    "Python" : 25
    "Java" : 20
    "C++" : 12
    "其他" : 8

思维导图

markdown

```mermaid
mindmap
  root((Markdown))
    基础语法
      标题
      列表
      引用
    格式化
      粗体
      斜体
      代码
    高级功能
      表格
      链接
      图片
    扩展
      数学公式
      图表
      脚注


**效果：**

```mermaid
mindmap
  root((Markdown))
    基础语法
      标题
      列表
      引用
    格式化
      粗体
      斜体
      代码
    高级功能
      表格
      链接
      图片
    扩展
      数学公式
      图表
      脚注

其他图表工具

PlantUML

PlantUML 是另一个流行的图表工具：

markdown

```plantuml
@startuml
actor 用户
participant "前端系统" as Front
participant "后端系统" as Back
database "数据库" as DB

用户 -> Front: 登录
Front -> Back: 验证
Back -> DB: 查询
DB --> Back: 返回数据
Back --> Front: 登录成功
Front --> 用户: 显示主页
@enduml


### Graphviz (DOT)

```markdown
```dot
digraph G {
    A -> B;
    B -> C;
    C -> D;
    D -> A;
}


## 图表最佳实践

### 1. 保持简洁

```markdown
✅ 简洁清晰
```mermaid
graph LR;
    A-->B;

❌ 过于复杂

mermaid

graph LR;
    A-->B;
    B-->C;
    C-->D;
    ...


### 2. 添加标题

```markdown
```mermaid
gantt
    title 项目进度表
    ...


### 3. 使用有意义的标签

```markdown
✅ 清晰的标签
A[开始] --> B{判断}

❌ 模糊的标签
A[步骤1] --> B[步骤2]

4. 保持一致性

在文档中使用一致的图表风格。

不同平台的图表支持

GitHub

完整支持 Mermaid
自动渲染图表
支持大部分图表类型

GitLab

完整支持 Mermaid
支持更多功能
可以使用 PlantUML

Typora

支持实时预览
支持导出
支持自定义主题

Obsidian

原生支持 Mermaid
支持嵌入笔记
支持图表链接

Notion

不直接支持
可以使用 Embed 嵌入
或使用截图

实战示例

技术文档

markdown

## 系统架构

```mermaid
graph TD;
    User[用户] --> Web[Web端];
    User --> Mobile[移动端];
    Web --> API[API网关];
    Mobile --> API;
    API --> Auth[认证服务];
    API --> Business[业务服务];
    Business --> DB[(数据库)];
    Business --> Cache[缓存];


### API 文档

```markdown
## 用户注册流程

```mermaid
sequenceDiagram;
    participant U as 用户
    participant F as 前端
    participant A as API
    participant D as 数据库

    U->>F: 提交注册表单
    F->>A: POST /api/register
    A->>D: 检查用户是否存在
    D-->>A: 返回结果
    alt 用户不存在
        A->>D: 创建用户
        D-->>A: 创建成功
        A-->>F: 返回令牌
        F-->>U: 注册成功
    else 用户已存在
        A-->>F: 返回错误
        F-->>U: 提示用户名已存在
    end


### 项目计划

```markdown
## 开发计划

```mermaid
gantt
    title Q1 开发计划
    dateFormat  YYYY-MM-DD
    section 第一个月
    需求分析      :2024-01-01, 5d
    系统设计      :2024-01-06, 7d
    section 第二个月
    前端开发      :2024-01-13, 15d
    后端开发      :2024-01-13, 18d
    section 第三个月
    联调测试      :2024-01-31, 10d
    上线部署      :2024-02-10, 3d


## 常见问题

### Q: 图表不显示？

A: 检查以下几点：
- 平台是否支持 Mermaid
- 语法是否正确
- 是否使用了正确的标识符 `mermaid`

### Q: 如何导出图表？

A: 
- 使用截图工具
- 在线编辑器导出
- 使用 Mermaid CLI

### Q: 如何创建复杂图表？

A: 
- 分解为多个简单图表
- 使用子图功能
- 参考官方文档

### Q: 图表太大怎么办？

A: 
- 简化图表内容
- 分为多个图表
- 调整布局方向

## 小结

本章详细介绍了 Markdown 中图表绘制的方法：

- **Mermaid 工具**：基于文本的图表绘制工具
- **流程图**：描述流程和逻辑
- **时序图**：展示交互过程
- **甘特图**：项目进度管理
- **状态图**：状态转换关系
- **类图**：面向对象设计
- **其他图表**：ER图、饼图、思维导图
- **最佳实践**：保持简洁、添加标题、使用有意义的标签

掌握图表绘制功能，可以让你的文档更加直观和易懂。

**下一步：** 查看 [Markdown 学习资源](./resources) 继续深入学习。

Markdown 图表绘制 ​

Mermaid 简介 ​

基本语法 ​

从左到右的流程图 ​

复杂流程图 ​

节点形状 ​

时序图 ​

基本时序图 ​

完整的登录流程 ​

自激活和循环 ​

甘特图 ​

基本甘特图 ​

完整的项目管理 ​

状态图 ​

基本状态图 ​

复杂状态图 ​

类图 ​

基本类图 ​

完整的类图 ​

实体关系图 ​

基本ER图 ​

数据库设计 ​

饼图 ​

思维导图 ​

其他图表工具 ​

PlantUML ​

4. 保持一致性 ​

不同平台的图表支持 ​

GitHub ​

GitLab ​

Typora ​

Obsidian ​

Notion ​

实战示例 ​

技术文档 ​

Markdown 图表绘制

Mermaid 简介

基本语法

从左到右的流程图

复杂流程图

节点形状

时序图

基本时序图

完整的登录流程

自激活和循环

甘特图

基本甘特图

完整的项目管理

状态图

基本状态图

复杂状态图

类图

基本类图

完整的类图

实体关系图

基本ER图

数据库设计

饼图

思维导图

其他图表工具

PlantUML

4. 保持一致性

不同平台的图表支持

GitHub

GitLab

Typora

Obsidian

Notion

实战示例

技术文档