Modern Mermaid - Mermaid图表在线编辑生成器，代码绘制流程图时序图甘特图，实时预览导出SVG PNG，开发者和产品经理必备工具
项目简介
Modern Mermaid 是一个基于 Mermaid.js 的现代化在线图表编辑器。Mermaid 是一个用代码生成图表的开源工具，通过简单的文本描述就能生成专业的图表，非常适合开发者在 Markdown 文档中嵌入图表。但官方编辑器功能简单，Modern Mermaid 在此基础上进行了大幅增强，提供了更现代的界面、更丰富的功能。用户在左侧编辑 Mermaid 代码，右侧实时预览生成的图表，所见即所得。支持流程图、时序图、甘特图、类图、状态图、饼图、思维导图、用户旅程图等多种图表类型。还提供主题切换、样式自定义、代码模板、历史版本、导出 SVG/PNG/PDF、分享链接等实用功能。无论是编写技术文档、绘制系统架构、设计业务流程、还是制作项目计划，Modern Mermaid 都能让你用代码高效生成精美图表。
项目收录于「中国独立开发者项目列表」，旨在为开发者和产品经理提供一个功能强大、体验优秀的 Mermaid 在线图表编辑器。
核心功能
- 流程图（Flowchart）
- 时序图（Sequence）
- 甘特图（Gantt）
- 类图（Class）
- 状态图（State）
- 饼图（Pie）
- 思维导图（Mindmap）
- 用户旅程图（Journey）
- 实体关系图（ER）
- Git 图（GitGraph）
- C4 模型图
- 看板图（Kanban）
- 时间线图（Timeline）
- 象限图（Quadrant）
- 桑基图（Sankey）
- 包图（Package）
- 语法高亮
- 自动补全
- 代码折叠
- 行号显示
- 错误提示
- 代码格式化
- 多标签编辑
- Vim 模式
- 实时渲染
- 缩放控制
- 平移查看
- 全屏预览
- 网格背景
- 缩放适应
- 导出预览
- 高清渲染
- 默认主题
- 深色主题
- 森林主题
- 中性主题
- 基础主题
- 自定义主题
- 颜色配置
- 字体配置
- 导出 SVG
- 导出 PNG
- 导出 PDF
- 导出 Mermaid 代码
- 导出 Markdown
- 分享链接
- 嵌入代码
- 二维码分享
- 图表模板
- 示例库
- 历史记录
- 本地保存
- 云端同步
- 快捷键
- 完全免费
- 持续更新
产品特色
代码绘图：用文本代码生成专业图表
实时预览：编辑即时渲染，所见即所得
类型丰富：支持 15+ 种图表类型
现代界面：美观易用的现代化编辑器
导出方便：支持 SVG/PNG/PDF 多种格式
模板丰富：内置大量图表模板和示例
完全免费：核心功能免费使用
使用方法
打开 Modern Mermaid 网站
选择图表类型或从模板开始
在左侧编辑器输入 Mermaid 代码
右侧实时预览生成的图表
调整主题和样式（可选）
修改代码直到图表满意
导出为 SVG/PNG/PDF 或复制代码
嵌入到文档或分享给他人
适用场景
技术文档：在 Markdown 中嵌入流程图
系统架构：绘制系统架构和模块关系
业务流程：设计业务流程和工作流
项目管理：用甘特图展示项目计划
数据库设计：绘制 ER 实体关系图
API 设计：用时序图描述接口调用
知识整理：用思维导图整理知识结构
项目地址
🌐 官方网站：https://modern-mermaid.live