# Markdown 中 UML 图使用指南

概述

在 Markdown 中绘制 UML 图主要有以下几种方式：

Mermaid - GitHub、GitLab、Notion 等平台广泛支持，语法简洁
PlantUML - 功能强大，支持更多 UML 类型
Graphviz - 适合复杂的关系图
ASCII Art - 简单场景可用

1. Mermaid 图表（推荐）

Mermaid 是目前最流行的 Markdown UML 图表工具，GitHub、GitLab、VS Code 等都原生支持。

基本语法

markdown

\`\`\`mermaid
图表代码
\`\`\`

1.1 流程图 (Flowchart)

代码：

markdown

\`\`\`mermaid
flowchart TD
A[开始] --> B{判断条件}
B -->|是| C[执行操作 1]
B -->|否| D[执行操作 2]
C --> E[结束]
D --> E
\`\`\`

常用符号：

[ ] - 矩形（流程步骤）
{ } - 菱形（判断）
( ) - 圆角矩形（可选）
(( )) - 圆形（开始/结束）
--> - 箭头连接
-->|标签| - 带标签的连接

1.2 时序图 (Sequence Diagram)

代码：

markdown

\`\`\`mermaid
sequenceDiagram
participant 用户
participant 前端
participant 后端
participant 数据库

    用户->>前端: 登录请求
    前端->>后端: POST /api/login
    后端->>数据库: 查询用户信息
    数据库-->>后端: 返回用户数据
    后端->>后端: 验证密码
    后端-->>前端: 返回Token
    前端-->>用户: 显示登录成功

\`\`\`

箭头类型：

->> - 实线箭头（请求）
-->> - 虚线箭头（响应）
->x - 带 X 的箭头（取消/错误）
--x - 虚线带 X 箭头

1.3 类图 (Class Diagram)

代码：

markdown

\`\`\`mermaid
classDiagram
class User {
-String username
-String email
-String password
+login()
+logout()
+updateProfile()
}

    class Order {
        -int orderId
        -Date createTime
        -double totalPrice
        +create()
        +cancel()
        +pay()
    }

    User "1" --> "*" Order : 创建
    Order "*" --> "1" Product : 包含

\`\`\`

关系类型：

--> - 关联
--|> - 继承
..> - 依赖
* - 多
1 - 一

1.4 状态图 (State Diagram)

代码：

markdown

\`\`\`mermaid
stateDiagram-v2
[*] --> 待支付
待支付 --> 已支付: 支付成功
待支付 --> 已取消: 取消订单
已支付 --> 已发货: 商家发货
已发货 --> 已收货: 用户确认收货
已收货 --> 已完成: [30 天后]
已取消 --> [*]
已完成 --> [*]
\`\`\`

1.5 实体关系图 (ER Diagram)

代码：

markdown

\`\`\`mermaid
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ ORDER_ITEM : contains
PRODUCT ||--o{ ORDER_ITEM : "ordered in"

    USER {
        int user_id PK
        string username
        string email
    }

    ORDER {
        int order_id PK
        int user_id FK
        datetime create_time
    }

\`\`\`

关系表示法：

||--o{ - 一对多
}o--|| - 多对一
||--|| - 一对一
}o--o{ - 多对多

1.6 Gantt 图（甘特图）

1.7 思维导图 (Mindmap)

1.8 饼图 (Pie Chart)

1.9 Git 图 (Git Graph)

2. PlantUML

PlantUML 功能更强大，但需要在线渲染或本地安装。部分平台支持。

2.1 类图

markdown

\`\`\`plantuml
@startuml
class User { - username : String - email : String + login() + logout()
}

class Order { - orderId : int - totalPrice : double + create() + cancel()
}

User "1" --> "\*" Order
@enduml
\`\`\`

2.2 时序图

markdown

\`\`\`plantuml
@startuml
用户 -> 前端 : 登录请求
前端 -> 后端 : POST /api/login
后端 -> 数据库 : 查询用户
数据库 --> 后端 : 返回数据
后端 --> 前端 : 返回 Token
前端 --> 用户 : 登录成功
@enduml
\`\`\`

3. 图表样式美化

3.1 添加颜色

3.2 添加链接

3.3 主题配置

支持的主题：default, neutral, dark, forest, base

4. 最佳实践

4.1 命名规范

建议：

使用清晰的中文或英文命名
保持命名一致性
避免过长的节点名称

4.2 布局优化

4.3 复杂图拆分

对于复杂的大型图表，建议拆分成多个子图，然后在文档中分别展示，并在最后提供一个概览图。

5. 🎨 可视化工具（避免手敲代码）

5.1 Mermaid Live Editor（强烈推荐！）

网址： https://mermaid.live/

特点：

✅ 可视化编辑：左侧写代码，右侧实时预览
✅ 拖拽式编辑：支持图形化操作（部分功能）
✅ 一键导出：PNG、SVG、代码
✅ 语法提示：自动补全和错误检查
✅ 模板库：内置大量模板

使用流程：

1. 打开 mermaid.live
2. 选择模板或从空白开始
3. 在左侧编辑区编写代码（或使用图形界面）
4. 右侧实时预览效果
5. 满意后点击 "Actions" -> "Copy Markdown"
6. 直接粘贴到你的 Markdown 文件中

5.2 Draw.io（现名 diagrams.net）

网址： https://app.diagrams.net/ 或 https://draw.io

特点：

✅ 完全可视化：拖拽式操作，不需要写代码
✅ 支持 Mermaid 导出：可以导出为 Mermaid 代码
✅ 丰富的图形库：UML、流程图、架构图等
✅ 免费开源：完全免费使用

使用流程：

5.3 VS Code 插件（智能辅助）

Markdown Preview Mermaid Support

安装：

bash

# 在 VS Code 扩展市场搜索安装
Markdown Preview Mermaid Support

功能：

✅ 实时预览 Mermaid 图表
✅ 语法高亮
✅ 错误提示
✅ 代码补全

Mermaid Preview

功能：

✅ 侧边栏预览
✅ 实时渲染
✅ 导出功能

5.4 AI 辅助生成（超简单！）

推荐方法：

方法一：ChatGPT / Claude

提示词示例：

帮我生成一个 Mermaid 流程图，描述用户登录的流程：
1. 用户输入账号密码
2. 验证账号密码
3. 如果正确，返回登录成功
4. 如果错误，返回错误信息

请直接输出 Mermaid 代码。

优点：

🚀 描述需求即可，无需写代码
🚀 可以反复调整
🚀 支持复杂场景

方法二：GitHub Copilot

使用方式：

在 Markdown 文件中输入：
```mermaid
// 然后描述你的需求，Copilot 会自动补全代码

5.5 在线 Mermaid 模板库

推荐网站：

Mermaid Examples - 官方示例
Mermaid Chart Gallery - 图表库
Awesome Mermaid - 社区资源

使用方式：

1. 找到相似的模板
2. 复制代码到 Mermaid Live Editor
3. 修改参数和文本
4. 导出使用

5.6 图形化 Mermaid 编辑器

Mermaid Chart

网址： https://www.mermaidchart.com/

特点：

✅ 完全可视化编辑
✅ 团队协作
✅ 版本控制
✅ 免费版可用

Textografo

网址： https://textografo.com/

特点：

✅ 文本描述生成图表
✅ 支持多种图表类型
✅ 可导出 Mermaid

5.7 简化方案对比

工具	易用性	功能	是否需要手敲	推荐场景
Mermaid Live Editor	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	少量手敲	快速创建，实时预览
Draw.io	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	❌ 不需要	复杂图表，完全可视化
AI 辅助（ChatGPT）	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	❌ 描述即可	不知道如何开始
VS Code 插件	⭐⭐⭐⭐	⭐⭐⭐	少量手敲	在 VS Code 中写作
Mermaid Chart	⭐⭐⭐⭐	⭐⭐⭐⭐	❌ 可视化	团队协作

5.8 🎯 推荐工作流

最简单的工作流（推荐新手）

专业工作流（推荐熟练用户）

5.9 💡 实用技巧

技巧 1：使用 AI 批量生成

markdown

一次性让 AI 生成多个图表模板，保存为代码片段：

- 登录流程图模板
- 注册流程图模板
- API 调用时序图模板
- 状态转换图模板

技巧 2：建立自己的模板库

markdown

创建 templates/ 文件夹，保存常用模板：
templates/
├── flowchart-basic.md
├── sequence-api.md
├── state-order.md
└── er-diagram.md

技巧 3：组合使用工具

Draw.io 画复杂图 -> 导出 PNG
简单图 -> AI 生成 Mermaid 代码
实时编辑 -> Mermaid Live Editor
文档中预览 -> VS Code 插件

6. 工具推荐

在线编辑器

Mermaid Live Editor - 实时预览 Mermaid 图表
PlantUML Online - PlantUML 在线编辑器
Draw.io - 完全可视化的图表工具

VS Code 插件

Markdown Preview Mermaid Support - 支持 Mermaid 预览
PlantUML - 支持 PlantUML 渲染

其他工具

Typora - Markdown 编辑器，原生支持 Mermaid
Obsidian - 笔记工具，支持多种图表

7. 在文档中使用示例

示例：Redis 数据类型流程图

示例：Redis 架构时序图

8. 常见问题

Q1: GitHub 不支持某些 Mermaid 图表类型？

A: GitHub 的 Mermaid 支持有限，建议使用流程图、时序图、甘特图等常用类型。

Q2: 如何在本地预览 Mermaid 图表？

A: 使用 VS Code 的 Markdown Preview Mermaid Support 插件，或使用 Typora、Obsidian 等编辑器。

Q3: 图表太大显示不全？

A: 可以拆分成多个子图，或使用 subgraph 分组。

Q4: 如何导出为图片？

A: 使用 Mermaid Live Editor 可以导出 PNG/SVG，或使用 mermaid-cli 命令行工具。

9. 总结

推荐使用 Mermaid：语法简洁，平台支持广泛
流程图适合展示业务流程
时序图适合展示系统交互
类图适合展示系统架构
状态图适合展示状态转换
合理使用颜色和样式：提升可读性
复杂图拆分成子图：便于理解和维护

选择合适的图表类型，可以让你的技术文档更加清晰易懂！

10. 🚀 快速参考：不想手敲代码？看这里！

⚡ 最快的方法（3 步搞定）

推荐 AI 工具：

ChatGPT
Claude
GitHub Copilot
Cursor AI（你现在用的就是这个！）

📝 完全可视化工具（零代码）

Draw.io - https://app.diagrams.net/

拖拽式操作，不需要写代码
可以导出为 PNG/SVG 图片插入 Markdown

Mermaid Chart - https://www.mermaidchart.com/

可视化编辑 Mermaid 图表
直接导出 Mermaid 代码

🎨 实时预览编辑（少量手敲）

Mermaid Live Editor - https://mermaid.live/

左侧写代码，右侧实时预览
内置模板和示例
一键复制 Markdown 代码

💡 最佳实践建议

场景	推荐工具	是否需要手敲
不知道如何开始	AI 助手（ChatGPT 等）	❌ 描述即可
简单流程图	Mermaid Live Editor	⚠️ 少量手敲
复杂架构图	Draw.io	❌ 完全可视化
快速原型	AI 生成 + Live Editor 预览	❌ 几乎不需要
团队协作	Mermaid Chart	❌ 可视化编辑

🎯 一句话总结

不想手敲？

✅ 简单图 → 让 AI 生成代码
✅ 复杂图 → 用 Draw.io 可视化绘制
✅ 实时调整 → Mermaid Live Editor 预览
✅ 工作中 → VS Code 插件实时预览

完全不需要手敲代码！ 🎉

开发与调试

测试能力

运维与监控

NoSQL

中间件

存储

接入层

操作系统

框架

硬件知识

缓存

品质

经验底蕴

能力

任务拆分

文档能力

协议设计

基本理论

接入层架构

数据层架构

通讯机制

逻辑层架构

# Markdown 中 UML 图使用指南 ​

概述 ​

1. Mermaid 图表（推荐） ​

基本语法 ​

1.1 流程图 (Flowchart) ​

1.2 时序图 (Sequence Diagram) ​

1.3 类图 (Class Diagram) ​

1.4 状态图 (State Diagram) ​

1.5 实体关系图 (ER Diagram) ​

1.6 Gantt 图（甘特图） ​

1.7 思维导图 (Mindmap) ​

1.8 饼图 (Pie Chart) ​

1.9 Git 图 (Git Graph) ​

2. PlantUML ​

2.1 类图 ​

2.2 时序图 ​

3. 图表样式美化 ​

3.1 添加颜色 ​

3.2 添加链接 ​

3.3 主题配置 ​

4. 最佳实践 ​

4.1 命名规范 ​

4.2 布局优化 ​

4.3 复杂图拆分 ​

5. 🎨 可视化工具（避免手敲代码） ​

5.1 Mermaid Live Editor（强烈推荐！） ​

5.2 Draw.io（现名 diagrams.net） ​

5.3 VS Code 插件（智能辅助） ​

Markdown Preview Mermaid Support ​

Mermaid Preview ​

5.4 AI 辅助生成（超简单！） ​

方法一：ChatGPT / Claude ​

方法二：GitHub Copilot ​

5.5 在线 Mermaid 模板库 ​

5.6 图形化 Mermaid 编辑器 ​

Mermaid Chart ​

Textografo ​

5.7 简化方案对比 ​

5.8 🎯 推荐工作流 ​

最简单的工作流（推荐新手） ​

专业工作流（推荐熟练用户） ​

5.9 💡 实用技巧 ​

技巧 1：使用 AI 批量生成 ​

技巧 2：建立自己的模板库 ​

技巧 3：组合使用工具 ​

6. 工具推荐 ​

在线编辑器 ​

VS Code 插件 ​

其他工具 ​

7. 在文档中使用示例 ​

示例：Redis 数据类型流程图 ​

示例：Redis 架构时序图 ​

8. 常见问题 ​

Q1: GitHub 不支持某些 Mermaid 图表类型？ ​

Q2: 如何在本地预览 Mermaid 图表？ ​

Q3: 图表太大显示不全？ ​

Q4: 如何导出为图片？ ​

9. 总结 ​

# Markdown 中 UML 图使用指南

概述

1. Mermaid 图表（推荐）

基本语法

1.1 流程图 (Flowchart)

1.2 时序图 (Sequence Diagram)

1.3 类图 (Class Diagram)

1.4 状态图 (State Diagram)

1.5 实体关系图 (ER Diagram)

1.6 Gantt 图（甘特图）

1.7 思维导图 (Mindmap)

1.8 饼图 (Pie Chart)

1.9 Git 图 (Git Graph)

2. PlantUML

2.1 类图

2.2 时序图

3. 图表样式美化

3.1 添加颜色

3.2 添加链接

3.3 主题配置

4. 最佳实践

4.1 命名规范

4.2 布局优化

4.3 复杂图拆分

5. 🎨 可视化工具（避免手敲代码）

5.1 Mermaid Live Editor（强烈推荐！）

5.2 Draw.io（现名 diagrams.net）

5.3 VS Code 插件（智能辅助）

Markdown Preview Mermaid Support

Mermaid Preview

5.4 AI 辅助生成（超简单！）

方法一：ChatGPT / Claude

方法二：GitHub Copilot

5.5 在线 Mermaid 模板库

5.6 图形化 Mermaid 编辑器

Mermaid Chart

Textografo

5.7 简化方案对比

5.8 🎯 推荐工作流

最简单的工作流（推荐新手）

专业工作流（推荐熟练用户）

5.9 💡 实用技巧

技巧 1：使用 AI 批量生成

技巧 2：建立自己的模板库

技巧 3：组合使用工具

6. 工具推荐

在线编辑器

VS Code 插件

其他工具

7. 在文档中使用示例

示例：Redis 数据类型流程图

示例：Redis 架构时序图

8. 常见问题

Q1: GitHub 不支持某些 Mermaid 图表类型？

Q2: 如何在本地预览 Mermaid 图表？

Q3: 图表太大显示不全？

Q4: 如何导出为图片？

9. 总结

10. 🚀 快速参考：不想手敲代码？看这里！

⚡ 最快的方法（3 步搞定）

📝 完全可视化工具（零代码）

🎨 实时预览编辑（少量手敲）

💡 最佳实践建议

🎯 一句话总结