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

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

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

可以使用 mmdc (Mermaid CLI)这个工具来将 .mmd 时序图(Mermaid语法描述的时序图)转换为图片,以下是使用步骤:

1. 安装 mmdc

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

bash 复制代码
npm install -g mmdc

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

2. 转换为图片

安装完成后,通过以下命令进行转换:

  • 假如你的 .mmd 文件名为 example.mmd,想要生成一张 png 图片:
bash 复制代码
mmdc -i example.mmd -o example.png
  • 常用的输出格式除了 png,还支持 svg 等,例如转换为 svg 格式:
bash 复制代码
mmdc -i example.mmd -o example.svg

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

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

bash 复制代码
mmdc -i example.mmd -o example.png --width 1920 --height 1080

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

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

bash 复制代码
mmdc -i example.mmd -o example.png --scale 2

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

相关推荐
独立开阀者_FwtCoder1 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士2 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
南岸月明2 分钟前
不聊主业,聊聊你们眼中的副业是什么样的?
前端
Kevin在掘金920147 分钟前
c#、.net、Fluent UI Blazor
前端
LovelyAqaurius8 分钟前
RSA加密算法:从数学魔法到现实守护
前端
Hilaku9 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
蛋黄蛋黄13 分钟前
微信表情怎么在自己的项目使用微信表情?-> [开源仓库]wechat-emoji
前端·github
汪子熙14 分钟前
错误剖析:net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK) 的含义与解决之道
前端
猩猩程序员16 分钟前
Rust 1.88 稳定支持裸函数:更安全简洁的汇编函数写法
前端
艾克马斯奎普特17 分钟前
为什么响应性语法糖最终被废弃了?尤雨溪也曾经试图让你不用写 .value
前端·vue.js·代码规范