Mermaid 图表引擎
将自然语言描述转换为 Mermaid 图表，通过本地 Web 面板实时预览。支持 16 种图表类型，覆盖流程图、时序图、ER 图、架构图、甘特图等产品和技术场景。仅依赖 Node.js 运行时。
FEATURES
流程图、时序图、ER 图、类图、状态机、甘特图、饼图、思维导图、时间线、Git 图、用户旅程图、象限图、XY 图表、桑基图、Block 图、C4 架构图。
用户说"画一个审批流程"或"梳理一下系统交互"，Agent 自动选择 Mermaid 图表类型并生成代码。
panel.html 提供实时渲染、内联编辑保存、刷新重载、SVG/PNG 导出、源码复制、明暗主题切换。
图表源码以 .mmd 文件存储在项目目录。Agent 修改文件，面板点刷新即可看到结果。
Mermaid.js v11 + handDrawn look，中文标签自动适配，与面板 UI 视觉一致。
serve.js 是一个零依赖的 Node.js 单文件 HTTP 服务。panel.html 通过 CDN 加载 Mermaid。
REFERENCE
serve.js — 本地文件服务 + 预览面板
| 命令 | 说明 | 示例 |
|---|---|---|
--file | 指定 .mmd 文件 | node serve.js --file flow.mmd |
--port | 指定端口（默认 9876） | node serve.js --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.js，打开预览面板
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 |
INSTALL