diagram-design

★ 7.7 · design

diagram-design is a Claude Code skill that generates technical and product diagrams as standalone HTML files with inline SVG and CSS, following a shared editorial design system. It covers 13 diagram types — architecture, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, nested, tree, layer stack, venn, and pyramid — each backed by a dedicated `references/type-*.md` file loaded only when that type is selected. On first use, a style-guide gate prompts the user to either pull colors and fonts automatically from their website, paste tokens manually, or proceed with the default neutral stone and rust theme. The skill also includes an annotation-callout primitive and an optional sketchy rendering variant. It is a good fit for engineering and product teams who need system architecture diagrams, process flowcharts, or data model visuals that consistently match their brand.