Typora画图（Mermaid语法）
·
以下是 Mermaid 支持的所有图表类型的极简示例（含 graph），并附使用场景说明和最小案例：
1. 基础关系图 (graph)
场景：展示节点间简单关系（如网络拓扑、依赖关系）。
最小示例：
语法说明：
LR：从左到右布局-->：有向箭头style：自定义颜色
2. 流程图 (flowchart)
场景：描述步骤和分支逻辑（如算法、业务流程）。
最小示例：
语法说明：
()：圆角（开始/结束）{}：菱形（判断）
3. 时序图 (sequenceDiagram)
场景：对象间交互顺序（如API调用）。
最小示例：
语法说明：
->>：实线（同步）-->>：虚线（异步）
4. 类图 (classDiagram)
场景：面向对象类结构（如UML设计）。
最小示例：
语法说明：
<|--：继承关系
5. 状态图 (stateDiagram)
场景：状态机转换（如订单状态流转）。
最小示例：
语法说明：
[*]：初始/终止状态
6. ER图 (erDiagram)
场景：数据库实体关系设计。
最小示例：
语法说明：
||--o{：一对多关系
7. 用户旅程图 (journey)
场景：用户体验流程分析。
最小示例：
语法说明：
:5: User：用户耗时5秒
8. 甘特图 (gantt)
场景：项目管理时间规划。
最小示例：
语法说明：
after a1：依赖前一任务
9. 饼图 (pie)
场景：数据占比可视化。
最小示例：
语法说明：
- 数值自动计算百分比
总结对比表
| 类型 | 关键字 | 典型场景 | 核心语法元素 |
|---|---|---|---|
| 关系图 | graph | 网络拓扑 | LR, -->, style |
| 流程图 | flowchart | 算法流程 | {}, ` |
| 时序图 | sequenceDiagram | API交互 | ->>, participant |
| 类图 | classDiagram | UML设计 | class, `< |
| 状态图 | stateDiagram | 状态机 | [*], --> |
| ER图 | erDiagram | 数据库设计 | ` |
| 用户旅程图 | journey | 用户体验分析 | section, :5: |
| 甘特图 | gantt | 项目管理 | section, after |
| 饼图 | pie | 数据占比 | "标签" : 数值 |
所有示例均为该类型最小可运行代码，直接复制到支持 Mermaid 的 Markdown 工具即可渲染。
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
27
0- 0
已为社区贡献1条内容
所有评论(0)