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