Mermaid的常见用法
以下是 Mermaid.js 常见图表语法的详细整理，涵盖 10 种常用图表类型，附语法说明和示例代码，适合快速查阅和实战使用。
一、流程图 (Flowchart)
用途：展示流程、逻辑步骤或算法。
语法：
• graph TD/BT/LR/RL：定义方向（从上到下、从下到上、从左到右、从右到左）。
• 节点：A[文本]（方框）、A(圆角)、A((圆形))、A>右括号]。
• 连线：-->（普通箭头），--text-->（带文字箭头），-->|条件|（条件分支）。
示例：
二、时序图 (Sequence Diagram)
用途：描述对象间的交互顺序和时间流。
语法：
• participant 或 actor 定义参与者。
• 消息：A->>B: 消息（同步）、A-->>B: 异步。
• 循环/条件：loop, alt, optional。
示例：
三、类图 (Class Diagram)
用途：展示类、属性、方法及类之间的关系。
语法：
• 类：class 类名 { 属性 方法 }。
• 关系：--|继承|, o-- 组合, *-- 聚合, --> 关联。
示例：
四、状态图 (State Diagram)
用途：描述对象的状态转换逻辑。
语法：
• stateDiagram-v2 定义状态机。
• 状态：[*] --> 状态名，状态名 --> 状态名2: 事件。
示例：
五、甘特图 (Gantt Chart)
用途：项目管理中的时间线规划。
语法：
• dateFormat：定义日期格式。
• section：分段标题。
• 任务：任务名 :active, 日期, 持续时间。
示例：
六、饼图 (Pie Chart)
用途：展示数据占比。
语法：
• pie 开头，每行定义标签和数值。
示例：
七、用户旅程图 (User Journey Map)
用途：描述用户在特定场景中的体验流程。
语法：
• journey 开头，定义标题和阶段。
• 三列：阶段名称、用户行为、用户满意度。
示例：
八、实体关系图 (ER Diagram)
用途：展示数据库表之间的关系。
语法：
• erDiagram 开头，定义实体和字段。
• 关系：1:n, m:n, 1:1。
示例：
九、散点图 (Scatter Plot)
用途：展示数据分布或趋势。
语法：
• scatter 开头，每行定义 x/y 值和标签。
示例：
scattertitle 用户评分分布x-axis 评分y-axis 数量4.5, 120: ★★★★★4.0, 200: ★★★★3.5, 80: ★★★
十、类图扩展 (Git Graph)
用途：展示 Git 分支与提交历史。
语法：
• graph TD 定义方向。
• commit 标记提交节点，branch 定义分支。
示例：
其他实用技巧
1. 子图 (Subgraph)：
2. 自定义样式：
classDef highlight fill:#f9f,stroke:#333;
classDef red fill:#ff9999,stroke:#b32424;
A[普通节点]:::red --> B[高亮节点]:::highlight
3. 箭头修饰符：
• --（虚线）：A-- 文本 -->B
• -.->（带箭头虚线）：A-.->B
总结
Mermaid 的核心优势在于 纯文本语法，可直接嵌入 Markdown 或文档中，支持实时预览。更多高级语法可参考 官方文档。建议通过在线编辑器（如 Mermaid Live Editor）快速验证代码效果。
实例参考
1. 医疗诊断流程
场景：医院初步分诊流程
graph TDA([患者到达]) --> B{挂号类型?}B -- 急诊 --> C[急诊科处理]B -- 普通门诊 --> D{症状检查}D -- 发热 --> E[体温测量]D -- 腹痛 --> F[腹部触诊]E --> G{体温>38℃?}G -- 是 --> H[安排核酸+血常规]G -- 否 --> I[普通门诊就诊]F --> J[开具B超/CT检查]
解析：
• 分支判断：根据症状和检查结果分流患者。
• 标准化：确保急诊优先，减少交叉感染风险。
2. 法律诉讼流程
场景：民事诉讼案件处理步骤
解析：
• 法律程序：明确诉讼各环节的顺序和可能性。
• 非诉路径：优先尝试调解，节省司法资源。
3. 在线课程开发流程
场景：教育机构制作网课
解析：
• 条件分支：根据课程形式选择不同制作路径。
• 合并节点：无论录播或直播，最终统一上传。
4. 内容审核流程
场景：社交媒体平台的内容审核
解析：
• 自动化+人工协作：提高审核效率，减少误判。
• 分级处罚：根据违规次数采取不同措施。
5. 旅行规划流程
场景：自由行行程安排
解析：
• 动态决策：根据预算调整前期准备。
• 风险预判：针对特定活动增加保障步骤。
6. 智能家居控制流程
场景：自动浇花系统
解析：
• 物联网逻辑：通过传感器数据驱动设备动作。
• 防故障机制：设置超时停止，避免过度浇水。
7. 项目管理中的敏捷冲刺流程
场景：Scrum 团队迭代开发
解析：
• 循环迭代：每日站会快速响应问题。
• 持续交付：每个冲刺周期产出可用成果。
8. 快递分拣中心流程
场景：包裹分拣自动化
graph TDA[包裹扫描入库] --> B{目的地省份?}B -- 华东地区 --> C[分配至上海分拣线]B -- 华北地区 --> D[分配至北京分拣线]C --> E{是否易碎品?}E -- 是 --> F[标记“小心轻放”]E -- 否 --> G[装入标准货箱]F --> GG --> H[运输车辆调度]
解析：
• 区域分流：按地理区域并行处理，提升效率。
• 特殊处理：对易碎品单独标记，降低损坏率。
9. 求职应聘流程
场景：应届生求职投递
解析：
• 多路径选择：区分不同投递方式的后续动作。
• 动态优化：未通过则返回修改简历。
10. 汽车故障自检流程
场景：车主自查车辆问题
解析：
• 快速排查：优先检查常见问题（电瓶、点火）。
• 安全提示：复杂问题直接建议专业处理。
总结：如何灵活应用？
-
符号扩展：
• 用 颜色 区分部门（如红色=风险，绿色=完成）。• 用 图标（⚠️、📧）增强可视化效果。
-
工具推荐：
• Mermaid：适合技术文档、Markdown 中嵌入。• Draw.io：免费在线工具，支持团队协作。
• Lucidchart：企业级流程管理，支持版本控制。
如果需要某个领域的 详细模板 或 工具操作教程，欢迎进一步提问！