Mermaid Live Editor 在线图表编辑器

什么是 Mermaid Live Editor？

Mermaid Live Editor 是一个基于 Web 的开源图表编辑器，专为 Mermaid 语法设计。它允许用户在浏览器中实时编写、预览和导出各种类型的流程图、时序图、甘特图、类图等。Mermaid Live Editor 适合开发者、产品经理、设计师等需要快速绘制和分享图表的场景。

特性

• 所见即所得：左侧编写 Mermaid 代码，右侧实时渲染图表，极大提升效率。
• 多种图表类型：支持流程图、时序图、甘特图、类图、状态图、实体关系图等多种常用图表。
• 一键导出：支持将图表导出为 PNG、SVG 等格式，方便嵌入文档或分享。
• 开源免费：完全开源，支持本地部署和二次开发。
• 主题切换：支持多种主题风格，满足不同视觉需求。
• 代码分享：可生成带有图表内容的分享链接，便于团队协作。

优势

• 极简上手：无需安装客户端，打开网页即可使用，适合所有技术水平用户。
• 实时预览：修改代码后立即看到图表效果，所见即所得。
• 高度可定制：支持 Mermaid 的全部语法和配置，满足复杂场景需求。
• 社区活跃：由 Mermaid 官方维护，社区活跃，持续更新和优化。
• 安全可靠：可本地部署，数据不出本地，适合企业和隐私场景。

应用场景

• 技术文档：在技术文档、Wiki、README 中嵌入结构化图表，提升可读性。
• 产品设计：产品经理快速绘制流程图、用户旅程图，辅助需求沟通。
• 团队协作：通过分享链接，团队成员可共同编辑和讨论图表内容。
• 教学培训：教师和讲师用来演示算法、流程、系统架构等。
• 项目管理：用甘特图、状态图等可视化项目进度和任务分配。

安装与使用

在线使用

无需安装，直接访问 Mermaid Live Editor 在线版 即可开始绘图。

本地部署

如果需要在本地或企业内网部署，可参考以下步骤：

1. 克隆项目

git clone https://github.com/mermaid-js/mermaid-live-editor.git
cd mermaid-live-editor

2. 安装依赖

npm install

3. 启动开发服务器

npm start

默认会在本地 localhost:8080 启动服务，浏览器访问即可使用。

4. 构建生产版本

npm run build

构建后可将 dist 目录部署到任意静态服务器。

5. Docker 方式一键运行

如果你更习惯使用 Docker，可以通过以下命令一键启动 Mermaid Live Editor：

docker run -d --name mermaid-live-editor -p 8080:80 ghcr.io/mermaid-js/mermaid-live-editor:latest

启动后，直接访问 http://localhost:8080 即可使用。

如需自定义端口或挂载配置，可根据实际需求调整 -p 参数或添加 -v 挂载参数。

导出与分享

• 编辑完成后，可通过右上角按钮导出为 PNG、SVG 等格式。
• 点击“分享”按钮可生成带内容的链接，便于团队协作。

示例

graph TD
    A[用户输入 Mermaid 代码] --> B{Mermaid Live Editor 渲染}
    B --> C[实时预览图表]
    B --> D[导出 PNG/SVG]
    B --> E[生成分享链接]

相关链接

• Mermaid 官方文档
• Mermaid Live Editor GitHub
• Mermaid Live Editor 在线体验