WHY
日常工作中时常要对代码或者业务逻辑进行流程图的绘制,如果流程较短使用常规的流程图绘制软件尚可,如开源的draw.io,功能十分强大,而且开源。但是如果是流程极长的场景或者需要灵活拆解模块化的场景,则在创作时修改格式以及后续修改图时会十分痛苦,这时候就是需要本自动转换流程图来简化流程。
WHAT
mermaid.js
一个和 markdown 一样方便的用文本绘制流程图的工具。
它是一个基于Javascript的图表和图表工具,可以呈现Markdown启发的文本定义,以动态创建和修改图表。 美人鱼 - 用于生成流程图,序列图,类图,甘特图和git图的Markdownish语法。 (mermaid-js.github.io)
HOW
flowchart.fun
mermaid.js基本语法非常强大也比较简单,不在这里详谈,这里推荐一种简单的方式。 flowchart.fun
这个网站可以通过非常简单的方式进行mermaid的绘制,并且可以实时将流程图生成预览。如下:
它支持简单流程图的导出,格式有SVG、PNG、JPG,方便!!!
但是,若是长流程图,并不支持,生成的图片根本无法展示
这种情况就需其自动生成的mermaid代码来进行操作了。
注意,我们需要的只是从端点定义开始的代码。
然后只需要在最上方加上【graph TD】即可
导出为PNG
新建后缀为.mmd的文件,也可是.txt和.md结尾。以【imputed.mmd】举例,将上一步编辑好的mermaid代码置于文件中保存。
安装node.js
下载node.js并安装,若已安装则跳过。推荐使用16版本及以上,自带npm
Node.js 安装配置 | 菜鸟教程 (runoob.com)
这里推荐国内镜像源
安装mermaid.js
在node目录下执行:
npm install -g @mermaid-js/mermaid-cli
安装完成后会在node文件夹bin目录下生成mmdc文件
生成流程图图片png
在上一步目录下进入cmd窗口,执行命令
mmdc -i D:\input.mmd -o D:\output2333.png -w 7200 -H 7200
则生成了图片output2333.png。
修改两个像素参数7200和7200,直到图片清晰度符合要求。
更多详细命令可参考官方文档
GitHub - mermaid-js/mermaid-cli: Command line tool for the Mermaid library