使用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工具生成。

相关推荐
Designseek满血版1 天前
流程图生成新体验,PicDoc 入门篇
流程图
shenyan~3 天前
关于 栈帧变化完整流程图(函数嵌套)
流程图
<花开花落>16 天前
AI 辅助生成 Mermaid 流程图
ai·流程图·mermaid·tool
晓华-warm17 天前
Warm-Flow发布1.7.4, 设计器和流程图优化
java·中间件·流程图·组件·flowable·工作流·activities
邪恶马铃薯19 天前
Deepseek+墨刀,1min快速生成流程图!
流程图·墨刀
lgldl19 天前
AI自动生成复杂架构图,流程图,思维导图
人工智能·ai·流程图
蓝爱人19 天前
Vue3中使用 Vue Flow 流程图方法
javascript·vue.js·流程图
打码人的日常分享22 天前
智慧园区建设资料合集(Wordppt原件)
大数据·物联网·流程图·智慧城市·制造
小马爱打代码1 个月前
计算机系统设计:E-R图、类图、时序图、功能结构图、流程图、用例图、架构图
流程图
꧁༺摩༒西༻꧂1 个月前
DeepSeek生成流程图
流程图