diagram-design-editorial — Claude Code skill: 13 diagram types

What diagram-design-editorial does

The skill covers thirteen diagram types: architecture, flowchart, sequence, state machine, ER model, timeline, swimlane, quadrant, nested, tree, layer stack, Venn and pyramid/funnel. Describe what you want and Claude picks a type, writes the HTML and saves the file. Two starting points ship with it: assets/template.html for a minimal light diagram and assets/template-full.html when you want summary cards alongside it.

Output is self-contained HTML plus SVG, so nothing has to be compiled and no charting library gets pulled in. The design rules are strict. Every coordinate, width and gap is a multiple of 4px, shadows are out, corner radius stays at 10px or less, and borders are 1px hairlines. Three font families split the work: Instrument Serif for titles, Geist Sans for node labels, Geist Mono for ports, URLs and field types. One accent colour per diagram, used on one or two focal nodes.

Out of the box the palette is neutral — warm paper, charcoal ink, rust accent. To match your own site, run onboarding: the skill fetches the homepage, pulls the palette and font stack, maps them onto paper, ink, muted, accent and link, then runs WCAG AA contrast checks. You can also edit references/style-guide.md by hand. On first use in a new project, if that file still holds the defaults, Claude stops and asks whether to run onboarding, paste tokens manually, or keep the defaults.