diagram-design
AIOpen-source agent skill that draws editorial diagrams as a single self-contained HTML and SVG file, in your brand's style.
diagram-design
Open-source agent skill that draws editorial diagrams as a single self-contained HTML and SVG file, in your brand's style.
About diagram-design
Diagram Design is an MIT-licensed agent skill that lets coding agents produce polished diagrams from plain-language requests. The agent picks one of 45 diagram types, states its plan and writes a single self-contained HTML file with inline SVG that opens by double-clicking. It works with any host that reads Agent Skills, including Cursor, Claude Code, Codex, GitHub Copilot, Gemini CLI, Cline, Windsurf and Amp. An onboarding step can pull the palette and fonts from a website so every diagram matches the brand, and diagrams can be imported from draw.io, Mermaid or Excalidraw and exported to PNG or SVG. It installs with npx skills add cathrynlavery/diagram-design.
Key Features
Use Cases
Frequently asked questions about diagram-design
What is diagram-design?
Open-source agent skill that draws editorial diagrams as a single self-contained HTML and SVG file, in your brand's style.
How does diagram-design work?
diagram-design works by combining 45 Diagram Types: Architecture, quadrant, sequence and many other diagram types chosen by the agent from a plain-language request., Self-Contained Output: Each diagram is one HTML file with inline SVG that opens with a double-click and needs no build step., Brand Onboarding: Point it at a website and it pulls your palette and fonts so every later diagram matches., Import From Other Tools: Convert existing draw.io, Mermaid or Excalidraw diagrams into the editorial style., Export to PNG and SVG: Export commands produce images for docs and slides. to help users with Architecture Documentation: Generating a frontend, backend, database and cache diagram for a README or design doc., Project Prioritisation: Drawing an impact versus effort quadrant of upcoming projects., API Flow Explanation: Producing a sequence diagram of a token refresh on 401 for developer docs., Brand-Consistent Visuals: Keeping all technical diagrams in the company's colours and fonts., Migrating Old Diagrams: Restyling Mermaid or draw.io diagrams into a cleaner editorial look..
What are the main features of diagram-design?
Key features include 45 Diagram Types: Architecture, quadrant, sequence and many other diagram types chosen by the agent from a plain-language request., Self-Contained Output: Each diagram is one HTML file with inline SVG that opens with a double-click and needs no build step., Brand Onboarding: Point it at a website and it pulls your palette and fonts so every later diagram matches., Import From Other Tools: Convert existing draw.io, Mermaid or Excalidraw diagrams into the editorial style., Export to PNG and SVG: Export commands produce images for docs and slides..
Who is diagram-design for?
diagram-design is useful for anyone interested in Architecture Documentation: Generating a frontend, backend, database and cache diagram for a README or design doc., Project Prioritisation: Drawing an impact versus effort quadrant of upcoming projects., API Flow Explanation: Producing a sequence diagram of a token refresh on 401 for developer docs., Brand-Consistent Visuals: Keeping all technical diagrams in the company's colours and fonts., Migrating Old Diagrams: Restyling Mermaid or draw.io diagrams into a cleaner editorial look..
How much does diagram-design cost?
diagram-design is free to use.
How do I get started with diagram-design?
Visit https://github.com/cathrynlavery/diagram-design to sign up and explore diagram-design.
Explore more AI Ai Tools tools
Browse all Ai Tools tools →Compare diagram-design: vs Helicon · vs PostNitro · vs CLI Manager · vs ExcaliClaw