马上默 在线轻量工具箱
登录
✎

Mermaid 图表实时预览

左侧写 Mermaid 语法，右侧实时渲染流程图 / 时序图 / 甘特图 / 类图，语法错误即时提示，可导出 SVG 矢量图直接插入文档。

渲染引擎：待加载
源码
预览
输入左侧语法后自动渲染

模板库（10 个场景）

点一下替换左侧源码并立即渲染

结构体检（静态语法估算）

基于源码统计行数、节点与连线数量，并对括号闭合、图表类型与悬空箭头做逐项提示。

    方案管理 · 数值对比 · 导出

    调好的参数可存成方案随时载入，也能生成可分享链接；结果里的数值列会自动画成对比图，并支持导出 CSV / JSON。

    最近方案 暂无

    📊口径说明与常见误填

    语法按官方口径写，渲染与导出才不会翻车。

    图表方向
    flowchart TD 纵向、LR 横向、RL 从右到左；方向关键字写在首行，全图统一。
    节点形状
    [ ] 矩形、{ } 判断菱形、( ) 圆角、(()) 圆形起止，节点文字直接写中文即可。
    连线与标签
    A --> B 实线箭头、A -.-> B 虚线、A ==> B 粗线，线上加文字用 A -->|通过| B。
    时序图要素
    sequenceDiagram 开头，participant 声明角色，A->>B: 消息 表示调用，note over 加注释。
    常见误区
    节点标签含括号、引号等特殊字符时要用双引号包裹（如 A["开始(立即)"]），否则解析报错；本页会即时标出错误位置。

    这个工具解决什么问题

    写文档、讲方案时用 Mermaid「以代码写图」比拖拽工具更快：改一个字、图自动重排，还能进版本控制。本页左侧输入语法、右侧实时渲染流程图 / 时序图 / 甘特图 / 类图，语法错误即时提示，渲染成功后可一键导出 SVG 矢量图；引擎在浏览器本地加载，内容不上传。

    三条画图铁律

    ① 先跑示例再动手：点「流程图示例 / 时序图示例 / 甘特图示例」拿到可运行模板，在其基础上改，比从空白开始少踩一半语法坑。

    ② 报错先看提示再改：渲染失败时预览区顶部标红错误信息，多数是特殊字符没加引号或箭头写错，对照修正后右侧立即重渲。

    ③ 要进 PPT 就导 SVG：贴进 Figma、PPT 或不支持 mermaid 的平台时，用「导出 SVG」下载矢量文件，缩放不失真。

    怎么用

    1. 第 1 步 · 输入或选择 Mermaid 语法
      左侧源码区直接书写，或点顶部芯片载入流程图 / 时序图 / 甘特图模板，也可点「载入示例」。
    2. 第 2 步 · 查看实时渲染与报错
      右侧画布随输入即时重绘；语法错误在预览区顶部标红提示，改对即恢复。
    3. 第 3 步 · 导出 SVG 或复制源码
      渲染成功后点「导出 SVG」下载矢量图，或「复制源码」拿去贴进 Markdown 的 mermaid 代码块。
    4. 第 4 步 · 引擎加载失败时重试
      首次使用需联网加载渲染引擎，状态条显示失败时点「重试加载引擎」即可。

    更新记录

    • v1.0 2026-11-02
    • 2026-11-02 上线首个版本
    • 2026-11-02 完善结果展示

    常见问题

    mermaid 在线编辑器中文支持吗？
    支持。节点文字可直接写中文，如 A[开始]；本页渲染引擎在浏览器本地加载，输入内容不上传服务器。
    mermaid 流程图怎么画？
    以 flowchart TD（纵向）或 LR（横向）开头，用 --> 连接节点，[] 表矩形、{} 表判断、(()) 表起止。点「流程图示例」即可看到完整写法。
    mermaid 语法时序图有示例吗？
    点「时序图示例」得到 sequenceDiagram 模板：participant 声明角色，A->>B: 消息 表示调用，note over 加注释，右侧即时渲染。
    markdown 怎么插入 mermaid 图表？
    用代码块包裹：三个反引号 mermaid 换行写语法再闭合，GitHub、GitLab、Typora 等均原生支持渲染；不支持的环境可导出 SVG 后以图片方式插入。
    有 mermaid 导出 SVG 工具吗？
    本页即可：渲染成功后点「导出 SVG」下载矢量文件，可无损缩放并嵌入网页或文档，也可在 Figma / PPT 中继续编辑。

    💬 留言板 0

    全部留言需审核通过后展示
    💬

    还没有留言，来抢沙发吧！

    ✍️ 说点什么
    0 / 500
    图形验证码

    🔗 相关工具

    📝 Changelog 生成器发版日志与文档配图一起整理 → 📐 LaTeX 公式编辑预览器文档里的公式也能实时渲染 → 📖 OpenAPI 文档查看器接口文档在线浏览 → 🏷️ JSON-LD 结构化数据生成器页面结构化标记在线生成 →
    👣 做完这一步，顺便看看
    🏛️ 凯撒密码解密 凯撒密码解密 ：1~25 位位移加解密、ROT13 一键转换… → 🔤 乱码转换器在线修复 乱码转换器在线 ：把“锟斤拷”“�”“涓枃”“😀”等乱… → 📸 代码截图美化工具 在线代码转图片工具：粘贴或输入代码（支持 JavaScrip… → 🎨 WCAG 对比度检测工具 在线颜色对比度检测工具：输入前景文字色与背景色（支持 #he… →
    全部工具 →