mermaid怎么导出图片

### 将 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]。

### Mermaid CLI 导出图表文件或图片的方法 Mermaid CLI 提供了一种便捷的方式，可以将基于 Mermaid 语法编写的图表文件导出为多种格式的静态图像，例如 SVG、PNG 或 PDF。以下是关于如何通过 Mermaid CLI 实现这一功能的具体说明。 #### 安装 Mermaid CLI 为了能够使用 Mermaid CLI 工具，首先需要将其安装到本地环境中。可以通过 npm（Node.js 的包管理器）来完成安装操作。全局安装虽然方便，但由于可能引发版本冲突或其他问题，因此并不推荐[^1]。建议采用局部安装方式： ```bash npm install mermaid-cli --save-dev ``` 如果仍然倾向于全局安装，则可执行如下命令： ```bash npm install -g @mermaid-js/mermaid-cli ``` #### 使用 Mermaid CLI 转换文件 一旦成功安装了 Mermaid CLI，就可以利用其核心命令 `mmdc` 来处理图表文件并生成目标格式的输出。基本命令结构如下所示： ```bash npx mmdc [options] input.mermaid output.[svg|png|pdf] ``` 其中 `[options]` 表示一系列配置参数，用于指定输入和输出行为；`input.mermaid` 是源代码所在的文件路径；而最后部分则指定了期望得到的结果文件名及其格式。 ##### 常见选项解释 - `-i, --input`: 输入文件的位置。 - `-o, --output`: 输出文件的位置。 - `-t, --theme`: 设置主题样式，默认为 default。 - `-b, --background`: 自定义背景颜色，默认透明。 下面给出几个实际例子以便更直观理解这些设置的作用。 ###### 将 `.mermaid` 文件转为 PNG 图片 假设有一个名为 diagram.mermaid 的文件，要把它保存成 png 格式的图片，可以运行以下指令： ```bash npx mmdc -i diagram.mermaid -o diagram.png ``` ###### 修改默认的主题风格 若想应用不同的视觉效果比如 dark 主题，只需增加相应的参数即可： ```bash npx mmdc -i diagram.mermaid -o diagram_dark.svg -t dark ``` 以上过程展示了从准备阶段直至最终获得所需图形资产的整体流程。 ```python import subprocess def export_mermaid(input_file, output_format='png', theme='default'): command = [ 'npx', 'mmdc', '-i', input_file, '-o', f"{input_file.split('.')[0]}.{output_format}", '-t', theme ] result = subprocess.run(command, capture_output=True, text=True) if result.returncode != 0: raise Exception(f"Error exporting {input_file}: {result.stderr}") return True ``` 上述 Python 函数封装了一个调用 Mermaid CLI 的逻辑，使得自动化批量生产成为可能。