northseadl/norix-skills/pm-toolkit

PM Toolkit — Mermaid 图表引擎

将用户的自然语言描述转换为 Mermaid 语法图表，通过本地 Web 面板实时渲染预览。

架构

• 渲染: Mermaid.js v11（CDN 加载，浏览器端纯 JS 渲染，~30ms）
• 服务器: Python 标准库 HTTP 服务（scripts/serve.py，零外部依赖）
• 面板: 自包含 HTML（scripts/panel.html，刷新/编辑/保存/导出/主题切换）

工作流

1. 确定图表类型

2. 生成 Mermaid 代码

生成前读取 references/mermaid-syntax.md 获取语法速查。

将代码写入 .mmd 文件：

• 命名: <描述性名称>.mmd（如 user-registration-flow.mmd）
• 位置: 当前项目根目录下 .pm-toolkit/ 目录
• 风格: 中文标签 + 英文 ID，用 subgraph 组织层次，为连接添加标签

3. 启动预览

python3 <SKILLS_DIR>/pm-toolkit/scripts/serve.py --file <文件路径.mmd>
open http://localhost:9876

面板操作：

• ⟳ 刷新 — 重新读取文件内容并渲染
• ✎ 编辑 — 打开内联编辑器，修改后点"保存"写回文件
• ↓ SVG / ↓ PNG — 导出当前图表
• 复制源码 — 复制 Mermaid 代码
• ◐ — 深色/浅色主题切换

4. 迭代

用户提出修改时，直接编辑 .mmd 文件，在面板点"刷新"查看。

错误处理

原型工具 (Prototype Preview)

Agent 生成完整 HTML 页面，通过设备框架预览。工具只是容器。

工作流

1. 生成 HTML 页面

生成前读取 references/prototype-style.md 获取设计规范。

将页面写入 HTML 文件：

• 位置: 当前项目根目录下 .pm-toolkit/prototype/
• 命名: <描述性名称>.html（如 login.html、user-profile.html）
• 内容: 完整 HTML 文档，独立 CSS 样式，无外部依赖（字体除外）
• viewport: <meta name="viewport" content="width=375"> (mobile) 或 width=768 (pad) 或不设 (pc)

2. 启动预览

python3 <SKILLS_DIR>/pm-toolkit/scripts/proto_serve.py --dir <项目路径/.pm-toolkit/prototype/>
open http://localhost:9877

面板操作：

• ← → — 翻页浏览（键盘左右箭头也可）
• Refresh — 重新加载文件
• PC / Pad / Mobile — 切换设备框架
• Export ZIP — 打包导出所有 HTML
• ◐ — 深色/浅色主题切换

3. 迭代

用户提出修改时，Agent 直接编辑 HTML 文件，面板点 Refresh 查看。