GStars
    cathrynlavery

    cathrynlavery/diagram-design

    Editorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, Qoder, and Pi. 45 diagram types. Self-contained HTML + SVG. No shadows. No Mermaid slop.

    agent-skills
    claude-code
    codex
    data-visualization
    diagrams
    HTML
    MIT
    64.0K stars
    4.2K forks
    64.0K GitHub watchers
    Updated Nov 2, 2026
    View on GitHub

    Build with Backblaze B2

    SDKs, agent skills, IDE extensions, and reference pipelines from Backblaze Labs. All open source.

    Explore Backblaze Labs

    Loading star history...

    Where it stands

    Rank, growth pace and release cadence relative to everything GStars tracks.

    The project lists 64 contributors on GitHub.

    Peaked at #1 in the weekly ranking the week of Sep 6, its best in the past year.

    Use Cases & Benefits

    • Creates editorial-quality, self-contained HTML and SVG diagrams with 27 distinct types tailored to match your brand's colors and typography.
    • Automatically extracts and applies your website's color palette and fonts to produce consistent, high-quality diagrams without manual styling or design tools.
    • Use for generating branded architecture diagrams and flowcharts that integrate seamlessly with your website's visual identity.
    • Use for producing detailed sequence, state machine, or data model diagrams with precise editorial styling for technical documentation.
    • Use for exporting diagrams as standalone SVG or PNG files suitable for presentations, social media, or design tools like Figma and Illustrator.

    Should you depend on it?

    License terms, project hygiene and risks, from GitHub metadata and GStars' snapshots.

    License

    MIT

    Permissive: commercial use, modification and redistribution are allowed with attribution.

    Community files

    • README: present
    • Contributing guide: present
    • Code of conduct: present

    Watch-outs

    • No GitHub releases; pin a commit or tag instead of a release.

    General guidance from repository metadata, not legal advice. How we score

    From the README

    Editorial diagrams your designer won't hate.

    New in 2.0 — the Loop: flywheels with a shared-memory hub. The dashed lines are the write-backs.

    27 types. One Claude Code skill. Your brand in 60 seconds — the skill reads your website and maps colors + fonts to every diagram.

    No Figma. No generic rounded boxes. No 30-minute color-picking sessions.

    I write at littlemight.com (and run BestSelf.co 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.

    So I built a Claude Code skill for it. Twenty-seven types, editorial quality, matches your brand in 60 seconds by reading your website.

    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.

    All 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.

    Excerpt from the cathrynlavery/diagram-design README on GitHub (MIT license). © its authors.Read the full README on GitHub

    Daily snapshots

    Stars gained per day, and how forks and open issues moved, from GStars' daily snapshots

    Aug 12: +3,180Aug 13: +4,264Aug 14: +3,173Aug 15: +1,445Aug 16: +1,017Aug 17: +1,004Aug 18: +1,149Aug 19: +1,575Aug 20: +1,042Sep 5: +785Sep 6: +614Sep 7: +1,041Sep 8: +1,144Sep 9: +2,004Sep 10: +1,178Sep 11: +845Sep 12: +400Sep 13: +339Sep 14: +577Sep 15: +452Sep 16: +309Sep 17: +285Sep 18: +340Sep 19: +224Sep 20: +207Sep 21: +144Oct 7: +894Oct 8: +1,245Oct 9: +1,638Oct 10: +1,076Oct 11: +1,289Oct 12: +947Oct 13: +1,689Oct 14: +1,492Oct 15: +1,201Oct 16: +587Oct 17: +524Oct 18: +583Oct 19: +672Oct 20: +727Oct 21: +562

    +57,645 stars over 83 days across 45 snapshot days; best day +4,264 on Aug 13.

    Forks

    4.2K+3.8K

    Open issues

    52+46

    Compared with peers in HTML

    Fastest-growing repositories GStars tracks in this cohort for the week of Nov 8, by 7-day star growth

    cathrynlavery/diagram-design compared with HTML repositories by stars, 7-day star growth, health score and last release
    RepositoryStars+7dHealthLast release
    ripienaar/free-for-dev141.8K—45—
    shanraisshan/claude-code-best-practice68.7K—35—
    cathrynlavery/diagram-design64.0K—45—
    ToolJet/ToolJet41.2K—45today
    twitter/twemoji17.8K—45—
    vava-nessa/free-coding-models2.9K—22today
    Peer median41.2K—45—
    Compare diagram-design with free-for-dev, claude-code-best-practice, ToolJet →

    Discover Repositories

    Search across tracked repositories by name or description