Diagram Design
Create branded architecture, architecture delta, IT current-state, flowchart, sequence...
Install
npx skills add anbeime/skill --skill diagram-design -g -a claude-code -y- Repository
- anbeime/skill9k
- Category
- Security
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- Yes, review before use
What it does
Create branded architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack, exploded axonometric, axonometric plan, Venn, pyramid/funnel, treemap and marimekko, heatmap, bar and dumbbell, waterfall, line (slopegraph, ridgeline, streamgraph, bump), Gantt and scatter charts (bubble, beeswarm), high-level, process, medallion, data flow, DP integration, DP security matrix, Sankey, fishbone, Wardley map, kanban, user journey, service blueprint, deployment, dependency graph, UML class, story map, or database schema diagrams as HTML/SVG/PNG, with .drawio, Mermaid, and .excalidraw import, plus lifecycle phase maps, block decomposition trees, and onboarding guidance.
Diagram Design
Create diagrams as self-contained HTML files with inline SVG and an editorial design system.
Forty-five visual types. Semantic patterns describe behavior; type references describe layout.
0. First-time setup, style guide gate
Before generating your first diagram in a new project, verify the style guide has been customized.
Do not silently ship default-skinned diagrams into a branded project.
First resolve any project .diagram-design marker per references/profiles.md; a successfully resolved marker selects its profile and bypasses this gate. That reference owns failures, the protected default, and save behavior.
Open references/style-guide.md and check the default tokens. If they are still the shipped defaults (paper #f5f5f5, ink #2d3142, accent #bf4520), pause and ask the user:
"This is your first diagram in this project and the style guide is still default. Customize now? Options: (a) website URL, (b) installed skill, (c) local folder/design-system, (d) paste tokens, (e) keep default, (f) load saved profile."
Then branch per the matching section of references/onboarding.md; for (f) follow references/profiles.md.
Once the style guide has been customized (or the user explicitly chose default), skip this gate on later runs. A leading profile header names the copied-in active profile. Without a header, any semantic-role value or typography family differing from shipped defaults means custom-unsaved: skip the gate and offer to save it as a profile. All-default tokens with no marker/header trigger the gate. After onboarding, offer to save as a named client profile per references/profiles.md.
1. Philosophy
The highest-quality move is usually deletion.
Applied to schematics:
