diagram-design
Othercathrynlavery/diagram-design
Editorial SVG diagram templates as AI agent skills for Claude Code, Codex, and Pi.
Overview
29 self-contained editorial diagram types (HTML+SVG) packaged as a Claude Code skill and multi-agent skill. Generates brand-matched diagrams from a style guide, with light/dark/editorial variants and no external dependencies.
README Preview
# Diagram Design\n\n**Editorial diagrams your designer won't hate.**\n\n\n\n\n\n*New in 2.0 — the Loop: flywheels with a shared-memory hub. The dashed lines are the write-backs.*\n\n27 types. One agent skill for Claude Code, Codex, and Pi. Your brand in 60 seconds — the skill reads your website and maps colors + fonts to every diagram. Already have diagrams in draw.io? Point it at the file and it redraws them at the format, size, and level of detail your audience needs.\n\nNo Figma. No generic rounded boxes. No 30-minute color-picking sessions.\n\n---\n\n## Why I built it\n\nI write at [littlemight.com](https://littlemight.com?utm_source=diagram-design&utm_medium=readme&utm_campaign=github&utm_content=intro) (and run [BestSelf.co](https://bestself.co?utm_source=diagram-design&utm_medium=readme&utm_campaign=github&utm_content=intro) on the side). Every time I needed a diagram — an architecture sketch, a flowchart, a pyramid of what matters most — I'd ask Claude and get back a generic rounded-box thing that looked nothing like the rest of the site. I'd either fight with Figma for 30 minutes or just skip the diagram.\n\nSo I built a Claude Code skill for it. Twenty-seven types, editorial quality, matches your brand in 60 seconds by reading your website.\n\n> *The highest-quality move is usually deletion.* Every node earns its place. The accent color is reserved for the 1–2 things the reader should look at first. Target density: 4/10.\n\n---\n\n## What it makes\n\nAll 27 diagrams ship in three variants: minimal light, minimal dark, and full-editorial. Open any of them directly in a browser — no build step, no JS, no external images.\n\n\n\n ArchitectureComponents + connections\n FlowchartDecision logic\n SequenceMessages over time\n\n\n State machineStates + transitions\n ER / data modelEntities + fields\n TimelineEvents on an axis\n\n\n SwimlaneCross-functional flow\n QuadrantTwo-axis positioning\n NestedHierarchy by containment\n\n\n TreeParent → children\n
FAQ (5)
TroubleshootingHow do I fix zone labels being almost invisible on a custom paper or skin in Architecture diagrams?
In version 2.4.0, the zone eyebrow in type-architecture.md hardcodes fill="rgba(45,49,66,0.40)", which is only tuned for the default paper #f5f5f5. On lighter or warmer paper, such as #faf8f6, its contrast can drop to about 2.22:1.
Replace the hardcoded color and font with semantic skin roles:
-<text … fill="rgba(45,49,66,0.40)" font-size="7"
- font-family="'Geist Mono', monospace" …>LAYER</text>
+<text … fill="{soft}" font-size="7"
+ font-family="{sublabel font}" …>LAYER</text>soft is the intended role for sublabels and boundary labels, so it automatically follows the active skin and dark mode. The separate dark-mode rgba override can then be removed.
For a permanent fix, upgrade to a release containing the type-reference skin-token fix for issue #65. If you must patch a pinned 2.4.0 install, edit the file under its versioned cache path, for example:
plugins/cache/diagram-design/diagram-design/2.4.0/skills/diagram-design/references/type-architecture.mdOther SVG snippets should also use placeholders such as {ink}, {paper}, {accent @ 0.50}, {callout font}, and {sublabel font} instead of literal hex values or font families.
TroubleshootingWhy does verify-geometry.py report false label-mask clipping for translated SVG panels?
The geometry checker compared label masks and node rectangles in local SVG coordinates instead of converting them to canvas coordinates. Update scripts/verify-geometry.py to the fix for issue #293, which applies the existing supported translate() accounting to label masks and later-painted nodes before checking intersections. After updating, rerun:
python3 scripts/verify-geometry.py <file>.svgTranslated panels should no longer produce false overlap findings, while masks that actually overlap in canvas coordinates are detected. The fix does not add general SVG transform support; only the already-supported group/element translations are handled.
TroubleshootingWhy does verify-motion.py report missing SVG title/description errors for aria-hidden decorative icons while lint-skin.py passes?
This was a bug in verify-motion.py: it applied diagram naming checks to all root SVG elements, including decorative icons marked with aria-hidden="true". Update to the release containing PR #295, then mark decorative SVG roots as follows:
<svg aria-hidden="true" focusable="false">
<!-- decorative icon -->
</svg>Re-run:
python3 scripts/verify-motion.py <file>.htmlThe fixed script exempts decorative SVG roots from naming and count checks while still requiring accessible naming for the meaningful motion diagram. If you cannot update immediately, remove the decorative icon only during verification or apply the PR patch; do not remove aria-hidden from a genuinely decorative icon.
TroubleshootingHow do I fix the exploded or axonometric verifier rejecting valid SVG path coordinates written in scientific notation?
This is caused by a bug in the shared verify-exploded.parse_path tokenizer: it splits valid SVG numbers such as 1e-3 or -2.5E2 into separate operands and reports unreadable silhouettes. Update the verifier to a release containing fix(verifiers): read scientific notation in projected SVG path coordinates. The fix supports signs, leading decimals, and exponents in absolute M/L/A/Z commands while keeping arc flags as literal 0 or 1. As a temporary workaround, normalize scientific-notation coordinates to equivalent decimal notation before verification, for example 1e-3 → 0.001 and -2.5E2 → -250. The geometry is valid; Playwright 1.62.0 with Chromium 151 renders the equivalent paths correctly.
TroubleshootingHow do I fix the heatmap verifier reporting "no parseable cells" for valid counts over 1 billion?
The verifier incorrectly rejects finite nonnegative values with value >= 1e9, even though the heatmap format has no upper count limit. Upgrade to a release containing the fix from PR fix(heatmap): accept finite billion-scale counts; the parser now accepts any finite nonnegative number while still rejecting NaN, Infinity, and negative values. As a temporary workaround, divide every cell count by the same positive factor so the maximum is below 1,000,000,000, then relabel your legend/units; this preserves relative ordering and opacity because the scaling is uniform.