Verified Agent Skill record

Diagram Design

A design-oriented diagramming skill that produces self-contained HTML files with inline SVG across 44 visual types - including architecture, architecture delta, flowchart, sequence, state machine, ER/data model, timeline, swimlane, Sankey, waterfall, Gantt, and chart types - under an editable editorial design system, with import support for .drawio, Mermaid, and .excalidraw sources.

Tasks

Create a branded architecture or data-flow diagram as a self-contained HTML file with inline SVG
Convert an imported .drawio, Mermaid, or .excalidraw source into an editorial-layout diagram
Run the first-time style-guide check and customize or save a client profile before generating a project's first diagram
Render a chart type such as waterfall, Sankey, or radar/spider from structured data

Inputs

Diagram request naming a topic and intended audience
Style guide tokens or a brand source (website URL, installed skill, local design system, pasted tokens, or saved profile)
Import files in .drawio, Mermaid, or .excalidraw formats (optional)
Structured data for chart types (e.g., signed contributions for waterfall, flow quantities for Sankey)

Outputs

Self-contained HTML files with inline SVG diagrams
Saved named client style profiles (optional)

Limitations and checks

Not intended for quick unicode diagrams (use wiretext), plain lists (use tables/bullets), attribute-only before/after comparisons, or single-shape 'diagrams'
Animation is only used when requested or when motion materially clarifies ordered change; static is the default
Non-Latin label support is documented for Korean, Traditional Chinese, and Cyrillic
Style guide gate passed or explicitly skipped: default tokens (paper #f5f5f5, ink #2d3142, accent #eb6c36) were not silently shipped into a branded project
All six connector rules respected: no diagonal slants, labels masked from strokes, masks not clipped, no overlapping paths, no shared attach points, transit not behind non-endpoint boxes
Focal discipline: accent applied to at most 1-2 elements; everything else uses ink/muted/soft
Target density near 4/10; diagrams above 9 nodes considered for splitting into overview plus detail
Arrow labels have masking rects; no vertical writing-mode text on arrows; no shadows; corner radius 6-10px or none