使用mermaid画流程图

本文介绍使用mermaid画流程图，并给出几个示例。

背景

目前，除有明确格式要求的文档外，笔者一般使用markdown写文档、笔记。当文档有图片时，使用Typora等软件可实时渲染，所见即所得。但如果文档接收方没有安装相关工具，效果则会大打折扣。Typora支持导出不同格式的文件。如果导出为pdf，对文字拷贝不友好。如果导出为word，格式不友好。

笔者的部分文档，shell命令、代码版本较多，因此选定html格式，体积小，方便浏览，但对图片不友好。但是，如果只是涉及流程图，则可以考虑用mermaid绘制。

笔者先前知道这个东西，但没用起来，最近因为一份非正式文档要发布于内网，且有流程图，于是用之，便有了本文。

实践

用法

在Typora中使用mermaid即可绘制流程图。语法如下：

```mermaid
graph TD
这里开始绘制
```

如果语法正确，即时可见效果，如出错，会有提示，示例如下：

下面列出画图的笔记。

graph TD 方向从上(Top)到下(Down)
direction LR：方向从左(Left)到右(Right)
开始([开始做事])：椭圆形，与程序流程图的开始、结束类似。

子流程：
  %% 这是准备工作子流程
  subgraph 准备工作
    direction LR
    %%...
  end
  
黄色虚线：
style 打道回府 fill:#FFFFF0,stroke-dasharray:5,stroke-width:2px,stroke:#000

示例：简单的登录流程（有判断条件）

代码：

graph TD
    A([开始]) --> B[输入用户名和密码]
    B --> C{验证成功?}
    C -->|是| D[进入主页]
    C -->|否| E[显示错误信息]
    D --> F([结束])
    E --> B

    style A fill:#D5E8D4,stroke:#333,stroke-width:2px
    style F fill:#D5E8D4,stroke:#333,stroke-width:2px
    style C fill:#FFD2D2,stroke:#333,stroke-width:2px

效果图如下：
是 否 开始 输入用户名和密码 验证成功? 进入主页 显示错误信息 结束

示例 ：订单处理流程（有判断条件）

代码：

graph TD
    A([开始]) --> B[接收订单]
    B --> C[检查库存]
    C --> D{库存充足?}
    D -->|是| E[确认订单]
    D -->|否| F[通知库存不足]
    E --> G[安排发货]
    G --> H([结束])
    F --> H

    style A fill:#D5E8D4,stroke:#333,stroke-width:2px
    style H fill:#D5E8D4,stroke:#333,stroke-width:2px
    style D fill:#FFD2D2,stroke:#333,stroke-width:2px

效果图：
是 否 开始 接收订单 检查库存 库存充足? 确认订单 通知库存不足 安排发货 结束

示例 ：产品发布流程

代码：

graph TD
    A([项目启动]) --> B[需求分析]
    B --> C[设计系统架构]
    C --> D[开发]
    D --> E[测试]
    E --> F{测试通过?}
    F -->|是| G[部署上线]
    F -->|否| H[修复问题]
    H --> E
    G --> I([项目结束])

    style A fill:#D5E8D4,stroke:#333,stroke-width:2px
    style I fill:#D5E8D4,stroke:#333,stroke-width:2px
    style F fill:#FFD2D2,stroke:#333,stroke-width:2px

效果图：
是 否 项目启动 需求分析 设计系统架构 开发 测试 测试通过? 部署上线 修复问题 项目结束

示例：有子流程图的流程

代码：

graph TD
  %% 这是准备工作子流程
  subgraph 准备工作
    direction LR
    准备1 --> 检查清单
    检查清单 --> 确认清单
  end
 
  subgraph 工作阶段1
    direction LR
    阶段1开始 --> 阶段1结束
  end

  subgraph 出发
  end

  subgraph 工作阶段2
    direction LR
    阶段2开始 --> 阶段2事情1
    阶段2事情1 --> 一个事
    阶段2事情1 --> 另一个事
  end
  
  subgraph 再次检查
    direction LR
    检查开始 --> 检查结束
  end
  
  subgraph 打道回府
    direction LR
    收拾1 -.-> 收拾2
  end

  开始([开始做事]) --> 准备工作
  准备工作 --> 工作阶段1
  工作阶段1 --> 出发
  出发 --> 工作阶段2
  工作阶段2 --> 再次检查
  再次检查 --> 结束([结束做事])
  
  %% 虚拟
  结束([结束做事]) -.-> 打道回府
  
  %% 虚线
  style 打道回府 fill:#FFFFF0,stroke-dasharray:5,stroke-width:2px,stroke:#000

效果图：

graph TD %% 这是准备工作子流程 subgraph 准备工作 direction LR 准备1 --> 检查清单 检查清单 --> 确认清单 end subgraph 工作阶段1 direction LR 阶段1开始 --> 阶段1结束 end subgraph 出发 end subgraph 工作阶段2 direction LR 阶段2开始 --> 阶段2事情1 阶段2事情1 --> 一个事 阶段2事情1 --> 另一个事 end subgraph 再次检查 direction LR 检查开始 --> 检查结束 end subgraph 打道回府 direction LR 收拾1 -.-> 收拾2 end 开始([开始做事]) --> 准备工作 准备工作 --> 工作阶段1 工作阶段1 --> 出发 出发 --> 工作阶段2 工作阶段2 --> 再次检查 再次检查 --> 结束([结束做事]) %% 虚拟 结束([结束做事]) -.-> 打道回府 %% 虚线 style 打道回府 fill:#FFFFF0,stroke-dasharray:5,stroke-width:2px,stroke:#000

部分markdown工具正确渲染，下面是效果图的截图。

示例：有主流程、详细流程的流程

代码：

graph TD
    subgraph 主要流程
        A[开始做事] --> B[准备工作]
        B --> C[工作阶段1]
        C --> D[工作阶段2]
        D --> E[结束做事]
    end

    subgraph 准备工作
        direction RL
        F[准备1]
        G[检查清单]
        H[再次检查清单]
    end

    subgraph 工作阶段1
        direction RL
        I[阶段1开始]
        J[阶段1结束]
        K[出发]
    end

    subgraph 工作阶段2
        direction RL
        L[阶段2开始]
        M[阶段2事情1]
        N[一个事]
        O[另一个事]
    end

    subgraph 结束做事
        direction RL
        P[再次检查]
        Q[收拾1]
        R[收拾2]
    end

    B --> 准备工作
    C --> 工作阶段1
    D --> 工作阶段2
    E --> 结束做事

    style A fill:#D5E8D4,stroke:#333,stroke-width:2px
    style B fill:#DAE8FC,stroke:#333,stroke-width:2px
    style C fill:#DAE8FC,stroke:#333,stroke-width:2px
    style D fill:#DAE8FC,stroke:#333,stroke-width:2px
    style E fill:#D5E8D4,stroke:#333,stroke-width:2px
    style F fill:#FFF2CC,stroke:#333,stroke-width:2px
    style G fill:#FFF2CC,stroke:#333,stroke-width:2px
    style H fill:#FFF2CC,stroke:#333,stroke-width:2px
    style I fill:#FFF2CC,stroke:#333,stroke-width:2px
    style J fill:#FFF2CC,stroke:#333,stroke-width:2px
    style K fill:#FFF2CC,stroke:#333,stroke-width:2px
    style L fill:#FFF2CC,stroke:#333,stroke-width:2px
    style M fill:#FFF2CC,stroke:#333,stroke-width:2px
    style N fill:#FFF2CC,stroke:#333,stroke-width:2px
    style O fill:#FFF2CC,stroke:#333,stroke-width:2px
    style P fill:#FFF2CC,stroke:#333,stroke-width:2px
    style Q fill:#FFF2CC,stroke:#333,stroke-width:2px
    style R fill:#FFF2CC,stroke:#333,stroke-width:2px

效果图：

graph TD subgraph 主要流程 A[开始做事] --> B[准备工作] B --> C[工作阶段1] C --> D[工作阶段2] D --> E[结束做事] end subgraph 准备工作 direction RL F[准备1] G[检查清单] H[再次检查清单] end subgraph 工作阶段1 direction RL I[阶段1开始] J[阶段1结束] K[出发] end subgraph 工作阶段2 direction RL L[阶段2开始] M[阶段2事情1] N[一个事] O[另一个事] end subgraph 结束做事 direction RL P[再次检查] Q[收拾1] R[收拾2] end B --> 准备工作 C --> 工作阶段1 D --> 工作阶段2 E --> 结束做事 style A fill:#D5E8D4,stroke:#333,stroke-width:2px style B fill:#DAE8FC,stroke:#333,stroke-width:2px style C fill:#DAE8FC,stroke:#333,stroke-width:2px style D fill:#DAE8FC,stroke:#333,stroke-width:2px style E fill:#D5E8D4,stroke:#333,stroke-width:2px style F fill:#FFF2CC,stroke:#333,stroke-width:2px style G fill:#FFF2CC,stroke:#333,stroke-width:2px style H fill:#FFF2CC,stroke:#333,stroke-width:2px style I fill:#FFF2CC,stroke:#333,stroke-width:2px style J fill:#FFF2CC,stroke:#333,stroke-width:2px style K fill:#FFF2CC,stroke:#333,stroke-width:2px style L fill:#FFF2CC,stroke:#333,stroke-width:2px style M fill:#FFF2CC,stroke:#333,stroke-width:2px style N fill:#FFF2CC,stroke:#333,stroke-width:2px style O fill:#FFF2CC,stroke:#333,stroke-width:2px style P fill:#FFF2CC,stroke:#333,stroke-width:2px style Q fill:#FFF2CC,stroke:#333,stroke-width:2px style R fill:#FFF2CC,stroke:#333,stroke-width:2px

总结

鉴于实践经验少，因此画的流程图也少。从上文可以看到，有些图的样式不太美观，这需再细调。

另外，除那个有虚线的图是自己手工绘制外，其它均借用AI工具生成。