网站设计论文摘要知乎 网站开发工具
Mermaid 是一种使用 Markdown 风格 语法来绘制流程图、时序图、甘特图等可视化图表的工具。它适用于技术文档、Wiki、开发文档等场景。
1. 安装与使用
1.1 在线使用
- 直接访问 Mermaid Live Editor。
- 在 GitHub、Notion、Typora 等支持 Mermaid 的平台上直接书写。
1.2 本地安装
如果要在本地 Markdown 工具或 Web 项目中使用 Mermaid，可以安装它的 npm 包：
npm install -g @mermaid-js/mermaid-cli # 安装 Mermaid CLI
在 HTML 文件中使用：
<script type="module">import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';mermaid.initialize({ startOnLoad: true });
</script>
在 Node.js 环境下使用 CLI 生成 SVG：
mmdc -i input.mmd -o output.svg
2. 基础语法
2.1 流程图（Flowchart）
示例：
语法解析：
flowchart TD：从上到下绘制（LR为从左到右）。A[文本]：矩形框，表示开始或结束。B{条件}：菱形，表示判断条件。A --> B：箭头，表示流程。B -->|是| C：带标签的分支。C --> D：流程的连接。
2.1.1 额外形状
| 形状 | 语法 |
|---|---|
| 圆角矩形 | A((文本)) |
| 平行四边形（输入/输出） | B[/文本/] |
| 菱形（判断） | C{条件} |
2.2 时序图（Sequence Diagram）
示例：
语法解析：
participant定义参与者。A->>B:表示 A 发送消息给 B。B-->>A:表示 B 回复 A。Note right of B: 这是一条注释为右侧注释。
2.3 甘特图（Gantt Chart）
示例：
语法解析：
title：甘特图标题。section：定义阶段。任务名称 : 状态, 开始时间, 持续天数done：已完成，active：进行中。
2.4 类图（Class Diagram）
示例：
语法解析：
classDiagram定义类图。class 类名 {}定义类和属性、方法。<|--表示继承关系。+号表示公有属性/方法。
3. 进阶用法
3.1 状态图（State Diagram）
示例：
语法解析：
[ * ]代表起点和终点。-->定义状态转换。
3.2 饼图（Pie Chart）
示例：
语法解析：
title设置标题。- 每个数据项格式为：
"名称" : 数值。
3.3 实体关系图（ER Diagram）
示例：
语法解析：
||--o{表示一对多关系。||--|{表示多对多关系。类 {}内部可以定义字段。
4. 总结
| 图表类型 | 关键字 | 作用 |
|---|---|---|
| 流程图 | flowchart | 展示流程逻辑 |
| 时序图 | sequenceDiagram | 显示消息交互顺序 |
| 甘特图 | gantt | 项目进度管理 |
| 类图 | classDiagram | 设计类结构 |
| 状态图 | stateDiagram | 展示状态转换 |
| 饼图 | pie | 显示占比 |
| ER 图 | erDiagram | 数据库设计 |
Mermaid 提供了一种直观、简单的方式来绘制图表，使技术文档更加清晰直观！🎯