新生代的流程图利器-Mermaid

1.概述

官网：Mermaid | Diagramming and charting tool

中文网：Mermaid 中文网

传送门：Online FlowChart & Diagrams Editor - Mermaid Live Editor

Mermaid是一个基于 JavaScript 的图表绘制工具，可渲染 Markdown 启发的文本定义以动态创建和修改图表。

类似 markdown，用文本语法来描述文档图形 (流程图、 时序图、甘特图) 的工具，您可以在文档中嵌入一段 mermaid 文本来生成 SVG 形式的图形。如果你熟悉 Markdown，那么学习 Mermaid 的语法 应该没有问题。

2.实战

通过实例进行学习主要的一些图的使用

1.流程图

可以绘制各种类型的流程图，包括标准流程图、过程流程图、判断流程图和循环流程图等。

graph TD
    A[Start] --> B{Check Availability}
    B -- Yes --> C[Process Request]
    B -- No --> D[Ask for Availability]
    D --> E{Answer}
    E -- Yes --> C
    E -- No --> F[End]

    subgraph Critical Path
        C --> G[Validate Data]
        G --> H[Execute Transaction]
        H --> I[Commit Changes]
        I --> J[Notify Success]
        J --> F
    end

    subgraph Error Handling
        H -.-> K[Error Handling]
        K --> L[Rollback Changes]
        L --> M[Notify Failure]
        M --> F
    end

    classDef critical path,fill:#f9d6c1,stroke:#333,stroke-width:4px;
    classDef error path,fill:#ffcccc,stroke:#333,stroke-width:4px;

    class C,G,H,I,J,K,L,M critical;
    class K,L,M error;
    

这个流程图包含以下元素：

• 节点：A, B, C, D, E, F, G, H, I, J, K, L, M
• 判断节点：B, E
• 箭头和条件分支：使用 --> 和 -.-> 来表示流程的方向和错误处理路径。
• 子图：使用 subgraph 和 end 来定义子图区域，如 Critical Path 和 Error Handling。
• 类别样式：使用 classDef 来定义不同类型的节点样式，比如 critical 和 error，然后通过 class 关键字将这些类别应用到节点上。

2.序列图

可以绘制对象之间交互的图，包括控制流和消息等，尤其适用于描述同步和异步操作。

sequenceDiagram
    participant User as U
    participant System as S
    participant Database as DB
    participant Logger as L

    U ->> S: Request Data
    Note over U,S: Authentication Check
    S ->> DB: Fetch Data
    DB --> S: Return Data
    S ->> L: Log Activity
    S --> U: Deliver Data
    rect red
        U ->> S: Cancel Request
        S ->> DB: Abort Fetch
        DB --> S: Acknowledge
        S ->> L: Log Cancellation
        S --> U: Confirmation
    end

    opt Extra Operation
        S ->> DB: Update Status
        DB --> S: Confirm Update
    end

    alt Error Occurs
        S ->> DB: Rollback Changes
        DB --> S: Rollback Confirmed
        S ->> L: Log Error
        S --> U: Error Message
    else Operation Successful
        S ->> L: Log Success
        S --> U: Success Message
    end

在这个示例中，我们有四个参与者（User, System, Database, Logger），它们之间通过箭头表示的消息进行通信。这里用到了一些Mermaid序列图的高级特性：

• participant: 定义参与者，并可给它们起别名（如 User as U）。
• Note: 添加注释，用于描述特定操作或过程。
• rect: 定义一个矩形区域，用来包围一组操作，常用于表示事务、会话或特定逻辑流。
• opt: 表示一个可选的操作序列。
• alt 和 else: 用于条件分支，表示不同的执行路径。
• ->> 和 --> 分别表示异步和同步消息传递。

这个示例涵盖了基本的消息传递、注释、条件分支、循环、可选操作和异常处理，展示了Mermaid序列图的灵活性和表达力。你可以根据自己的需要调整参与者、消息和逻辑流，以适应不同的场景。

3.甘特图

可以绘制项目排期和进度等的图表，包括时间轴、任务和比例等，用于管理大规模项目非常重要。

gantt
    dateFormat  YYYY-MM-DD
    title My Project Schedule

    section Phase 1
    Task1: Start, 2024-01-01, 5d
    Task2: Research, after Task1, 7d
    Task3: Design, after Task2, 10d
    Task4: Implementation, after Task3, 20d

    section Phase 2
    Task5: Testing, after Task4, 14d
    Task6: Review, after Task5, 7d
    Task7: Deployment, after Task6, 3d

    section Phase 3
    Task8: Training, after Milestone2, 5d
    Task9: Documentation, after Task8, 10d
    Task10: Final Review, after Task9, 5d

    section Phase 4
    Task11: Support, after Milestone3, 30d

    section Extras
    holidays : "2024-02-14", "2024-03-17"
    holiday : "2024-04-01"

    Task1   : milestone, 2024-01-06
    Task2   : active, 2024-01-07, 3d
    Task3   : crit, 2024-01-10, 5d
    Task4   : crit, 2024-01-15, 7d
    Task5   : inactive, 2024-01-22, 10d

    Task1   : milestone, 2024-01-06, 0d
    Task3   : crit, 2024-01-10, 5d
    Task4   : crit, 2024-01-15, 7d
    Task5   : inactive, 2024-01-22, 10d
    Task6   : active, 2024-01-29, 3d
    Task7   : active, 2024-02-01, 3d

    Task1   : milestone, 2024-01-06, 0d
    Task3   : crit, 2024-01-10, 5d
    Task4   : crit, 2024-01-15, 7d
    Task5   : inactive, 2024-01-22, 10d
    Task6   : active, 2024-01-29, 3d
    Task7   : active, 2024-02-01, 3d

    Task11 : active, 2024-04-25, 5d

    section Key Milestones
    Milestone1 : milestone, 2024-02-10
    Milestone2 : milestone, 2024-03-05
    Milestone3 : milestone, 2024-03-25
    Milestone4 : milestone, 2024-04-25

    section Holidays and Breaks
    holidays : "2024-02-14", "2024-03-17"
    holiday : "2024-04-01"

这个甘特图包括以下元素：

• 设置日期格式为 YYYY-MM-DD。
• 定义了四个阶段，每个阶段包含一系列任务和里程碑。
• 使用 milestone 关键字定义里程碑。
• 使用 section 关键字来分组相关的任务。
• 定义了假期和休息日，这可以帮助在规划时考虑到非工作日。
• 演示了如何设置任务的状态，例如 active、inactive 或 crit（关键路径上的任务）。

4.类图

可以绘制类和对象之间的继承、实现、属性、方法和注释等关系，用于表达软件系统的结构和继承体系。

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +canEat()
    Animal: +sleep()
    Duck --o Egg: lays
    Duck: +String beakColor
    Duck: {+quack()}
    Fish --|> Salmon
    Fish --|> Shark
    Fish: -int size
    Fish: +canSwim()
    Shark --|> Animal
    Shark: {+hunt()}
    Salmon --|> Fish
    Salmon: {+spawn()}
    Zebra --> Lion: prey
    Zebra: {+hide()}
    Lion --|> Animal
    Lion: {+roar()}

• Animal 是一个基类，它有三个子类：Duck、Fish 和 Zebra。
• Animal 类有三个属性：age（整型）、gender（字符串）和一个方法 canEat()。
• Duck 类有一个关联 Egg，表示鸭子下蛋的关系。
• Duck 类有一个方法 quack()，表示鸭子的叫声。
• Fish 类有两个子类：Salmon 和 Shark。
• Fish 类有一个私有属性 size 和一个方法 canSwim()。
• Shark 类有一个方法 hunt()，表示鲨鱼的捕食行为。
• Salmon 类有一个方法 spawn()，表示鲑鱼的产卵行为。
• Zebra 类有一个方法 hide()，表示斑马的隐藏行为。
• Zebra 和 Lion 之间有一个捕食关系，Lion 类有一个方法 roar()。

5.状态图

可以绘制状态和条件之间的转换的图表，包括状态、条件、事件和行为等，适用于描述状态机。

stateDiagram-v2
    [*] --> 待审核
    待审核 --> [*]
    待审核 --> 审核中 : 提交审核
    审核中 --> 审核通过 : 审核通过
    审核中 --> 审核不通过 : 审核不通过
    审核不通过 --> [*] : 重新提交
    审核通过 --> 发布中 : 发布
    发布中 --> 已发布 : 成功发布
    发布中 --> 审核中 : 发布失败
    已发布 --> [*]

• [*] 表示状态图的起始点。
• 待审核 是一个初始状态，表示工作流程的开始。
• 审核中 是一个中间状态，表示正在审核过程中。
• 审核通过 和 审核不通过 是两个决策点，根据审核结果决定下一步状态。
• 审核不通过 可以导致回到 [*] 状态，表示重新提交。
• 发布中 是另一个中间状态，表示正在发布过程中。
• 已发布 是一个结束状态，表示工作流程的完成。
• 箭头旁边的文本（如 提交审核、审核通过 等）表示触发状态转换的事件或动作。

6.饼图

可以通过饼图表示成员构成及占比

pie title 公司
  "工程师" : 10
  "销售" : 20
  "市场" : 30
  "其他" : 20
  "管理" : 20