Agent skill · design visual · aradotso
diagram-design-editorial
Generate editorial-quality HTML+SVG diagrams (13 types) for blog posts and documentation using Claude Code, with brand-matched styling and no external dependencies.
Why this skill is useful
Provides a unique method for generating editorial-quality diagrams with brand-matched styling that the AI wouldn't reliably generate on its own.
What it needs
Requires git installed locally. About 9k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
Diagram Design — Editorial HTML+SVG Diagrams Skill by ara.so — Daily 2026 Skills collection. Editorial-quality diagrams for blog posts and documentation. 13 types, self-contained HTML+SVG, no build step, no Mermaid, no shadows. Brand-matched in 60 seconds by reading your website. --- Installation Or symlink from another location: Browse all 13 types locally: --- The 13 Diagram Types Type Use when… --- --- Architecture Components + connections (services, APIs, infra) Flowchart Decision logic, yes/no branches Sequence Messages over time (OAuth, API calls, user flows) State machine States + transitions (order lifecycle, auth states) ER / data model Entities + fields + relationships Timeline Events on a horizontal or vertical axis Swimlane Cross-functional flows (who does what, when) Quadrant Two-axis positioning (impact vs effort, risk vs value) Nested Hierarchy by containment (layers inside layers) Tree Parent → children (org chart, file tree, decision tree) Layer stack Stacked abstractions (OSI model, tech stack) Venn Set overlap (2–3 circles) Pyramid / funnel Ranked hierarchy or conversion drop-off Selection rule: ask "would a reader learn more from this than from a well-written paragraph?" If no, don't draw. Default to deletion over addition. --- Quickstart Claude picks the right type, builds HTML, saves the file. To use a template directly: --- Brand Onboarding (60 seconds) Without onboarding, diagrams render in neutral stone + rust (warm off-white paper, charcoal ink, rust-orange accent). Run onboarding to match your site: Claude will: 1. Fetch your homepage 2. Extract dominant palette + font stack 3. Map values to semantic roles: paper, ink, muted, accent, link 4. Run WCAG AA contrast checks (auto-adjusts failures) 5. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/diagram-design-editorial