Mermaid Design

快速开始

mermaid.design 是一个免费的在线 Mermaid 图表编辑器。在左侧编写 Mermaid 语法，右侧实时渲染出图表。所有处理都完全在浏览器中完成——你的图表永远不会离开你的设备。

创建你的第一个图表

  1. 打开 mermaid.design——编辑器会加载一个示例流程图。
  2. 在左侧窗格中编辑 Mermaid 代码，例如：
flowchart TD
    A[开始] --> B{准备好了吗?}
    B -- 是 --> C[发布]
    B -- 否 --> D[继续写码]
  1. 预览会随输入自动重新渲染（带短暂防抖）。如果语法有误，最后一张正确的图表会保留在错误提示条后面，代码编辑器会标记出错的行。

工作台

编辑器是一个三窗格工作台：

  • 代码编辑器（左）——基于 Monaco（与 VS Code 相同的内核），带 Mermaid 语法高亮、行内错误标记，以及格式化/复制/清空工具栏。可以折叠为窄图标条，也可以拖动分隔条调整宽度。
  • 预览（中）——实时渲染的图表。拖动平移，Ctrl/⌘ + 滚轮缩放，双击适应视图。浮动工具栏提供缩放控制和画布背景切换（点阵 / 纯白 / 棋盘格）。
  • 主题面板（右）——一键预设、细粒度主题变量和基于种子色的主题生成，详见下文。

在窄屏设备上，工作台会变为单窗格，底部有 代码 / 预览 / 主题 标签栏。

渲染模式

使用导航栏中的分段控件切换图表的渲染方式：

  • Official——标准 Mermaid SVG 输出，与 Mermaid 引擎的渲染结果完全一致。
  • ASCII——把图表转成字符画，可以粘贴到代码注释、文档或终端里。见 ASCII 渲染。

渲染模式是 URL 的一部分，可以收藏或分享指向特定模式的链接。

主题

所有图表都以 base 主题加 70 多个可编辑主题变量渲染：

  • 预设——11 个 Mermaid 内置主题（Default、Neutral、Forest、Dark、Base 等）外加设计师预设，每个都带迷你预览。
  • 主题变量——按分组微调颜色、边框和字体，支持搜索。
  • 生成——从一个种子色派生出整套主题，支持明暗两种模式。

自动保存

编辑器会把你的代码、主题和布局持久化到浏览器本地存储。关掉标签页稍后再回来——图表还在。不会有任何内容上传到服务器。

下一步