cathrynlavery / diagram-design
HTML + SVG · for Claude Code
29 editorial diagram types

A diagram is a drawing decision, not a render target.

diagram-design gives Claude Code 29 editorial diagram types as self-contained HTML and SVG. The constraints are stated in the description, and they are the interesting part.

×No shadows
×No Mermaid-slop
✓Self-contained HTML and SVG
Read the project github.com/cathrynlavery/diagram-design
Specimen
Plate sheetIllustrative

column

comparison

line

trend

node graph

relation

funnel

narrowing

timeline

sequence

quadrant

positioning

Six plates drawn illustratively. The project states 29 editorial diagram types, self-contained HTML and SVG, with no shadows and no Mermaid-slop.

01

Editorial, not generated

A diagram type carries a point of view about what the reader should compare. Rendering a graph is the easy half.

02

Self-contained output

HTML and SVG with nothing to install means the artifact travels into a doc, a PR, or a page without a build step.

03

The constraints are the product

No shadows and no Mermaid-slop are design rules stated up front, which tells you what the author is refusing.