mermaid生成图片
时间: 2025-05-30 20:04:52 浏览: 106
### 如何使用 Mermaid 生成图表图片
Mermaid 是一种基于文本的图表绘制工具,支持多种类型的图表,如流程图、时序图、甘特图等[^1]。为了生成静态图片文件(例如 PNG 或 SVG),可以通过以下方法实现:
#### 方法一:利用在线编辑器导出图片
许多在线平台集成了 Mermaid 功能,可以直接渲染图表并导出为图片格式。以下是具体操作方式:
- 打开一个支持 Mermaid 的在线编辑器,例如 [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/)。
- 将 Mermaid 文本粘贴到编辑区域中。
- 渲染完成后,在页面上找到“Export”选项,通常可以下载为 PNG、SVG 或其他格式。
#### 方法二:借助 HTML 和 JavaScript 实现本地生成
如果希望在本地环境中生成图片,可以通过嵌入 Mermaid 库的方式完成。以下是基本步骤:
1. 创建一个 HTML 文件,并引入 Mermaid 的 JavaScript 库。
2. 定义 Mermaid 图表代码块。
3. 调用 `mermaid.mermaidAPI.render` 函数生成图像数据 URL 并保存为图片。
下面是一个完整的示例代码片段:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mermaid Chart Export</title>
<!-- 引入 Mermaid JS -->
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
const chartDefinition = `
sequenceDiagram
participant A
participant B
A->>B: Hello, world!
`;
mermaid.initialize({ startOnLoad: true });
mermaid.mermaidAPI.render('sequenceDiagram', chartDefinition).then(svg => {
document.getElementById('chart').innerHTML = svg;
// 下载为图片
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)));
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const link = document.createElement('a');
link.href = canvas.toDataURL("image/png");
link.download = "diagram.png";
link.click();
};
}).catch(err => console.error(err));
</script>
</body>
</html>
```
此脚本会将生成的 Mermaid 图形转换为 PNG 格式的图片并自动触发下载功能。
#### 方法三:使用命令行工具或 API 接口
对于更高级的需求,还可以考虑通过 CLI 工具或者 RESTful API 来批量处理 Mermaid 图片生成任务。例如,某些第三方服务提供专门用于 Mermaid 到图片转化的功能。
---
### 总结
无论是通过在线编辑器快速生成还是采用编程手段自定义工作流,Mermaid 都提供了灵活的方式来满足用户的多样化需求。其简洁语法设计与强大的社区支持使其成为现代文档撰写和技术交流中的重要辅助工具之一[^3]。
阅读全文
相关推荐


















