DEVOURED
Diagram Design (GitHub Repo)
Diagram Design is a Claude Code skill that generates editorial-quality diagrams as self-contained HTML and SVG files, bypassing generic rounded-box templates.
What: Cathryn Lavery created this tool to generate 39 types of diagrams, including Sankey, Wardley maps, and UML classes. It features automatic brand-matching by scraping a company's website for color and font tokens, and can redraw existing Mermaid or draw.io diagrams into its editorial design system.
Why it matters: It solves the 'AI aesthetic' problem in documentation where generic diagrams detract from professional communication, providing a standardized, branded visual language without manual design effort.
Takeaway: Install the plugin via Claude Code using '/plugin marketplace add cathrynlavery/diagram-design'.
Deep dive
- Generates self-contained HTML/SVG diagrams with zero JavaScript dependencies or external image calls.
- Offers 39 visual styles, including Sankey, fishbone, kanban, and database schemas.
- Supports optional accessible motion for ordered explanations without requiring full animation frameworks.
- Provides automated onboarding by extracting brand assets (colors/fonts) from a provided URL.
- Includes advanced geometric verification checks in CI to ensure labels do not overlap or get clipped.
- Supports native redraws of draw.io and Mermaid files based on audience (engineer vs. executive) and detail level (faithful vs. simplified).
Decoder
- Sankey: A type of flow diagram where the width of the arrows is proportional to the flow rate of the quantity being represented.
- Editorial-quality: Design style characterized by refined typography, grid-based layouts, and clear information hierarchy typically found in professional publications.
Original article
Full article content is not available for inline reading.
Explore all 68 articles in today's digest
Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi