How cathrynlavery/diagram-design works
Diagram Design is an agent skill for turning natural-language requests into branded, self-contained HTML+SVG diagrams. The main workflow is user prompt → agent selects a diagram type and creates the HTML diagram; repository utilities then support self-checking, import normalization, and SVG/PNG export. The README documents 45 diagram types and Draw.io, Mermaid, and Excalidraw import. The provided tree and excerpts show the import/export helpers and examples, but not the skill instructions or renderer implementation, so those links are documented rather than source-verified.
Main entry points: diagram-design Agent skill · axonometry.py Axonometric projection · mermaid_extract.py Mermaid parser · drawio_extract.py Draw.io parser
Components 12
Diagram authoring
- Agent skill
skills/diagram-design - HTML + SVG diagram
Import and export
- Mermaid parser
skills/diagram-design/scripts/mermaid_extract.py - Draw.io parser
skills/diagram-design/scripts/drawio_extract.py - Excalidraw parser
skills/diagram-design/scripts/excalidraw_extract.py - SVG exporter
skills/diagram-design/scripts/export_svg.py - PNG exporter
skills/diagram-design/scripts/export_png.py
Output checks
- Diagram self-check
skills/diagram-design/scripts/self_check.py
Diagram examples
- Axonometric projection
scripts/axonometry.py - Axonometric plans
scripts/build-axonometric-plan-examples.py - Exploded diagrams
scripts/build-exploded-examples.py
Other components
- Diagram requester
Connections 10
- Diagram requester → Agent skill: describes request
- Agent skill → HTML + SVG diagram: authors diagram
- Draw.io parser → Agent skill: provides normalized IR
skills/diagram-design/scripts/drawio_extract.py - Mermaid parser → Agent skill: provides normalized IR
skills/diagram-design/scripts/mermaid_extract.py - Excalidraw parser → Agent skill: provides normalized IR
skills/diagram-design/scripts/excalidraw_extract.py - HTML + SVG diagram → Diagram self-check: checks file
skills/diagram-design/scripts/self_check.py - HTML + SVG diagram → SVG exporter: exports SVG
skills/diagram-design/scripts/export_svg.py - HTML + SVG diagram → PNG exporter: exports PNG
skills/diagram-design/scripts/export_png.py - Axonometric plans → Axonometric projection: uses projection
scripts/build-axonometric-plan-examples.py - Exploded diagrams → Axonometric projection: uses projection
scripts/build-exploded-examples.py