Diagram Design Generates Editorial Diagrams in Claude Code and Codex
Diagram Design is an agent skill for Claude Code, Codex, and Pi that outputs clean, editorial SVG diagrams across 27 visual patterns. It extracts your site palette and typography in 60 seconds to match brand styling without Figma.
Impact: Medium
Why it matters
Install this skill in your agentic coding environment to generate production-ready architectural diagrams and system flows directly from natural language.
TL;DR
- 01Provides 27 responsive, editorial SVG visual types for agent CLI environments
- 02Extracts brand colors and font stacks automatically from your live website URL
- 03Enforces WCAG AA contrast verification and accessibility attributes out of the box
Key facts
- Visual Types
- 27 editorial diagram types
- Supported Clients
- Claude Code, OpenAI Codex, Pi
- Default Output Format
- Static SVG / HTML
Universal Agent Integration
Diagram Design installs directly into Claude Code, OpenAI Codex, and Pi using standard plugin commands. It provides 27 core visual layouts that render clean SVG files without JavaScript or external image dependencies.
To install the skill in Claude Code:
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-designFor Codex environments, register the marketplace and add the package:
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-designAutomated Brand Extraction and Contrast Verification
The onboarding command extracts style variables directly from an existing website. Running onboard diagram-design to https://yoursite.com analyzes your palette, matches semantic color roles (such as focal accents and background paper values), and verifies WCAG AA contrast thresholds at small font sizes (9–12px) before saving configuration to references/style-guide.md.
Multi-Project Profiles and Format Conversions
Profiles are persisted across host environments in ~/.diagram-design/profiles/. Placing a .diagram-design marker file containing profile: <slug> in a repository links that project to specific brand guidelines, preventing workspace overwrites. The skill also ingests Mermaid and draw.io sources to convert raw diagrams into production-grade vector assets.
Try it in 2 minutes
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-designbash
✓ When to use
- Documenting software architecture and system flows directly inside your terminal agent
- Replacing tedious manual box-drawing workflows in Figma or Miro
- Upgrading plain Mermaid diagrams to branded editorial SVGs for documentation sites
What to do today
- Add the diagram-design marketplace plugin to your Claude Code or Codex setup
- Run the onboarding command against your company domain to generate semantic style tokens
- Convert legacy Mermaid architecture diagrams into publication-ready SVGs
Sources