<< All versions

Skill v1.0.0

currentLLM-judged scan90/100
northseadl/norix-skills/pm-toolkit
──Details
PublishedOctober 23, 2026 at 01:35 AM
Content Hashsha256:4d7279069b23c330...
Git SHA41130a412814
──Files
Files (1 file, 3.5 KB)
SKILL.md3.5 KBactive
SKILL.md · 116 lines · 3.5 KB

version: "1.0.0" name: pm-toolkit metadata: version: 0.0.5 description: '自然语言 → Mermaid 图表（16 种）+ 网页原型，本地 Web 面板实时预览/导出。

'

PM Toolkit — Mermaid 图表引擎

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

架构

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

工作流

1. 确定图表类型

用户意图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

2. 生成 Mermaid 代码

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

将代码写入 .mmd 文件：

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

3. 启动预览

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

面板操作：

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

4. 迭代

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

错误处理

场景处理
Mermaid 语法错误面板显示错误详情
CDN 加载失败检查网络连接
端口占用--port 9877 指定其他端口

原型工具 (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. 启动预览

bash
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 查看。

All versions