基于 mermaid 的在线流程图绘制方案

一、项目背景

本项目是自己在公司做前端网页的时候，后端需要做一个流程控制引擎，给出了节点信息和节点之间的连接信息，老板希望根据这些信息把流程图画出来，当时自己的第一感觉就是在网上寻找开源项目，但是发现找到的大多都不是开源的，找了一天时间也没有找到比较容易上手的解决方案。

后来想着 markdown 不是能够通过代码的方式直接画流程图吗？想着能不能在前端把后端的流程图信息转换为 markdown 支持的 mermaid 定义信息直接画图呢？说干就干，于是就有了这个小项目。

二、项目使用介绍

本项目允许用户使用 json 配置文件的方式生成一个 mermaid 的流程图定义信息，其中 json 的定义信息如下：

/**
 * node.name: 节点名称
 * node.id: 节点唯一 ID
 * line.desc: 关联名称(可选)
 * line.id: 节点唯一 ID
 * line.nodeId: 关联起点节点 ID
 * line.nextNodeId: 关联节点结束 ID
 */
{
	"nodes": [
		{
			"name": "如何大象装进冰箱？",
			"id": "1601480108398"
		},
		{
			"name": "打开冰箱门",
			"id": "1601480222473"
		},
		{
			"name": "关闭冰箱门",
			"id": "1601480242369"
		},
		{
			"name": "把大象装进冰箱",
			"id": "1601480269532"
		}
	],
	"lines": [
		{
			"desc": "第一步",
			"nodeId": "1601480108398",
			"nextNodeId": "1601480222473",
			"id": "1601480305753"
		},
		{
			"desc": "第二步",
			"nodeId": "1601480222473",
			"nextNodeId": "1601480269532",
			"id": "1601480330510"
		},
		{
			"desc": "第三步",
			"nodeId": "1601480269532",
			"nextNodeId": "1601480242369",
			"id": "1601480347673"
		}
	]
}

转换为如下节点定义信息：

graph TB
tzstart((开始))-->1601480108398("如何大象装进冰箱?");
1601480108398("如何大象装进冰箱?")-->|第一步|1601480222473("打开冰箱门");
1601480222473("打开冰箱门")-->|第二步|1601480269532("把大象装进冰箱");
1601480269532("把大象装进冰箱")-->|第三步|1601480242369("关闭冰箱门");
1601480242369(关闭冰箱门)-->tzend((结束));

项目已经对如下情况作出了处理：

• 节点之间允许出现循环连接，既 A => B => C => A 不会出现错误。
• 如果某一个节点有多个子节点，则该节点的形状会自动变为菱形。
• 开始节点会自动识别，并自动添加开始节点，结束节点也会自动识别，并且指向结束节点。
• 节点展示顺序已经通过深度优先遍历算法预先排序处理。
• 节点连线顺序可以通过修改同一个 nodeId 下的连线先后顺序实现（想了想怎么自动调整，能力不足，实现不了）。

三、项目预览

点击 https://dreamcatcher_yxc.gitee.io/require-vue-admin/index.html#/components/flowchart 访问在线示例，默认提供了一个复杂流程图。核心代码请参看： flowchart.js, 预览版本实现了一个相对完整的在线示例，点击 FlowChat.vue 查看代码，渲染逻辑可以参看：FlowChartView.vue。

四、总结

这是一个比较简单的项目，但是核心解析逻辑已经经历了真实的检验，期间出现的问题都已经修复，目前没有发现什么问题，感兴趣的小伙伴可以基于代码实现节点边框形状、图标、子流程图扩展功能，有任何问题可以在此留言或者在 gitee 主页下留言。