图表指南

三个引擎都以 WASM 跑在应用内部，文档不需要联网。没有要安装的引擎，也没有要调用的远程服务。

围栏写法

```mermaid
flowchart LR
  open --> parse --> render
```

```dot
digraph { client -> api -> db }
```

```d2
direction: right
client -> api: request
api -> db: query
```

图表卡片

每个围栏块渲染成一张卡片：

• 左上角是引擎徽章（mermaid 紫 / dot 绿 / d2 琥珀）
• 徽章旁是源码首行作标题，以及源码行号——出错时直接知道去哪改
• 右上角两个按钮：复制 SVG、打开查看器

查看器

点卡片或 zoom 打开全屏查看器：滚轮缩放、拖拽平移、复制 SVG、复制源码、esc 关闭。

报错不会空白整页

引擎报错时，错误信息落在图表卡片内部，带上源码行号；页面其余部分照常渲染。常见原因：

• 围栏标签拼写（mermaid / dot / graphviz / d2，大小写不敏感）
• 该图类型未加载：mermaid 按图类型按需分块，首次渲染某类型会多一次本地加载
• 语法错误：看卡片里的行号，回源码视图定位

渲染缓存

渲染结果按 SVG 字节数计入缓存（设置面板可见大小、可一键清空）。同一文档反复打开时，图表不必重新渲染。

原始 HTML 的边界

文档里的原始 HTML 只放行一个短的固定标签表：details、summary、kbd、sub、sup、br、hr；其余全部丢弃——文档内容碰不到应用自身的界面。