Mermaid 图表引擎
将自然语言描述转换为 Mermaid 图表，通过本地 Web 面板实时预览。支持 16 种图表类型，覆盖流程图、时序图、ER 图、架构图、甘特图等产品和技术场景。零依赖 Python stdlib。
FEATURES
流程图、时序图、ER 图、类图、状态机、甘特图、饼图、思维导图、时间线、Git 图、用户旅程图、象限图、XY 图表、桑基图、Block 图、C4 架构图。
用户说"画一个审批流程"或"梳理一下系统交互"，Agent 自动选择 Mermaid 图表类型并生成代码。
panel.html 提供实时渲染、内联编辑保存、刷新重载、SVG/PNG 导出、源码复制、明暗主题切换。
图表源码以 .mmd 文件存储在项目目录。Agent 修改文件，面板点刷新即可看到结果。
Mermaid.js v11 + handDrawn look，中文标签自动适配，与面板 UI 视觉一致。
serve.py 零依赖 Python stdlib HTTP 服务。panel.html 通过 CDN 加载 Mermaid.js v11。生成前读 references/mermaid-syntax.md 获取语法速查。
REFERENCE
serve.py — 本地文件服务 + 预览面板
| 命令 | 说明 | 示例 |
|---|---|---|
--file | 指定 .mmd 文件 | python3 serve.py --file flow.mmd |
--port | 指定端口（默认 9876） | python3 serve.py --file flow.mmd --port 9877 |
panel.html — 浏览器端控制
| 命令 | 说明 | 示例 |
|---|---|---|
刷新 | 重新读取 .mmd 文件并渲染 | 点击面板 ⟳ 按钮 |
编辑 | 内联编辑器，保存后写回文件 | 点击面板 ✎ 按钮 |
SVG / PNG | 导出当前渲染结果 | 点击面板 ↓ 按钮 |
复制源码 | 复制 Mermaid 代码到剪贴板 | 点击面板复制按钮 |
对 Agent 说"梳理一下用户下单到发货的流程"，Agent 分析业务逻辑后生成 flowchart 类型的 Mermaid 代码，写入 .pm-toolkit/order-flow.mmd，启动面板预览。
> "梳理一下用户下单到发货的完整流程"
Agent:
1. 分析业务逻辑，确定关键节点
2. 生成 flowchart LR 代码，写入 .pm-toolkit/order-flow.mmd
3. 启动 serve.py，打开预览面板
4. 用户提出修改 → Agent 编辑 .mmd → 面板刷新对 Agent 说"画一下系统架构的 C4 图"，Agent 读取项目结构后生成 C4Context 图表。
对 Agent 说"画一下这几个表的 ER 图"，Agent 分析 model 文件后生成 erDiagram。
所有图表都遵循同一个工作流：
.mmd 文件，启动预览| 用户意图 | Mermaid 类型 |
|---|---|
| 业务流程、审批流 | flowchart LR/TB |
| API 调用、系统交互 | sequenceDiagram |
| 数据库设计 | erDiagram |
| 类关系、继承 | classDiagram |
| 状态转换 | stateDiagram-v2 |
| 项目计划 | gantt |
| 占比分布 | pie |
| 层级关系 | mindmap |
| 里程碑 | timeline |
| 分支管理 | gitGraph |
| 用户体验评估 | journey |
| 需求优先级矩阵 | quadrantChart |
| 趋势分析 | xychart-beta |
| 用户漏斗 | sankey-beta |
| 系统模块划分 | block-beta |
| 系统架构概览 | C4Context / C4Container |
除图表外，本技能还支持网页原型设计。Agent 生成前读取 references/prototype-style.md 获取设计规范，生成完整 HTML 页面，通过设备框架预览。
对 Agent 说"画一个登录页的原型"，Agent 生成 HTML 写入 .pm-toolkit/prototype/，启动 proto_serve.py 预览：
python3 proto_serve.py --dir .pm-toolkit/prototype/
# → http://localhost:9877Viewport 配置：
| 类型 | viewport 设置 | 说明 |
|---|---|---|
| Mobile | width=375 | 手机原型 |
| Pad | width=768 | 平板原型 |
| PC | 不设置 | 桌面原型 |
面板支持：
INSTALL