cathrynlavery/diagram-design: Editorial diagram design for Claude Code, Codex, GitHub Copilot, Factory Droid, and Pi. 42 diagram types. Self-contained HTML + SVG. No shadows. No Mermaid slop.

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

Summary

cathrynlavery/diagram-design is a skill/plugin pack that teaches AI coding agents (Claude Code, Codex, GitHub Copilot, Factory Droid, Pi, Kiro, OpenCode, and others) to produce editorial-style diagrams as self-contained HTML and inline SVG. It ships 42 diagram types — architecture, sequence, ER, flowchart, gantt, UML class, database schema, Wardley map, fishbone, and others — and can also redraw existing Mermaid, draw.io, or Excalidraw sources. Output has no build step, no JavaScript, and no external image dependency, so a produced diagram can be opened in a browser or pasted into a doc directly.

What it is useful for

The skill fits cases where a developer wants a diagram inside an agent session without opening Figma or hand-tweaking CSS. Each type ships in three static variants: minimal light, minimal dark, and full-editorial. Documented examples include architecture overviews, sequence diagrams, an "architecture delta" that compares Before/After topologies as a ledger of added, removed, changed, moved, and rewired objects, and an "exploded axonometric" type for parts pull-apart diagrams such as a phone teardown.

Brand matching is the main differentiator: the onboarding flow reads a homepage, extracts the dominant palette and font stack, maps them to semantic tokens (paper, ink, muted, accent, link), and verifies WCAG AA contrast on ink over paper before writing tokens to references/style-guide.md. Saved brand profiles live in ~/.diagram-design/profiles/ and survive plugin updates. Accessibility is built in: inline SVGs carry role="img", resolving aria-labelledby, and first-child <title> / <desc> slots with prefixed IDs to avoid duplicate accessible names across inlined SVGs.

Documented limitations include that Codex/Cowork organization marketplaces require a private GitHub mirror to sync, Kiro/standalone npx skills add installs do not auto-update, and editable installs require cloning the repo because marketplace-managed installs may overwrite references/style-guide.md on update. The README also notes that some hosts (Windows without Developer Mode) fall back to file copies instead of symlinks, and PRIVACY.md lists network calls.

How engineers can use it

Install it through the documented plugin commands for the target host — for example, for Claude Code:

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

For other hosts (Codex, Copilot, Factory Droid, Pi, Kiro, OpenCode), each has its own command block in the README. For hosts not listed, the cross-agent skills CLI installs the skill into every selected host root:

npx skills add cathrynlavery/diagram-design

Once installed, ask the agent for a diagram in natural language. To edit the style guide locally instead of letting the package overwrite it, clone the repo and symlink skills/diagram-design/ into the host's skills directory (commands are provided in the "Editable install" section). The live gallery at cathrynlavery.github.io/diagram-design or the local skills/diagram-design/assets/index.html file can be used to inspect each type in all three variants before installing.