At a glance
- Best for
- Check diagram hierarchy, geometry, and connectors
- Works with
- Relationships, processes, or architecture descriptions · Existing Mermaid, draw.io, Excalidraw, or PlantUML files · Brand colors and font references (optional)
- Outcome
- Editable diagram files · SVG or rendered PNG files
- Source
- cathrynlavery/diagram-design
01 / Understand the skill
About diagram-design
Provide visual guidelines, layout templates, and checks for architecture diagrams, flowcharts, and infographics. Supports importing multiple diagram formats and exporting HTML, SVG, or rendered PNG files.
Requirements
- Install the complete directory, including references, assets, and scripts
- Python 3 for supporting parsing and validation scripts
- A browser or suitable renderer for PNG export and visual review
Inputs
- Relationships, processes, or architecture descriptions
- Existing Mermaid, draw.io, Excalidraw, or PlantUML files
- Brand colors and font references (optional)
Outputs
- Editable diagram files
- SVG or rendered PNG files
- Geometry and visual-check results
02 / Confirm the fit
Use diagram-design when you need to
- Check diagram hierarchy, geometry, and connectors
- Brand styling and templates
- Import multiple formats and export SVG/PNG
03 / See the workflow
How diagram-design works
- 01Describe the diagram's purpose, nodes, and relationships
- 02Choose a layout and apply brand styling
- 03Check structure and connectors, then export the desired format
Check before installing
Compatible platforms
Cursor · GitHub Copilot · OpenAI Codex · Claude Code
Best fit
Check diagram hierarchy, geometry, and connectors
Review the source instructions if the required output differs from the formats described above.
Install and use
Compatible with Cursor and GitHub Copilot and OpenAI Codex and Claude Code · Published by cathrynlavery
Ready to add diagram-design?
Use the published instructions below, then provide the required input and describe the result you need.
General instructions · Cursor · GitHub Copilot · OpenAI Codex · Claude Code
npx skills add cathrynlavery/diagram-design --skill diagram-design The upstream README's Skills CLI installation, limited to this Skill. Installation has not been run.
Review the source repository and license before installing third-party skills.
Continue exploring
Similar skills
Generates original p5.js generative art by first writing an algorithmic philosophy, then expressing it as a self-contained interactive HTML viewer with seeded randomness.
Reproduces a reference mockup as a runnable frontend, extracting its design system then screenshot-comparing the build and iterating until the gap is minor and explained.
Clarifies the brief before design work by interrogating goal, user, JTBD, constraints, success, and scope, then writing a context.md the other design skills consume.
Creates museum-quality original poster and visual-art PDFs/PNGs by drafting a design philosophy first, then expressing it as a minimal, design-forward single-page canvas.