当前位置: 首页 > article >正文

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

使用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,使得输出图片中的内容加倍放大呈现,从而获得更清晰的视觉效果。


http://www.kler.cn/a/465689.html

相关文章:

  • 基于氢氧燃料电池的分布式三相电力系统Simulink建模与仿真
  • 『SQLite』创建、附加、分离、备份及恢复数据库
  • HTML——75. 内联框架
  • C语言:调试的概念和调试器的选择
  • vscode代码AI插件Continue 安装与使用
  • PHP框架+gatewayworker实现在线1对1聊天--发送消息(6)
  • VuePress2配置unocss的闭坑指南
  • 适配器模式(类适配器,对象适配器)
  • 高频java面试题
  • 用语言模型 GLM-Zero-Preview 来驱动战场推演
  • 数据挖掘——支持向量机分类器
  • Centos源码安装MariaDB 基于GTID主从部署(一遍过)
  • Redis面试相关
  • vue2框架配置路由设计打印单
  • 【Axios使用手册】如何使用axios向后端发送请求并进行数据交互
  • 利用PHP爬虫获取1688按关键字搜索商品:技术解析与实践指南
  • 【C语言程序设计——循环程序设计】枚举法换硬币(头歌实践教学平台习题)【合集】
  • 【HTTP和gRPC的区别】协议类型/传输效率/性能/语义/跨语言支持/安全性/使用场景/易用性对比
  • Kafka详解 ③ | Kafka集群操作与API操作
  • 常用的聚合函数
  • TCPDump参数详解及示例
  • 组合模式——C++实现
  • UniApp | 从入门到精通:开启全平台开发的大门
  • SpringSpringBoot常用注解总结
  • oceanbase集群访问异常问题处理
  • 高温大面积碳化硅外延生长装置及处理方法