mermaid 导出图片
时间: 2025-06-27 22:18:47 浏览: 24
### 将 Mermaid 图表导出为图片格式的方法
#### 使用 Mermaid Live Editor 导出图像
Mermaid 提供了一个官方的在线编辑器——Mermaid Live Editor,该平台不仅允许实时编辑和预览图表,还提供了便捷的方式将图表保存为不同格式的文件。用户可以直接访问 [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/) 并完成图表设计后,在页面右上角找到下载选项,可以选择 `.svg` 或者其他所需格式来保存图表[^1]。
#### 利用 VS Code 和 Markdown 文件生成静态图像
对于那些习惯于本地开发环境的人来说,在 Visual Studio Code (VS Code) 中通过安装特定插件也可以实现这一目标。具体来说:
- 安装名为 "Markdown Preview Mermaid Support" 的扩展程序;
- 编写包含 Mermaid 语法定义的 Markdown 文档;
- 当文档中的图表显示正常时,可以借助第三方工具或脚本进一步处理这些渲染后的 HTML 页面,从而提取其中的 SVG 元素并转换成 PNG、JPG 等常见图片格式[^3]。
值得注意的是,虽然 VS Code 自身并不直接提供一键导出至图片的功能,但是可以通过一些间接手段达成目的,比如先复制生成好的 SVG 代码片段到专门用于SVG转图片的服务网站上去操作。
#### 命令行方式使用 `mermaid-cli`
另外还有一个更自动化的选择就是采用命令行工具 `mermaid-cli` 来批量处理多个 Mermaid 源码文件。此工具可以从给定的 .mmd 文件读取数据,并按照指定参数输出高质量的图形文件。其基本用法如下所示:
```bash
# 安装 mermaid-cli 工具
npm install -g @mermaid-js/mermaid-cli
# 运行 mmdc 命令进行转化
mmdc -i input.mmd -o output.png --width 800 --height 600
```
上述命令会把位于当前目录下的 `input.mmd` 文件内的 Mermaid 绘图指令转化为一张宽度为800像素高度为600像素大小的PNG格式图片,并将其存储在同一路径下命名为 `output.png`[^5]。
阅读全文
相关推荐


















