diagram-designer

Editorial-quality architecture, flow, and strategy diagrams. Self-contained HTML + SVG.

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

直接命令不会经过审查 Prompt；运行前请先检查来源。

npx skills add https://github.com/officebeats/beats-pm-kit --skill diagram-designer

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

文件资源管理器

2 个文件

SKILL.md

来源说明 · 只读预览

name	diagram-designer
description	Editorial-quality architecture, flow, and strategy diagrams. Self-contained HTML + SVG.

Editorial-quality architecture, flow, and strategy diagrams. Self-contained HTML + SVG. No shadows, no Mermaid-slop.

Type	Best For	Reference
Architecture	System flows, API integrations, Cloud stacks	`references/type-architecture.md`
Flowchart	Logical decision trees, user journeys	`references/type-flowchart.md`
Sequence	Handshakes, auth flows, timing	`references/type-sequence.md`
Quadrant	Impact vs Effort, Market maps	`references/type-quadrant.md`
Timeline	Product roadmaps, project phases	`references/type-timeline.md`

Hierarchy: Every node must earn its place. Reserve the Accent color for the 1–2 most important elements.
The 4px Grid: All coordinates, widths, and gaps must be divisible by 4.
Typography:
- Titles: Inter, Bold, 54px.
- Node Labels: Inter, Semibold, 24-32px.
- Sublabels/Technical: monospace (Geist Mono equivalent), 18-22px.
No Shadows: Use 1px hairlines and solid fills. Max border-radius: 10px.
Connectors: Use flat paths with simple 2D arrowheads. No gradients.