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)

        这里推荐国内镜像源

        Index of /node/ (ustc.edu.cn)

安装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，直到图片清晰度符合要求。