本文へ移動
cccskills
無料GitHub で公開

pm-toolkit

自然语言 → Mermaid 图表(16 种)+ 网页原型,本地 Web 面板实时预览/导出。

インストール方法を見る

含まれるファイル(8)

  • SKILL.md3.5 KB
  • agents/openai.yaml204 B
  • references/mermaid-syntax.md8.2 KB
  • references/prototype-style.md3.2 KB
  • scripts/panel.html27.6 KB
  • scripts/proto_serve.py4.4 KB
  • scripts/prototype.html15.8 KB
  • scripts/serve.py4.5 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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. 启动预览

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. 启动预览

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

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

adb-mysql

無料

阿里云 AnalyticDB (ADB) for MySQL 只读数据分析。 多维分析(计数/聚合/时间序列)、交叉验证、Schema 文档生成、多 Profile。

日本語の概要は準備中です。原文の説明を表示しています。

northseadl/norix-skills62026年4月10日 更新

Multi-agent brainstorming: async opinion collision with expert personas. Mixed Codex/Claude Code engine. Use when multiple AI agents need to collaboratively discuss, debate, and converge on solutions through structured dialog. Triggers: brainstorm, multi-perspective discussion, opinion collision, expert debate, war room, collective intelligence, 头脑风暴, 多视角讨论, 集思广益.

日本語の概要は準備中です。原文の説明を表示しています。

northseadl/norix-skills62026年4月10日 更新

Frontend design blueprints with craftsmanship scoring, self-critique loops, and engineering handoff. Aesthetic intelligence against AI homogeneity. Use for: UI/UX design specs, design system creation, visual direction exploration, component design review, design-to-engineering handoff.

日本語の概要は準備中です。原文の説明を表示しています。

northseadl/norix-skills62026年4月10日 更新

Multi-agent SWE team built on the Workshop model. Full-stack vertical workers, meeting room with @mention notification, private pipes, shared task board. Git worktree isolation, Leader-driven coordination. Mixed Codex/Claude Code engine. Use when a task needs engineering depth beyond a single agent. NOT for simple task parallelism (use agent-task-orchestration) or design discussions (use agent-brainstorm).

日本語の概要は準備中です。原文の説明を表示しています。

northseadl/norix-skills62026年4月10日 更新

Task decomposition and multi-agent orchestration with retry, checkpoint recovery, and real-time monitoring. Mixed Codex/Claude Code engine. Parallel/sequential execution.

日本語の概要は準備中です。原文の説明を表示しています。

northseadl/norix-skills62026年4月10日 更新

针对 cnb.cool 的云原生构建(CNB Build):生成/修改 .cnb.yml 流水线、触发规则、 构建环境、runner 资源、缓存、环境变量、手动触发与调试。 在接入、迁移、优化或排查 CNB 构建配置时使用。

日本語の概要は準備中です。原文の説明を表示しています。

northseadl/norix-skills62026年4月10日 更新

northseadl のスキルをすべて見る

このスキルの問題を報告する