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

使用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.lryc.cn/news/516831.html

相关文章:

  • ffmpeg 常用命令
  • 从入门到实战:C 语言 strlen 函数通关指南
  • npm install --global windows-build-tools --save 失败
  • 十种基础排序算法(C语言实现,带源码)(有具体排序例子,适合学习理解)
  • 基于fMRI数据计算脑脊液(CSF)与全脑BOLD信号的时间耦合分析
  • 实现websocket心跳检测,断线重连机制
  • ComfyUI节点安装笔记
  • 深度学习,训练集准确率高,但验证集准确率一直不上升,很低的问题
  • 【C语言程序设计——选择结构程序设计】求输入的日期是该年的第几天(头歌实践教学平台习题)【合集】
  • Lumos学习王佩丰Excel二十四讲系列完结
  • 前后端规约
  • 【数据可视化】数据可视化看板需求梳理模板(含示例)
  • CArray原理是什么,通过示例来展示如何使用?
  • 更换WordPress主题的基础知识及注意事项
  • springcloud篇3-docker需熟练掌握的知识点
  • 基于单片机的直流稳压电源的设计(论文+源码)
  • uniapp-vue3 实现, 一款带有丝滑动画效果的单选框组件,支持微信小程序、H5等多端
  • 解锁 C 语言字符函数密码,开启高效编程之路
  • LLM之RAG实战(五十一)| 使用python和Cypher解析PDF数据,并加载到Neo4j数据库
  • 力扣-数组-01两数之和
  • Flutter中的网络请求图片存储为缓存,与定制删除本地缓存
  • 保障移动应用安全:多层次安全策略应对新兴威胁
  • 【Linux】函数
  • Maven中管理SNAPSHOT版本含义及作用
  • win10 VS2019上libtorch库配置过程
  • 【计算机网络】课程 实验二 交换机基本配置和VLAN 间路由实现
  • Oracle Dataguard(主库为单节点)配置详解(4):将主库复制到备库并启动同步
  • OpenCL(贰):浅析CL内核程序接口函数
  • Leetcode 3407. Substring Matching Pattern
  • 学英语学压测:02jmeter组件-测试计划和线程组ramp-up参数的作用