用代码画图
Diagram as Code
用自带的解析器和布局引擎，边打字边渲染 Mermaid 流程图、时序图和饼图，明确列出它支持哪些语法，导出 SVG 或 PNG。
左边 Mermaid 文本，右边图，边打边更新。解析器、布局和渲染器是本站自己的，不是 Mermaid 库，所以支持的语法在页面上完整列出——三种图，每一种精确列出读取的构造。
Mermaid 代码
预览
支持的语法（别的都会报成带行号的错误）
流程图 — graph / flowchart
- 方向 TD、TB、LR、RL、BT
- 形状 [ ], ( ), ([ ]), [[ ]], [( )], (( )), > ], { }, {{ }}
- 连线 -->, ---, -.->, -.-, ==>, ===
- 标签 -->|文字|, -- 文字 -->, -. 文字 .->, == 文字 ==>
- A --> B --> C, A & B --> C
- subgraph 名称 [标题] … end（可以嵌套）
- style, classDef, class, :::类名
- %% 注释, ; 分隔
不支持：click、linkStyle、direction、<-->·--o·--x 箭头、Markdown 字符串
时序图 — sequenceDiagram
- participant A as 名称, actor B
- ->>, -->>, ->, -->, -x, --x, -), --)
- ->>+B / ->>-B, activate / deactivate
- Note left of · right of · over A,B
- loop, alt / else, opt … end
- autonumber
不支持：par、critical、break、rect、box、create/destroy、links
饼图 — pie
- pie [showData] [title 标题]
- "名称" : 数值
类图、状态图、ER 图、甘特图、思维导图这些还画不了。甘特图另有一个工具。
怎么用
从示例开始
流程图、时序图和饼图各有一个示例，用到了解析器认得的大部分东西。改示例比对着语法表从头写快。
按行号读错误
支持的语法之外的东西会被拒绝，附行号和错在哪里，而不是留一张空白画布让你二分排查。
导出或打印
SVG 让文字保持可选中，缩放干净；2× 的 PNG 是幻灯片或聊天消息的安全选择。
常见问题
哪些图类型能用？
流程图（graph / flowchart）、sequenceDiagram 和 pie。类图、状态图、ER、gantt、gitGraph、mindmap 和其余的会在错误里被点名，而不是含糊地失败——甘特图在本站有单独的工具。
我的图在 mermaid.live 上能用，这里不行
很可能是页面列表之外的构造——`click`、`linkStyle`、subgraph 里的 `direction`、`<-->`、`--o` 和 `--x` 箭头、YAML front matter，或者 Markdown 字符串。错误会点出是哪一个，那份列表就是完整的约定。
中文文字排得正确吗？
正确。盒子宽度按中日韩字符全角计算，所以中文标签不会像在假定每个字符都是半角的渲染器里那样溢出节点。
我的图会被发到哪里吗？
不会。解析和渲染在页面里进行，草稿保留在这个浏览器里。不上传，当这张图是你的内部架构时，这一点很要紧。
可以从这些接进来
接下来
这些工具吃得下当前工具的产出，结果可以直接送过去。
甘特图制作
Gantt Chart Builder
把手输或粘贴 CSV 得来的任务表画成日、周、月刻度的甘特图，带依赖箭头、里程碑、今日线和周末底色，导出 SVG、PNG 或直接打印。
Markdown 编辑器
Markdown Editor
边写边预览 Markdown，可导出渲染后的 HTML，支持 GFM 表格和任务列表。
SVG 优化压缩
SVG Optimiser
清掉编辑器留下的冗余、合并变换、缩减路径精度，并把渲染结果并排对比。
待办清单
Todo List
在浏览器里维护一份带截止日期、标签、以键盘为主的清单，可导出成 Markdown。
Base64 编码解码
Base64 Encoder & Decoder
对文本和文件做 Base64 与 Base64URL 编解码，UTF-8 处理正确。
图片抠图去背景
Background Remover
在 OKLab 色彩空间中抠掉纯色或均匀背景，输出透明 PNG，并可用画笔修补边缘。