问题：如何使用Mermaid导出流程图图片？

Question

**如何使用Mermaid导出流程图图片？** Mermaid 是一个强大的文本生成图表工具，支持多种图表类型，如流程图、时序图、甘特图等。在实际开发和文档撰写中，常常需要将 Mermaid 编写的流程图导出为图片格式，便于分享或嵌入到非支持 Mermaid 的平台中。那么，如何将 Mermaid 流程图导出为图片？常见方法包括使用在线工具（如 Mermaid Live Editor）、集成插件（如 VS Code 的 Mermaid 插件）、或通过命令行工具（如 mermaid CLI）进行转换。此外，一些文档系统（如 Typora、Docusaurus）也支持直接导出。本文将详细介绍几种主流的 Mermaid 流程图导出图片方法，帮助开发者高效完成图表输出。

Answer 1

一、Mermaid 导出流程图图片的基本概念

Mermaid 是一个基于文本的图表生成工具，支持多种图表类型，如流程图、时序图、甘特图等。其核心优势在于通过简洁的语法快速生成高质量的可视化图表，适用于文档编写、项目管理和技术交流等场景。

在实际使用中，我们经常需要将 Mermaid 编写的流程图导出为图片格式（如 PNG、SVG），以便嵌入到 Word、PPT、PDF 或不支持 Mermaid 的平台中。

二、使用 Mermaid Live Editor 在线导出

Mermaid 官方提供了 Mermaid Live Editor，这是一个功能强大的在线编辑器，支持实时预览和导出为图片。

1. 访问 Mermaid Live Editor 官网。
2. 粘贴或编写 Mermaid 流程图代码。
3. 点击右上角的 Download 按钮，选择导出格式（PNG 或 SVG）。

示例流程图代码：

```mermaid
graph TD
    A[Start] --> B[Process]
    B --> C[End]
```

三、VS Code 插件集成导出流程图

对于开发者来说，VS Code 是常用的代码编辑器。通过安装 Mermaid 插件，可以实现流程图的本地编辑与导出。

• 安装 Mermaid Preview 插件。
• 在 VS Code 中打开 .mermaid 或 .md 文件。
• 使用快捷键 Ctrl+Shift+P，选择 Export Mermaid Diagram 导出为 PNG 或 SVG。

插件名称	功能	支持导出格式
Mermaid Preview	预览与导出	PNG、SVG
Mermaid Syntax Highlighting	语法高亮	无

四、使用 Mermaid CLI 命令行工具批量导出

对于需要批量处理或自动化导出的场景，推荐使用 mermaid CLI 工具。

1. 安装 mermaid CLI：npm install -g @mermaid-js/mermaid-cli
2. 执行命令导出：mmdc -i input.mmd -o output.png

支持输入格式包括 .mmd、.mermaid、.md，输出格式支持 PNG、SVG、PDF。

$ mmdc -i diagram.mmd -o diagram.png

五、在 Markdown 编辑器中直接导出（如 Typora）

Typora 是一款流行的 Markdown 编辑器，支持 Mermaid 语法并可直接导出为图片。

1. 在 Typora 中启用 Mermaid 支持（偏好设置 → Markdown → 勾选 Mermaid）。
2. 插入 Mermaid 代码块并预览。
3. 右键点击图表，选择 Save as Image 即可保存为 PNG。

示例流程图：

graph LR
    A[开始] --> B[处理]
    B --> C[结束]