Diagram Design

Create diagrams as self-contained HTML files with inline SVG and an editorial design system.

Forty-four 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 #eb6c36), 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."