用代码画图?Mermaid + Docker解锁数据可视化新姿势
一、什么是 Mermaid？
Mermaid 是一个基于 JavaScript 的图表工具，支持用 Markdown 语法生成交互式图表（如流程图、序列图、甘特图、类图等）。它广泛用于文档编写、技术演示和博客中。
二、使用官方 Docker 镜像
1. 拉取官方镜像
# 拉取最新版 Mermaid CLI 镜像（基于 Alpine Linux）
docker pull mermaid/mermaid-cli
# 或者拉取完整版镜像（包含更多工具）
docker pull mermaid/mermaid2. 运行容器
# 运行交互式终端（基础版）
docker run -it --rm mermaid/mermaid-cli
# 运行容器并挂载当前目录（方便文件操作）
docker run -it -v $(pwd):/data mermaid/mermaid-cli3. 验证安装
在容器中执行：
mermaid --version # 查看版本号三、自定义 Docker 镜像
1. 创建Dockerfile
dockerfile# 使用 Node.js 作为基础镜像
FROM node:18-alpine
# 安装 Mermaid CLI
RUN npm install -g mermaid
# 设置工作目录
WORKDIR /data
# 暴露端口（可选）
EXPOSE 8080
# 启动命令（示例）
CMD ["mermaid", "init"]2. 构建镜像
docker build -t my-mermaid-image .3. 运行容器
# 挂载本地目录并运行
docker run -it -v $(pwd):/data my-mermaid-image四、通过 Docker Compose 管理
1. 编写docker-compose.yml
yamlversion: '3'
services:
mermaid:
image: mermaid/mermaid-cli
volumes:
- ./docs:/data
ports:
- "8080:8080"2. 启动服务
bashdocker-compose up -d五、在容器中使用 Mermaid
1. 生成图表文件
# 将 Markdown 文件转换为 PNG
mermaid ./input.md --output ./output.png
# 生成 PDF
mermaid ./input.md --pdf ./output.pdf2. 通过 Web 服务渲染
若需通过 HTTP 提供图表渲染功能，可以使用以下步骤：
- 安装 Express 和 Mermaid 服务器：
bash
npm install express mermaid- 创建 server.js：
javascript
const express = require('express');
const app = express(); const mermaid = require('mermaid');
pp.get('/render', (req, res) => { const code = req.query.code;
const svg = mermaid.render(code); res.send(svg); });
app.listen(3000, () => console.log('Server running on port 3000'));- 构建镜像并运行：
bash
docker build -t mermaid-server . docker run -p 3000:3000 mermaid-server六、常见问题和解决方案
- 权限问题
- 在挂载卷时添加用户权限：
bash
docker run -it -u $(id -u):$(id -g) -v $(pwd):/data mermaid/mermaid-cli- 图表不渲染
- 确保输入文件路径正确，且 Mermaid 语法无误。
- 服务端口冲突
- 修改容器端口映射（例如 EXPOSE 8081）。
七、高级用法
1. 结合 Node.js 项目
在项目中通过脚本调用 Mermaid：
javascriptconst { exec } = require('child_process');
exec('mermaid input.md -o output.png', (err, stdout, stderr) => {
console.log(err ? 'Error' : 'Success');
});2. 使用 Docker Swarm 部署
通过 docker stack deploy 在集群中管理多节点服务。
八、参考资源
- Mermaid git 页面：
https://github.com/mermaid-js/mermaid-cli
- Mermaid 文档：
https://mermaid.nodejs.cn/intro/getting-started.html