Mermaid 图表编辑器
完全免费的专业级 Mermaid 图表编辑器，支持实时预览、多种模板导出及手绘风格切换。
编辑器字符: 97
预览
100%
正在初始化 Mermaid 编辑器...
使用说明
基本操作
- •在左侧编辑器中输入 Mermaid 代码
- •图表默认自动实时预览，桌面端也可手动点击"预览"
- •使用"主题"下拉菜单切换图表颜色主题
- •使用"风格"下拉菜单切换风格（手绘风格目前仅支持部分图表）
- •使用模板快速开始创建常用图表类型
- •点击"清空"按钮清除编辑器内容
- •支持导入和导出 .mmd 文件
缩放与导航
- •使用缩放控制栏调整图表大小
- •点击🪟按钮使图表适应窗口大小
- •点击🎯按钮重置视图到默认状态
- •点击滚轮模式切换按钮，选择滚轮用于缩放或滚动
- •拖拽图表进行平移
- •点击预览区域的⛶按钮进入预览全屏模式
- •点击工具栏的全屏按钮使整个工具区域全屏
快捷键
- •Ctrl/Cmd + Enter：预览图表
- •Ctrl/Cmd + S：保存到本地存储
- •Ctrl/Cmd + /：切换行注释
- •ESC：退出全屏模式
导出选项
- •导出为 SVG 矢量图
- •导出为 PNG 位图
- •复制 SVG 代码到剪贴板
- •生成分享链接
什么是 Mermaid？
Mermaid 是一种基于 JavaScript 的图表绘制工具，它允许你使用简单的文本和代码来生成复杂的图表。通过类似 Markdown 的语法，你可以快速创建流程图、序列图、类图、状态图、实体关系图（ER图）、用户旅程图、甘特图、饼图、象限图、需求图、思维导图、桑基图、时间线图以及 Git 图等。
它的核心理念是“代码即图表”（Diagrams as Code），这使得图表可以像代码一样进行版本管理，非常适合开发者和文档撰写者使用。
为什么选择本编辑器？
- 完全本地预览，隐私安全
- 支持 手绘风格，更具个性
- 实时语法校验，即时反馈
- 一键导出 SVG/PNG 格式
- 内置多种常用图表模板
- 支持深色模式与多种主题
关于此工具
Mermaid 图表编辑器是一款完全免费的工具，为需要快速生成专业架构图和流程图的用户设计的。它不仅支持标准的 Mermaid 语法，还提供了独特的手绘风格（Hand-drawn style），让你的图表更具个性。所有编辑都在本地完成，支持通过 URL 分享加密的图表数据，兼顾了便捷性与隐私。
功能特点
- 📝 左侧编辑 + 右侧实时预览，错误提示
- 📤 导出 SVG/PNG，复制 SVG
- 🔗 复制分享链接（LZ-String 压缩在 URL hash 中）
- 📚 常用模板：流程图/时序图/类图/状态图/甘特图/ER图/饼图/思维导图/时间线等
- 💾 自动保存 LocalStorage + 从 URL 还原
- 🌓 主题自适应（可覆盖），支持经典/手绘风格切换
- 🎨 多种主题选择：浅色/深色/森林/中性/基础
- 🖱️ 缩放控制：适应窗口/重置视图/滚轮模式切换
- ⚡ 输入防抖预览 + 大图保护
- ⌨️ 快捷键：Ctrl/Cmd+Enter 预览、Ctrl/Cmd+S 保存、Ctrl/Cmd+/ 注释、ESC 退出全屏
- 🔄 清空按钮：一键清除编辑器内容
- 🖥️ 双全屏模式：预览全屏和工具区域全屏