当前位置:首页 > 技术分析 > 正文内容

用代码画图?Mermaid + Docker解锁数据可视化新姿势

ruisui881个月前 (03-24)技术分析11

一、什么是 Mermaid?

Mermaid 是一个基于 JavaScript 的图表工具,支持用 Markdown 语法生成交互式图表(如流程图、序列图、甘特图、类图等)。它广泛用于文档编写、技术演示和博客中。

二、使用官方 Docker 镜像

1. 拉取官方镜像

# 拉取最新版 Mermaid CLI 镜像(基于 Alpine Linux)
docker pull mermaid/mermaid-cli

# 或者拉取完整版镜像(包含更多工具)
docker pull mermaid/mermaid

2. 运行容器

# 运行交互式终端(基础版)
docker run -it --rm mermaid/mermaid-cli

# 运行容器并挂载当前目录(方便文件操作)
docker run -it -v $(pwd):/data mermaid/mermaid-cli

3. 验证安装

在容器中执行:

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

yaml
version: '3'
services:
  mermaid:
    image: mermaid/mermaid-cli
    volumes:
      - ./docs:/data
    ports:
      - "8080:8080"

2. 启动服务

bash
docker-compose up -d

五、在容器中使用 Mermaid

1. 生成图表文件

# 将 Markdown 文件转换为 PNG
mermaid ./input.md --output ./output.png

# 生成 PDF
mermaid ./input.md --pdf ./output.pdf

2. 通过 Web 服务渲染

若需通过 HTTP 提供图表渲染功能,可以使用以下步骤:

  1. 安装 Express 和 Mermaid 服务器
bash
npm install express mermaid
  1. 创建 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'));
  1. 构建镜像并运行
bash
docker build -t mermaid-server . docker run -p 3000:3000 mermaid-server

六、常见问题和解决方案

  1. 权限问题
  2. 在挂载卷时添加用户权限:
bash
docker run -it -u $(id -u):$(id -g) -v $(pwd):/data mermaid/mermaid-cli
  1. 图表不渲染
  2. 确保输入文件路径正确,且 Mermaid 语法无误。
  3. 服务端口冲突
  4. 修改容器端口映射(例如 EXPOSE 8081)。

七、高级用法

1. 结合 Node.js 项目

在项目中通过脚本调用 Mermaid:

javascript
const { 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

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2978.html

标签: res.render
分享给朋友:

“用代码画图?Mermaid + Docker解锁数据可视化新姿势” 的相关文章

GitLab-创建分支

描述分支是独立的生产线,是开发过程的一部分。分支的创建涉及以下步骤。创建一个分支步骤1-登录您的GitLab帐户,然后转到“ 项目”部分下的项目。步骤2-要创建分支,请单击“ 存储库”部分下的“ 分支”选项,然后单击“ 新建分支”按钮。步骤3-在“ 新建分支”屏幕中,输入分支的名称,然后单击“ 创建...

代码分支规范

一.gitflow工作流说明:主分支:master,稳定版本代码分支,对外可以随时编译发布的分支,不允许直接Push代码,只能请求合并(pull request),且只接受hotfix、release分支的代码合并。gitlab上做限制。热修复分支:hotfix,针对现场紧急问题、bug修复的代码分...

「云原生」Containerd ctr,crictl 和 nerdctl 命令介绍与实战操作

一、概述作为接替Docker运行时的Containerd在早在Kubernetes1.7时就能直接与Kubelet集成使用,只是大部分时候我们因熟悉Docker,在部署集群时采用了默认的dockershim。在V1.24起的版本的kubelet就彻底移除了dockershim,改为默认使用Conta...

学前端,这30个CSS选择器,你必须熟记

你学会了基本的id,class类选择器和descendant后代选择器,然后就觉得完事了吗?如果这样,你就会错过许多灵活运用CSS的机会。虽然本文提到的许多选择器都属于CSS3,并且只能在现代的浏览器中使用,但学会这些是大有好处的。什么是CSS选择器呢?每一条css样式定义由两部分组成,形式如下:[...

最快清除数组空值?分享 1 段优质 JS 代码片段!

本内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!大家好,我是大澈!本文约 600+ 字,整篇阅读约需 1 分钟。今天分享一段优质 JS 代码片段,用最简洁的代码清除了数组中的空值。老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!const arr...

Vue进阶(幺叁捌):vue路由传参的几种基本方式

1、动态路由(页面刷新数据不丢失)methods:{ insurance(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`,...