HelloPixDig

Directory › Design & web › Diagram Design

Diagram Design
Image: official project repository

> GEM DESIGN & WEB · AGENT SKILLS · AGENTS & AUTOMATION

Diagram Design

by Cathryn Lavery

A skill for your coding agent that draws polished diagrams: a single HTML file with SVG, in your brand.

MIT FreeOpen source
View on GitHub →

What it does

  • 44 diagram types: architecture, flowchart, timeline, quadrant, Sankey, Gantt, Wardley map, user journey…
  • Output is one self-contained HTML + SVG file, exportable to SVG or PNG
  • Works with Claude Code, Codex, Cursor, GitHub Copilot, Factory Droid and Pi

! The output can differ from one run to the next and is not an editable source format (no text to diff, no canvas to drag). For docs versioned in Git, Mermaid is still a better fit; this is for the diagram you publish. Figures and features come from the repo, not tested by PixDig.

Install it

Requirements: A compatible coding agent, for example Claude Code.

In Claude Code, add the plugin marketplace
/plugin marketplace add cathrynlavery/diagram-design
Install the skill
/plugin install diagram-design@diagram-design

The prompt for your agent

Paste it into your coding agent: it checks the requirements and installs it for you.

Claude CodeCodexCursorGemini CLIopencode
Prompt
Install Diagram Design (https://github.com/cathrynlavery/diagram-design) on my machine.
1. Check the requirements: A compatible coding agent, for example Claude Code. If anything is missing, tell me before installing anything.
2. Follow the official method:
- In Claude Code, add the plugin marketplace: /plugin marketplace add cathrynlavery/diagram-design
- Install the skill: /plugin install diagram-design@diagram-design
3. Check that it works, then explain how to launch it and where to start.

Always review what your agent is about to run, especially install commands.