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

news/2025/1/8 17:21:02/

使用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.ppmy.cn/news/1560565.html

相关文章

组合模式——C++实现

1. 模式简介 组合模式是一种结构型模式。 组合模式又叫做部分整体模式,组合模式用于把一组相似的对象当做一个单一的对象。特别擅长处理树形的数据,对于非树形的数据不好用它。 对于树形的数据,一个典型的例子就是文件系统。在文件系统里大致…

Android多渠道打包【友盟方式详细讲解版】

开发环境: Mac OS 15.0.1 Android Studio Jellyfish | 2023.3.1 Patch 2 废话不讲,不浪费大家时间,每步骤后面有解释,直接开始上手干 第一步: 在程序的清单文件【app/src/main/AndroidManifest.xml】配置如下节点内容…

SCAU软件体系结构期末复习-名词解释题

名词解释 软件设计模式: 是对软件设计经验的总结,是对软件设计中反复出现的设计问题的成功解决方案的描述。为了记录这些成功的设计经验并方便以后使用,软件设计模式通常包含4个基本要素:模式名称、问题、解决方案以及效果。它最…

【GeekBand】C++设计模式笔记20_Composite_组合模式

1. “数据结构” 模式 常常有一些组件在内部具有特定的数据结构,如果让客户程序依赖这些特定的数据结构,将极大地破坏组件的复用。这时候,将这些特定数据结构封装在内部,在外部提供统一的接口,来实现与特定数据结构无…

Segment Anything论文详细翻译【Part1:作者+Figure1+摘要】

目录 写在前面 标题 作者 Alexander Kirillov Eric Mintun Nikhila Ravi Hanzi Mao 其他作者 发表机构 Figure 1 任务 模型 数据 摘要 翻译 写在前面 为啥要写这篇文章?因为找不到一篇写的特别好的【翻译并仔细解释】文章。网上大多千篇一律&#x…

[react]小技巧, ts如何声明点击事件的类型

很简单, 鼠标放到事件上面就行了 如果想知道点击的是什么元素 ,打印他的nodename就行了 不过得断言为html元素才行 const handleClick (e: React.MouseEvent<HTMLDivElement, MouseEvent>) > {console.log(current, (e.target as HTMLElement).nodeName);}; 为什么…

[ubuntu-22.04]ubuntu不识别rtl8153 usb转网口

问题描述 ubuntu22.04插入rtl8153 usb转网口不识别 解决方案 安装依赖包 sudo apt-get install libelf-dev build-essential linux-headers-uname -r sudo apt-get install gcc-12 下载源码 Realtek USB FE / GBE / 2.5G / 5G Ethernet Family Controller Softwarehttps:/…

leetcode 面试经典 150 题:多数元素

链接多数元素题序号169题型数组解法1. 排序法、2. Boyer-Moore投票算法难度简单熟练度✅✅✅✅✅ 题目 给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给定的…