使用npm 插件[mmdc]将.mmd时序图转换为图片

使用npm 插件[mmdc]将.mmd时序图转换为图片

• • • [1. 安装 `mmdc`](#1. 安装 mmdc)
    • [2. 转换为图片](#2. 转换为图片)

可以使用 mmdc （Mermaid CLI）这个工具来将 .mmd 时序图（Mermaid语法描述的时序图）转换为图片，以下是使用步骤：

1. 安装 mmdc

确保你已经安装了 npm，在命令行中运行以下命令安装 mmdc：

npm install -g mmdc

-g 选项表示全局安装，这样你可以在任何项目目录下使用该命令。如果不想全局安装，也可以在项目内安装，之后通过 npx 来运行。

2. 转换为图片

安装完成后，通过以下命令进行转换：

• 假如你的 .mmd 文件名为 example.mmd，想要生成一张 png 图片：

mmdc -i example.mmd -o example.png

• 常用的输出格式除了 png，还支持 svg 等，例如转换为 svg 格式：

mmdc -i example.mmd -o example.svg

这里 -i 用于指定输入的 .mmd 文件路径，-o 用于指定输出的图片文件路径。通过上述操作，就能轻松将 .mmd 时序图转换为对应的图片。

mmdc 可以通过调整一些参数来提升输出图片的清晰度，关键参数是 --width 和 --height，用于指定输出图片的尺寸，尺寸越大，图片往往越清晰，细节越丰富：

mmdc -i example.mmd -o example.png --width 1920 --height 1080

在上述命令中，--width 1920 将输出图片的宽度设为1920像素，--height 1080 将高度设为1080像素 。你可以根据实际需求进一步增大这两个数值，不过要注意，太大的尺寸会导致生成时间变长，而且生成的文件体积也会增大。

此外，--scale 参数也能起到一定作用，它用于设置渲染的缩放比例，默认值是 1，增大该值会让图形元素更大更清晰，示例如下：

mmdc -i example.mmd -o example.png --scale 2

上述命令将缩放比例设为2，使得输出图片中的内容加倍放大呈现，从而获得更清晰的视觉效果。