diagram-design

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