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

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

ruisui883个月前 (03-24)技术分析95

一、什么是 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解锁数据可视化新姿势” 的相关文章

Vue中路由router的基本使用

??本文开始我们来给大家介绍在Vue中非常重要的一个内容,就是路由Router什么是路由后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特...

三勾知识付费(PHP+vue3)微信小程序平台+SAAS+前后端源码

项目介绍三勾小程序商城基于thinkphp8+element-plus+uniapp打造的面向开发的小程序商城,方便二次开发或直接使用,可发布到多端,包括微信小程序、微信公众号、QQ小程序、支付宝小程序、字节跳动小程序、百度小程序、android端、ios端。软件架构后端:thinkphp8 管理端...

突发!微信全面封禁字节跳动旗下办公产品飞书

日前,字节跳动旗下办公套件飞书发布官方公告称,飞书相关域名无故被微信全面封禁,并且被单方面关闭微信分享API接口。和讯科技对此进行了尝试,发现“feishu”相关域名链接在微信内均无法打开,显示“如需浏览,请长按网址复制后使用浏览器访问”,而在飞书内也无法直接跳转微信分享,显示“未获得分享权限”。据...

深入理解同步/异步与阻塞/非阻塞区别

编者按:高可用架构分享及传播在架构领域具有典型意义的文章,本文由「那谁」投稿。转载请注明来自高可用架构公众号「ArchNotes」。「那谁」,codedump.info 博主,多年从事互联网服务器后台开发工作。几年前曾写过一篇描写同步/异步以及阻塞/非阻塞的文章,最近再回头看,还存在一些理解和认知误...

Intel Rapid Storage Technology (RST) 20.0.0.1038.3 驱动程序

Intel Rapid Storage Technology (RST) 20.0.0.1038.3 是一种软件包,旨在为支持的操作系统提供高性能的串行 ATA (SATA) 和 SATA RAID 功能。它提供了一种简便的方式来管理和优化硬盘驱动器的性能,并支持 RAID 配置,以提高数据安全性和...

tcp协议的六个标识位

6个标识位:1.URG 紧急指针,告诉接收TCP模块紧要指针域指着紧要数据。2.ACK 置1时表示确认号(为合法,为0的时候表示数据段不包含确认信息,确认号被忽略。3.PSH 置1时请求的数据段在接收方得到后就可直接送到应用程序,而不必等到缓冲区满时才传送。4.RST 置1时重建连接。如果接收到RS...