01 背景需求
现在基本上所有的公司都要求职员会绘制、或者能看懂流程图。只要你是需要坐在电脑前办公的，都要求需要会绘制，否则你在公司肯定混不好。如果还有不会的，赶紧学起来。表示认同的同学请帮忙点个赞，欢迎留言区留言哈！
流程图作为一种可视化工具，通过图形和符号展示各要素的步骤、决策点以及流程走向。流程图在团队协作中是优化效率、减少错误、促进沟通的核心工具。
简单介绍下流程图的重要性：
- 流程图可以提升效率与准确性：
流程图将复杂流程拆解为清晰步骤，避免遗漏关键环节，减少重复劳动。
例如：制造业通过流程图标准化生产步骤，缩短新员工培训时间。 - 流程图可以促进跨部门协作：
流程图以统一语言描述流程，消除部门间术语差异，确保理解一致。
例如：市场部与销售部通过流程图对齐客户转化路径，避免责任推诿。 - 流程图能识别瓶颈与优化空间：
流程图能直观呈现流程中的冗余环节或决策点，为改进提供数据支持。
例如：物流公司通过流程图发现仓储分拣效率低下，进而优化布局。 - 流程图能协助风险管理与合规性：
利用流程图明确关键控制点（如审批、质检），降低操作风险。
例如：金融行业用流程图标注合规审查步骤，避免法律漏洞。 - 流程图支持自动化与数字化：
流程图为RPA（机器人流程自动化）或ERP系统实施提供基础框架。
例如：财务部门通过流程图设计自动化报销系统，减少人工干预。
02 常用流程图绘制工具有哪些
目前市场上常用的流程图绘制工具有以下几种，附带了本人的总结。欢迎大家在留言区讨论哈！
- 办公软件集成工具：如Word/PowerPoint/Excel。内置SmartArt图形与形状库，可快速绘制简单流程。
总结：简单流程图可以搞定，但复杂的流程真不行。首先图形的大小、颜色、风格很难做到既美观又统一。比如每次对齐都要搞很久；如果要修改流程绝对能把人搞崩溃，直接放弃。 - 专业流程图软件：如Microsoft Visio。行业标杆，与Office生态无缝集成，支持BPMN、UML等专业标准。
总结：大部分场景推荐使用，但需要安装破解版本。有钱的大款当我没说哈！ - 在线协作工具：如ProcessOn/Draw.io（现名Diagrams.net）。支持流程图、组织结构图、UML等多种图表。
总结：在线工具；数据不可按；导出麻烦；免费版本有诸多限制；谁用谁知道。如果你公司购买了会员，团队内部协作用可以的。 - 编程自动化工具：如Mermaid。使用Markdown(MD)语法生成流程图，支持Git版本控制。
总结：功能齐全，完全免费。但技术要求高，普通人很难直接使用。
03 WordBN集成Mermaid图表本地免费方案
先简单介绍下Mermaid：
Mermaid 是一款基于 JavaScript 的开源图表绘制工具，它通过解析类 Markdown 的文本语法，将文本描述自动渲染成 SVG 格式的图表。
Mermaid有以下几大特点和优势：
- 纯文本编写：
Mermaid 使用简洁直观的文本语法来定义图表，这种语法接近自然语言逻辑，降低了学习门槛，无需掌握复杂的绘图技巧。例如，流程图仅需用箭头连接节点，时序图按角色和时间顺序排列步骤，新手可在半小时内上手基础图表绘制。 - 多种图表支持：
Mermaid 支持多种图表类型，覆盖了流程图、时序图、状态图、类图、甘特图、饼图、象限图、需求图、Git 图、C4 图、思维导图、时间线、桑基图、XY 图表、框图、数据包图、看板图、架构图等主流场景，满足了不同领域和场景的需求。 - 高度可定制化：
Mermaid 允许对图表进行详细的样式定制，包括颜色、字体和布局等，以满足不同的审美需求。例如，可以通过类定义为节点和连接线添加样式，使图表更具可读性；支持内置主题（默认、森林、黑暗等），同时允许深度自定义。(为了减少使用复杂度，WordBN集成时统一了部分样式，后期再考虑全部放开) - 开源免费且社区活跃：
Mermaid 是开源软件，采用 MIT 许可证，完全免费，用户可以随意使用、修改和分享代码，无需担心版权问题。同时，它拥有活跃的开发者社区，持续完善功能，不断推出新版本以修复 bug 和添加新功能。 - 提升文档质量：
Mermaid 使文档和图表的创建与更新变得简单高效，能够帮助用户创建清晰、易于维护的系统架构和流程说明，提升技术文档的质量和专业性。同时，它也适用于教育工作者简化概念和流程的可视化表达，增强教学效果。
04 上干货！如何用Markdown(MD)绘制流程图
1 一个简单例子：
以下是一个简单的流程例子：在WordBN编辑器，输入'/'快捷输入，选择[流程图]；或者输入以下内容。
流程图绘制效果：
2 固定格式和流程介绍：
Mermaid流程图固定格式如下图。
flowchart是流程图图表类型。Mermaid还支持其他很多类型图表，比如mindmap是思维导图等等。
LR是流程方向从左到右；TB(TD)流程方向从上到下。如下例子：
从上到下流程图绘制效果：
当然还有BT(从下往上方向)，以及RL(从右到左方向)等。
A(开始) --> B[任务]："A"和"B"是节点编号，用来唯一表示节点。"()"和"[]"是节点形状，里面的"开始/开始"是节点描述文本。"-->"是节点之间连接线条。
更多的节点形状和连接线条，后面会详细介绍。
学会了以上知识，你就已经学会了Mermaid流程图绘制。其他的只是选择不同节点形状、和不同连接线条而已。
剩下的就是你对实际业务场景的理解进行流程图绘制了。
下面用实际例子重点讲下流程图的节点形状和连接线条。
3 流程图节点形状：
- 默认方形节点：
格式：[]
- 圆角节点：
格式：()
- 体育场形节点：
格式：([])
- 子程序形状节点：
格式：[[]]
- 圆柱形节点：
格式：[()]
- 圆形节点：
格式：(())
- 不对称图形节点：
格式：>]
- 菱形节点：
格式：{}
- 六边形节点：
格式：{{}}
- 平行四边形节点：
格式：[//]
- 平行四边形2节点：
格式：[\\]
- 梯形节点：
格式：[/\]
- 梯形2节点：
格式：[\/]
- 双环节点：
格式：((()))
- 更多形状节点：
访问Mermaid在线文档
4 流程图节点间连接线：
- 带箭头的链接：
格式：-->
- 开放的链接：
格式：---
- 带文本的链接：
格式：--文本--- 或者 ---|文本|
- 带箭头和文本的链接：
格式：--文本--> 或者 -->|文本|
- 虚线链接：
格式：-.->
- 厚线链接：
格式：==>
- 更多连接线：
访问Mermaid在线文档
5 一个综合流程图例子：
以下是一个专业AVI外观检测设备相机执行图像流程图。同学们可以参照学习一下。
05 使用Mermaid+Markdown这种方式绘制流程图有哪些好处
通过本人多年实际工作经验总结，使用Mermaid+Markdown(MD)这种方式绘制流程图，有以下几大好外。欢迎同学们在留言区留言和讨论！
- 简单、方便：
真的非常简单，只需要记住几个基本节点形状和连接线条，用普通的文本就可以绘制各种复杂流程图。
例如把TB改成LR不用重样调整，就直接从上到下方向，绘制成左到右流程图。
添加节点、修改节点也是超级简单，不需要各种鼠标拖拉。
而且实时预览，所见即所得。 - 统一风格：
利用Mermaid+Markdown绘制流程图，免去了调整图形风格、颜色、尺寸大小，还有对齐等各种与业务本身无关的操作。可以让作者更加专注于业务流程本身。 - 功能多：
功能真的多。Mermaid 支持多种图表类型，覆盖了流程图、时序图、状态图、类图、甘特图、饼图、象限图、需求图、Git 图、C4 图、思维导图、时间线、桑基图、XY 图表、框图、数据包图、看板图、架构图等主流场景，满足了不同领域和场景的需求。
Mermaid可以说已经成为了Markdown绘制图表事实上的标准。同学们现在学习还来的及。
再加上WordBN的笔记导出功能，可以非常方便、完美的将图表导出PNG图片，PDF文件，或者HTML文件。 - 数据安全可控：
因为WordBN是本地软件，所有数据存放在本地，可以保证业务数据的安全性，避免了核心业务(技术)外漏的风险。
06 如何导出PNG图片
讲了这么多，回到主题，如何将写好的流程图导出为PNG图片。
点击[文件]菜单，选择[导出 PNG 图片]如下图：
上面综合流程图例子(AVI外观检测设备相机执行图像流程图)导出PNG图片如下图：
WordBN字远笔记除了支持将流程图导出为PNG图片，也支持导出为PDF文档和HTML文档。(导出DOCX文档对Mermaid图表部分格式不支持，暂时不推荐使用)
WordBN刚发布的版本集成了Mermaid最新V11.12.0版本库，可以支持Mermaid最新所有特性功能，并且所有功能完全免费。
欢迎有需要的同学下载试用。现在 WordBN 字远笔记在微软应用商店可以免费下载，打开微软应用商店，搜索【WordBN字远笔记】即可下载。或者点击地址。Microsoft Store