cathrynlavery/diagram-design

Diagram Design – AI‑agent powered editorial diagrams

What it is – Diagram Design is a reusable Agent Skill (compatible with Claude Code, Codex, GitHub Copilot, Factory Droid, Pi, Kiro, OpenCode, etc.) that turns a natural‑language request into a set of self‑contained HTML + SVG diagrams. The skill ships a library of 30+ editorial‑style diagram types (architecture, flowchart, Sankey, Wardley map, Kanban, etc.) in three visual variants (minimal‑light, minimal‑dark, full‑editorial). Diagrams are rendered without any JavaScript, external images, or shadows, making them instantly viewable in a browser or embeddable in markdown.

---

Key features (as described in the README)

• Broad diagram catalogue – 30 static diagram grammars covering architecture, process, data, charts, and project‑management views. New types added in version 2.5.10 include Sankey, fishbone, Wardley map, Kanban, user‑journey, deployment, dependency graph, UML class, story map, and database schema.
• Three visual variants – each diagram can be rendered as a light minimal, dark minimal, or a full‑editorial style. All variants are pure SVG/HTML files that open directly in a browser.
• Brand‑onboarding – a one‑click “onboard diagram‑design to <your‑site>” flow fetches the homepage, extracts the dominant colour palette and font stack, maps them to semantic tokens (paper, ink, accent, etc.), and writes them to references/style-guide.md. The skill then uses those tokens for every subsequent diagram, ensuring brand‑consistent colours and typography.
• Accessibility built‑in – every SVG includes proper `role=