# cathrynlavery/diagram-design architecture

> Architecture diagram of the GitHub repository cathrynlavery/diagram-design, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-23). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/cathrynlavery/diagram-design
- Repository: https://github.com/cathrynlavery/diagram-design
- Video tour (about a minute): https://gitdiagram.com/cathrynlavery/diagram-design/video

## Overview

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: [`skills/diagram-design`](https://github.com/cathrynlavery/diagram-design/tree/main/skills/diagram-design) (Agent skill), [`scripts/axonometry.py`](https://github.com/cathrynlavery/diagram-design/blob/main/scripts/axonometry.py) (Axonometric projection), [`skills/diagram-design/scripts/mermaid_extract.py`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/scripts/mermaid_extract.py) (Mermaid parser), [`skills/diagram-design/scripts/drawio_extract.py`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/scripts/drawio_extract.py) (Draw.io parser)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_authoring["Diagram authoring"]
  node_agent["Agent skill"]
  node_diagramhtml["HTML + SVG diagram"]
end

subgraph group_interchange["Import and export"]
  node_mermaid["Mermaid parser<br/>[mermaid_extract.py]"]
  node_drawio["Draw.io parser<br/>[drawio_extract.py]"]
  node_excalidraw["Excalidraw parser"]
  node_svgexport["SVG exporter<br/>[export_svg.py]"]
  node_pngexport["PNG exporter<br/>[export_png.py]"]
end

subgraph group_validation["Output checks"]
  node_selfcheck["Diagram self-check<br/>[self_check.py]"]
end

subgraph group_examples["Diagram examples"]
  node_axonometry["Axonometric projection<br/>[axonometry.py]"]
  node_axonplan["Axonometric plans"]
  node_exploded["Exploded diagrams"]
end

node_user(("Diagram requester"))

node_user -.->|"describes request"| node_agent
node_agent -.->|"authors diagram"| node_diagramhtml
node_drawio -->|"provides normalized IR"| node_agent
node_mermaid -->|"provides normalized IR"| node_agent
node_excalidraw -->|"provides normalized IR"| node_agent
node_diagramhtml -->|"checks file"| node_selfcheck
node_diagramhtml -->|"exports SVG"| node_svgexport
node_diagramhtml -->|"exports PNG"| node_pngexport
node_axonplan -->|"uses projection"| node_axonometry
node_exploded -->|"uses projection"| node_axonometry

click node_agent "https://github.com/cathrynlavery/diagram-design/tree/main/skills/diagram-design"
click node_mermaid "https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/scripts/mermaid_extract.py"
click node_drawio "https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/scripts/drawio_extract.py"
click node_excalidraw "https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/scripts/excalidraw_extract.py"
click node_svgexport "https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/scripts/export_svg.py"
click node_pngexport "https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/scripts/export_png.py"
click node_selfcheck "https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/scripts/self_check.py"
click node_axonometry "https://github.com/cathrynlavery/diagram-design/blob/main/scripts/axonometry.py"
click node_axonplan "https://github.com/cathrynlavery/diagram-design/blob/main/scripts/build-axonometric-plan-examples.py"
click node_exploded "https://github.com/cathrynlavery/diagram-design/blob/main/scripts/build-exploded-examples.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_agent,node_diagramhtml toneBlue
class node_mermaid,node_drawio,node_excalidraw,node_svgexport,node_pngexport toneAmber
class node_selfcheck,node_user toneMint
class node_axonometry,node_axonplan,node_exploded toneRose
```

## Components

### Diagram authoring

- [Agent skill](https://github.com/cathrynlavery/diagram-design/tree/main/skills/diagram-design): `skills/diagram-design`
- **HTML + SVG diagram**

### Import and export

- [Mermaid parser](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/scripts/mermaid_extract.py): `skills/diagram-design/scripts/mermaid_extract.py`
- [Draw.io parser](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/scripts/drawio_extract.py): `skills/diagram-design/scripts/drawio_extract.py`
- [Excalidraw parser](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/scripts/excalidraw_extract.py): `skills/diagram-design/scripts/excalidraw_extract.py`
- [SVG exporter](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/scripts/export_svg.py): `skills/diagram-design/scripts/export_svg.py`
- [PNG exporter](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/scripts/export_png.py): `skills/diagram-design/scripts/export_png.py`

### Output checks

- [Diagram self-check](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/scripts/self_check.py): `skills/diagram-design/scripts/self_check.py`

### Diagram examples

- [Axonometric projection](https://github.com/cathrynlavery/diagram-design/blob/main/scripts/axonometry.py): `scripts/axonometry.py`
- [Axonometric plans](https://github.com/cathrynlavery/diagram-design/blob/main/scripts/build-axonometric-plan-examples.py): `scripts/build-axonometric-plan-examples.py`
- [Exploded diagrams](https://github.com/cathrynlavery/diagram-design/blob/main/scripts/build-exploded-examples.py): `scripts/build-exploded-examples.py`

### Other components

- **Diagram requester**

## Connections

- Diagram requester → Agent skill: describes request
- Agent skill → HTML + SVG diagram: authors diagram
- Draw.io parser → Agent skill: provides normalized IR (evidence: `skills/diagram-design/scripts/drawio_extract.py`)
- Mermaid parser → Agent skill: provides normalized IR (evidence: `skills/diagram-design/scripts/mermaid_extract.py`)
- Excalidraw parser → Agent skill: provides normalized IR (evidence: `skills/diagram-design/scripts/excalidraw_extract.py`)
- HTML + SVG diagram → Diagram self-check: checks file (evidence: `skills/diagram-design/scripts/self_check.py`)
- HTML + SVG diagram → SVG exporter: exports SVG (evidence: `skills/diagram-design/scripts/export_svg.py`)
- HTML + SVG diagram → PNG exporter: exports PNG (evidence: `skills/diagram-design/scripts/export_png.py`)
- Axonometric plans → Axonometric projection: uses projection (evidence: `scripts/build-axonometric-plan-examples.py`)
- Exploded diagrams → Axonometric projection: uses projection (evidence: `scripts/build-exploded-examples.py`)