自动转换流程图来简化流程jsnode.js简化教程

为什么

在日常工作中拆解项目流程图片大全大图，经常需要为代码或者业务逻辑绘制流程图。 如果流程较短，使用常规的流程图绘制软件也是可以接受的，比如开源的draw.io，功能非常强大，而且是开源的。 但如果是流程很长的场景或者需要灵活拆解、模块化的场景，在创作时修改格式以及后续修改图就会非常痛苦。 这时候就需要这个自动转换流程图来简化流程。

什么.js

一个像用文本绘制流程图一样方便的工具。

它是一个基于渲染启发文本定义的图表和图表工具，用于动态创建和修改图表。

如何。 乐趣

.js 的基本语法非常强大且相对简单。 我这里就不详细说了。 这里给大家推荐一个简单的方法。 。乐趣

这个网站可以用非常简单的方式绘制，并且可以实时生成流程图的预览。 如下：

支持导出SVG、PNG、JPG格式的简单流程图，方便！ ！ ！

但如果是长流程图就不​​支持拆解项目流程图片大全大图，生成的图片根本无法显示

这种情况下就需要它自动生成的代码来运行。

请注意，我们需要的只是从端点定义开始的代码。

然后只需在顶部添加[graph TD]

导出为 PNG

创建一个后缀为 .mmd 的新文件，该文件也可以以 .txt 和 .md 结尾。 以[.mmd]为例，将上一步编辑的代码保存在文件中。

安装node.js

下载node.js并安装，如果已经安装则跳过。 建议使用16及以上版本，配合npm

Node.js 安装配置 | 菜鸟教程()

这里推荐国内镜像源

/节点/ () 的索引

安装.js

在节点目录下执行：

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

image.png 已生成。

修改7200、7200这两个像素参数，直到图片清晰度满足要求。