WebMD
本页大纲

图示样例（Mermaid · 文内）

站内 Markdown 里用代码块即可画图：

```mermaid
flowchart LR
  A --> B
```

也可用别名：```mmd。

实现：markdown.ts（shell）+ src/previews/mermaid.ts（bind）。

独立 .mmd 文件（整页渲染，便于单图测试）在同目录下的 mermaid/：

文件 图种
flowchart.mmd 流程图
sequence.mmd 时序图
class.mmd 类图
state.mmd 状态图
er.mmd ER
mindmap.mmd 思维导图
gantt.mmd 甘特
pie.mmd 饼图
standalone.mermaid 扩展名 .mermaid（与 .mmd 同引擎）

1. 流程图 flowchart

Mermaid · FLOW
flowchart LR A[打开页面] --> B{文件类型} B -->|md / csv / pdf…| C[内置预览] B -->|.puml .xmind .drawio| D[统一下载卡] C --> E[中栏阅读]

2. 时序图 sequenceDiagram

Mermaid · SEQ
sequenceDiagram participant U as 用户 participant W as WebMD participant S as SheetJS U->>W: 打开 sample.xlsx W->>S: fetch + XLSX.read S-->>W: workbook W-->>U: x-spreadsheet 网格

3. 类图 classDiagram（简易 UML）

Mermaid · CLASS
classDiagram class TypeAdapter { +prepare() +shell() +bind() +style() } class MermaidAdapter { +bind() } class ExcelAdapter { +shell() +bind() } TypeAdapter <|-- MermaidAdapter TypeAdapter <|-- ExcelAdapter WebMD --> TypeAdapter : 注册表

4. 状态图 stateDiagram

Mermaid · STATE
stateDiagram-v2 [*] --> Idle Idle --> Loading: 打开文件 Loading --> Ready: 解析成功 Loading --> Error: 失败 Ready --> Idle: 软导航离开 Error --> Loading: 重试

5. ER 图 erDiagram

Mermaid · ER
erDiagram PAGE ||--o{ HEADING : contains PAGE ||--o{ ASSET : may_have PAGE { string path string kind } HEADING { string id string text }

6. 思维导图 mindmap

Mermaid · MINDMAP
mindmap root((WebMD 预览)) 文内 Mermaid KaTeX 文件页 PDF.js SheetJS 媒体 旁路资源 preview.pdf poster.jpg

7. 甘特 gantt

Mermaid · GANTT
gantt title 图示能力路线（示意） dateFormat YYYY-MM-DD section 已落地 Mermaid 文内 :done, m1, 2026-01-01, 2026-04-01 Mermaid 独立 .mmd :done, m2, 2026-04-01, 30d section 规划中 PlantUML 文内/文件 :active, p1, after m2, 60d 思维导图文件预览 :p2, after p1, 45d

8. 饼图 pie

Mermaid · PIE
pie showData title 内容类型示意 "Markdown" : 40 "表格" : 15 "PDF/Office" : 20 "媒体" : 15 "其它" : 10

尚未渲染（独立文件 · 下载卡）

样例 格式 现状 说明
sample.puml PlantUML 仅下载 源是文本，可以后文内/prepare→SVG；现在站内不画
sample.drawio diagrams.net 仅下载 可导出 SVG 放仓库用图片页；未接 viewer
sample.mm FreeMind 仅下载 XML，无通用浏览器原生；可导出图
sample.xmind XMind 仅下载 zip 包，完整预览重

「仅下载」= 当前没有 shell/bind，页面只有统一下载卡，不能在中栏当图看。
「未做」（如 Graphviz / Excalidraw 文内）= 还没接适配器；技术上可以嵌 HTML，但 尚未实现。

设计原则：一种类型一套 prepare / shell / bind / style，见 docs/diagrams.md。