mermaid使用全流程

mermaid全流程

语法教学

mermaid语法教学比较全的有：
新手教学
进阶教学

边写边看

打开这个官方在线网站，开始编写你的mermaid流程图，可以边写边看的那种。

生成mermaid文件

可以使用各种文本编辑器vscode、记事本等等。
此处为方便举例，生成文件保存为‘input.mmd’。后缀也可以为txt、md等。

导出SVG矢量图

写完之后怎么导出呢？
在上面网站的底部，如下图所示，点击即可导出SVG格式的矢量图：

导出png等格式

上面导出的矢量图Chrome可打开，但是不能放大缩小，使用也不方便。如果使用专业的AI软件打开，又不必费那么大周折。
可以使用mermaid.cli来导出png——官网文档在这里。

首先，安装nodejs。建议严格安装，如不安装，下文的yarn、npm等有较大几率报错。
安装教程在这里。

接下来，安装mermaid。请在本链接中选取适当版本。

使用下面命令安装mermaid.cli

yarn global add mermaid.cli

安装完成后，可直接在mermaid文件‘input.mmd’，所在文件位置，打开cmd命令提示符，链接点这里。

（也可以采用dir命令进入文件位置，但是对新手不友好……）

然后输入如下命令：

mmdc -i input.mmd -o output2333.png -w 1080 -h 3600

就可以在mmd文件所在位置生成一个‘output2333.png’。
修改1080和3600，直到图片清晰度符合要求。