| name | diagram-designer |
| description | Editorial-quality architecture, flow, and strategy diagrams. Self-contained HTML + SVG. |
Diagram Designer Skill
Editorial-quality architecture, flow, and strategy diagrams. Self-contained HTML + SVG. No shadows, no Mermaid-slop.
Selection Guide
| 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 |
Design System (Enterprise Healthcare Palette)
- Paper:
#ffffff (Background)
- Ink:
#1e293b (Primary text/strokes)
- Accent:
#025893 (Navy — Primary focal points)
- Secondary:
#00968F (Teal — Supporting elements)
- Muted:
#e2e8f0 (Connectors/Secondary borders)
Rules of the Grid
- 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.
Checklist