Mermaid 是一个用于绘制流程图、时序图、甘特图等的开源工具。而 @mermaid-js/mermaid-cli 则是一个基于 Node.js 平台的命令行工具，可以将 Mermaid 代码渲染成各种格式的图片。本文将介绍如何使用 @mermaid-js/mermaid-cli 来绘制流程图，并将其导出为 PNG 或 PDF 格式的图片。
安装
在终端中执行以下命令，即可全局安装 @mermaid-js/mermaid-cli：
npm install -g @mermaid-js/mermaid-cli
基本用法
@mermaid-js/mermaid-cli 的基本语法为：
mmdc -i <input file> -o <output file> [-b <backgroundColor>] [-t <theme>] [-w <width>] [-H <height>]
其中，-i 表示输入文件， -o 表示输出文件，-b 表示背景色，-t 表示主题，-w 表示宽度，-H 表示高度。
例如，我们可以在终端输入以下命令来将 Mermaid 代码渲染为 PNG 格式的图片：
mmdc -i input.mmd -o output.png
示例代码
接下来，我们将通过一个示例代码来演示如何使用 Mermaid 绘制流程图。假设我们要绘制如下的流程图：
其中，矩形代表操作，菱形代表判断，箭头表示流程方向。
我们可以将其转换为 Mermaid 代码：
-- -------------------- ---- -------
----- --
----- --- ------
- -- - --- ------
- -- - --- -----
- -- - --- -----
- -- - --- ------
- --- --------
- -- - --- -----
- -- - --- ------
- --- ------
- --- -
- --- -----然后，保存为 input.mmd 文件，执行以下命令即可将其渲染为 PNG 格式的图片：
mmdc -i input.mmd -o output.png
其他参数
除了输出 PNG 格式的图片外，@mermaid-js/mermaid-cli 还支持导出 PDF、SVG、JPG 等格式的图片。具体可以通过 -o 后跟文件名的后缀来指定导出的图片格式，例如：
mmdc -i input.mmd -o output.pdf
此外，我们还可以通过 -b 参数来指定图片的背景色，例如：
mmdc -i input.mmd -o output.png -b white
同样，还可以通过 -w 和 -H 参数来设置图片的宽度和高度，例如：
mmdc -i input.mmd -o output.png -w 800 -H 600
结语
本文介绍了如何使用 @mermaid-js/mermaid-cli 来绘制流程图，并将其导出为 PNG 或 PDF 格式的图片，同时也介绍了一些其他的参数。希望本文对初学者有所帮助，同时也希望大家多多探索 Mermaid 的其他用法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc63bb5cbfe1ea061223f