使用npm 插件[mmdc]将.mmd时序图转换为图片
- 1. 安装 `mmdc`
- 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
,使得输出图片中的内容加倍放大呈现,从而获得更清晰的视觉效果。