mermaid 保存图片

Mermaid是一个流程图和序列图的绘制工具，它可以在Markdown文档中使用。如果您想保存Mermaid图像，您可以使用以下方法：

1. 使用浏览器截图工具对Mermaid图像进行截屏，然后保存到本地；
2. 在Mermaid代码中添加`class="mermaid"`属性，然后使用JavaScript将Mermaid图像转换为SVG或PNG格式，并将其下载到本地；
3. 在Mermaid代码中添加``，然后将Mermaid图像转换为Base64编码，并将其嵌入到Markdown文档中。

注意：以上方法均需要在Mermaid代码正确的前提下使用。如果Mermaid代码存在语法错误，则无法正确绘制图像。

相关问题

mermaid在线编译器保存图

### 支持保存图形输出的 Mermaid 在线编辑工具

Mermaid 是一种流行的标记语言，用于创建清晰易读的图表。为了满足保存图形输出的需求，在线编辑工具有多种选择。

#### 1. Mermaid Live Editor
Mermaid 官方提供的在线编辑器允许实时预览图表并导出图像文件。通过该平台，用户可以直接下载生成的 SVG 或 PNG 文件[^1]。

<!-- 示例：在 Mermaid Live Editor 中定义简单流程图 -->
<div class="mermaid">
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</div>

#### 2. Draw.io (diagrams.net)
Draw.io 是一款功能全面的支持 Mermaid 的绘图应用。除了能够解析 Mermaid 语法外，还具备丰富的形状库和连接选项，并且支持将最终作品另存为多种格式，包括但不限于 PDF、JPG 和 XML 等[^2]。

#### 3. CodePen
作为代码片段分享社区的一部分，CodePen 同样集成了对 Mermaid 图表的支持。利用其内置的功能，创作者不仅限于发布网页内容，还可以方便地嵌入 Mermaid 脚本并通过截图等方式获取静态图片副本。

将mermaid文本生成图片

### 将Mermaid语法描述的图表转换为图像文件的方法

#### 使用`mermaid-cli`命令行工具
为了将Mermaid代码转化为图片格式，可以采用`mermaid-cli`这一命令行工具。此工具专为Mermaid库设计，允许用户通过简单的命令行指令完成从Mermaid代码到多种图形文件格式（如PNG, SVG等）的转换[^1]。

安装`mermaid-g @mermaid-js/mermaid-cli

之后，使用mmdc命令并指定输入文件路径以及期望输出的图片格式来生成所需图像文件。例如，要将名为diagram.mmd的Mermaid脚本文件转换为PNG格式的图片，则可运行下面这条命令：

mmdc -i diagram.mmd -o output.png

对于希望更灵活控制输出质量或其他参数的情况，还可以查阅官方文档获取更多选项说明。

#### 利用在线服务转化Mermaid代码至图片
除了本地部署解决方案外，也存在一些无需额外设置就能直接使用的在线平台。这些网站通常提供直观界面让用户粘贴Mermaid源码片段，并即时预览渲染效果；部分还支持导出功能，能够方便快捷地保存高质量的静态图像副本[^3]。

访问类似<https://mermaid.live/>这样的站点，在编辑区键入有效的Mermaid语法规则后点击相应按钮即可下载对应格式的结果文件。