thewintershadow/mermaid

Mermaid Editor

一个基于浏览器的Mermaid图表编辑器，支持实时预览。无需后端和数据库，仅通过nginx提供静态文件服务。可作为单个Docker镜像部署或部署到GitHub Pages。

快速开始

bash
docker run -d -p 8080:8080 docker.xuanyuan.run/thewintershadow/mermaid:latest

打开 http://localhost:8080 即可使用。

或使用托管版本：https://thewintershadow.github.io/Mermaid/%E3%80%82

功能特性

编辑器

• 实时预览 — 图表在您输入时实时渲染（400ms防抖）
• 自动格式化 — 支持流程图的图表感知缩进、序列图、类图/ER图的括号嵌套、思维导图的相对缩进、甘特图等
• 代码检查 — 警告尾随空格、制表符/空格混用和连续空行
• Tab键 — 插入4个空格（无焦点陷阱）
• 自定义文件名 — 标题栏中的可编辑文件名字段，用于所有保存/导出操作
• 本地存储 — 编辑器内容和文件名在会话间持久保存

文件操作

• 打开 — 通过按钮或拖放加载.mmd、.mermaid、.md或.txt文件（自动填充文件名）
• 保存为.mmd — 将图表源文件下载为.mmd文件
• 导出SVG — 带XML声明和正确命名空间的矢量导出
• 导出PNG — 通过基于iframe的画布渲染实现2倍分辨率光栅图（避免Mermaid v11中的foreignObject污染问题）

预览

• 平移 — 点击并拖动以平移预览
• 缩放 — 鼠标滚轮围绕光标缩放，或使用+/-按钮
• 捏合缩放 — 触控板和触摸捏合手势
• 适配 — 将图表缩放到适合预览窗格
• 1:1 — 重置为100%缩放并居中
• 缩放显示 — 工具栏中显示当前缩放百分比

其他特性

• 9个示例图表 — 流程图、序列图、类图、状态图、ER图、甘特图、饼图、Git图、思维导图
• 可调整大小的窗格 — 拖动分隔线调整编辑器/预览比例
• 响应式设计 — 在窄屏幕上垂直堆叠
• 深色主题 — Catppuccin Mocha配色方案
• 健康检查 — 用于容器编排的/healthz端点

键盘快捷键

Docker部署

拉取并运行

bash
docker pull docker.xuanyuan.run/thewintershadow/mermaid:latest
docker run -d -p 8080:8080 --name mermaid-editor docker.xuanyuan.run/thewintershadow/mermaid:latest

本地构建

bash
docker build -t mermaid-editor .
docker run -d -p 8080:8080 docker.xuanyuan.run/mermaid-editor

镜像详情

CI/CD

推送到main分支时运行两个GitHub Actions工作流：

1. Docker Hub（docker.yml）——构建多架构镜像，推送到https://hub.docker.com/r/thewintershadow/mermaid%EF%BC%8C%E5%B9%B6%E5%B0%86%E6%AD%A4README%E5%90%8C%E6%AD%A5%E4%B8%BADocker Hub描述。使用vX.Y.Z标签进行版本化发布。
2. GitHub Pages（pages.yml）——将app/目录部署为静态网站。

GitHub Pages设置

1. 进入仓库的设置 > Pages
2. 将源设置为GitHub Actions
3. 推送到main分支——网站将自动部署

编辑器将在https://thewintershadow.github.io/Mermaid/可用。

所需GitHub密钥

技术栈

• Mermaid.js v11（通过CDN，cdn.jsdelivr.net）
• 原生JS/CSS/HTML——无框架，无构建步骤
• nginx 1.27——支持gzip压缩、安全头、SPA友好配置

许可证

MIT