阿超 > mermaid-live-editor

mermaid-live-editor

2025-06-16

前端

教学的艺术不在于传授本领，而在于关于激励、唤醒、鼓舞。——第斯多惠

https://github.com/mermaidjs/mermaid-live-editor

Mermaid Live Editor：在线绘制和分享流程图、时序图的神器

在日常开发、产品设计和文档编写中，流程图、时序图、甘特图等可视化图形是表达系统逻辑、业务流程和协作方案的利器。Mermaid 作为一款流行的文本化图形描述工具，在开发者和技术团队中拥有极高的口碑。而 @mermaidjs/mermaid-live-editor 正是将 Mermaid 的强大能力带到了浏览器，让你即开即用、即写即画。

什么是 Mermaid Live Editor？

Mermaid Live Editor 是一个基于浏览器的在线编辑器，专门用于编写和实时渲染 Mermaid 语法的各种图表。你只需要用简单的 Markdown 风格文本描述图表结构，编辑器即可自动渲染为可视化图形，并且支持导出、分享、预览等便捷操作。

主要特性

1. 实时预览与高亮

  • 左侧输入 Mermaid 语法，右侧实时渲染对应图形。
  • 支持语法高亮和错误提示。

2. 丰富的图表类型

  • 流程图（Flowchart）
  • 时序图（Sequence Diagram）
  • 甘特图（Gantt Chart）
  • 类图（Class Diagram）
  • 状态图（State Diagram）
  • 饼图（Pie Chart）
  • 实体关系图（ER Diagram）等

3. 支持导出和分享

  • 一键导出为 PNG、SVG、Markdown 等格式。
  • 生成唯一链接，便于团队成员或同事分享和协作。
  • 支持直接将图表嵌入到文档、博客、Wiki 等平台。

4. 主题与自定义

  • 支持多种配色主题，适配暗色/亮色模式。
  • 可自定义节点样式、箭头、字体等参数。

5. 离线和开源

  • 开源项目，可自行部署私有版本。
  • 支持 PWA，断网也能用。

使用场景

  • 架构设计：用流程图描述后端服务调用链、微服务架构、API 流程等。
  • 产品文档：用时序图梳理用户操作流程，帮助产品经理与开发沟通。
  • 团队协作：通过链接或图片导出，嵌入到 Confluence、Notion、GitHub README 等知识库。
  • 教学演示：课堂或技术分享中快速生成可交互的图表。

快速上手指南

1. 在线体验

访问 Mermaid Live Editor 官网 即可直接在线使用，无需注册和安装。

2. 基本用法示例

流程图

1
2
3
4
5
6
graph TD
    A[开始] --> B{条件判断}
    B -- 是 --> C[处理1]
    B -- 否 --> D[处理2]
    C --> E[结束]
    D --> E

时序图

1
2
3
4
5
sequenceDiagram
    participant 用户
    participant 系统
    用户->>系统: 发起请求
    系统-->>用户: 返回结果

粘贴到编辑器左侧，即可右侧预览。

3. 导出与分享

  • 点击右上角的“Export”或“Share”按钮，可以选择导出图片、SVG 或生成分享链接。
  • 支持复制 Markdown 代码到文档系统。

高级功能

  • 配置参数：可在设置中调整全局渲染参数（如主题、字体、节点间距等）。
  • 语法校验：编辑器会在语法错误时高亮提示。
  • 本地存储：自动保存当前编辑内容，防止误操作丢失。
  • 版本切换：可切换 Mermaid 渲染引擎的版本，适配不同项目需求。

与其他工具对比

特性 Mermaid Live Editor draw.io PlantUML
编辑方式 纯文本，Mermaid语法 拖拽式 纯文本，PlantUML语法
实时预览 支持 支持 支持
支持类型 丰富，重点开发流程图 全面 丰富，偏技术
导出/分享 一键导出/分享 支持 支持
私有部署 支持 支持 支持
上手难度 极低 一般 一般

开源与部署

Mermaid Live Editor 完全开源，代码仓库地址：
https://github.com/mermaidjs/mermaid-live-editor

支持本地部署，适合企业或团队内网环境。只需 clone 源码，安装依赖后运行即可。

1
2
3
4
git clone https://github.com/mermaidjs/mermaid-live-editor.git
cd mermaid-live-editor
npm install
npm start

总结

Mermaid Live Editor 是一款极致简单、高效且强大的在线图表编辑器。开发者、产品经理、运维、测试、文档编写、教学等各种场景下都可以轻松用它来描述和分享各类流程与结构。

如果你在找一款开源、易用、可协作的图表编辑器，不妨试试 Mermaid Live Editor！

项目地址：https://github.com/mermaidjs/mermaid-live-editor

欢迎为项目点亮 ⭐️，让更多人发现它！