# Supported Diagram Types in Diagram Design: The Complete Catalog

> Explore the complete catalog of 39 supported diagram types in Diagram Design including Architecture UML Class Sankey Gantt and Flowchart Learn more about each type and its specifications.

- Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design)
- Tags: api-reference
- Published: 2026-08-22

---

**Diagram Design supports 39 distinct parametric diagram types—including Architecture, UML Class, Sankey, Gantt, and Flowchart—each backed by a reference specification in `skills/diagram-design/references/` and a Python renderer in `skills/diagram-design/src/types/`.**

The [cathrynlavery/diagram-design](https://github.com/cathrynlavery/diagram-design) repository provides a structured framework for generating technical diagrams programmatically. Every supported diagram type follows a strict contract: a markdown reference file defines the visual grammar, sizing limits, and accent budgets, while a corresponding renderer module enforces these constraints during SVG generation. This separation ensures consistent visual output while maintaining flexible, parameter-driven inputs.

## Complete List of Supported Diagram Types

The repository currently ships 39 diagram generators, accessible via the `diagram_type` parameter in the `DiagramBuilder` class. Below is the authoritative catalog organized by functional category, with paths to each reference specification.

### Software & System Architecture

- **Architecture** – [`skills/diagram-design/references/type-architecture.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-architecture.md)
- **Deployment** – [`skills/diagram-design/references/type-deployment.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-deployment.md)
- **Data Flow** – [`skills/diagram-design/references/type-data-flow.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-data-flow.md)
- **DB Schema** – [`skills/diagram-design/references/type-db-schema.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-db-schema.md)
- **ER (Entity-Relationship)** – [`skills/diagram-design/references/type-er.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-er.md)
- **UML Class** – [`skills/diagram-design/references/type-uml-class.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-uml-class.md)
- **State** – [`skills/diagram-design/references/type-state.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-state.md)
- **IT State** – [`skills/diagram-design/references/type-it-state.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-it-state.md)
- **Sequence** – [`skills/diagram-design/references/type-sequence.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-sequence.md)
- **Dependency** – [`skills/diagram-design/references/type-dependency.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-dependency.md)
- **DP Integration** – [`skills/diagram-design/references/type-dp-integration.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-dp-integration.md)
- **DP Security Matrix** – [`skills/diagram-design/references/type-dp-security-matrix.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-dp-security-matrix.md)

### Business Process & Workflow

- **Flowchart** – [`skills/diagram-design/references/type-flowchart.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-flowchart.md)
- **Process** – [`skills/diagram-design/references/type-process.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-process.md)
- **Swimlane** – [`skills/diagram-design/references/type-swimlane.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-swimlane.md)
- **Gantt** – [`skills/diagram-design/references/type-gantt.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-gantt.md)
- **Kanban** – [`skills/diagram-design/references/type-kanban.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-kanban.md)
- **Timeline** – [`skills/diagram-design/references/type-timeline.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-timeline.md)
- **Journey** – [`skills/diagram-design/references/type-journey.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-journey.md)
- **Story Map** – [`skills/diagram-design/references/type-story-map.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-story-map.md)
- **Fishbone** – [`skills/diagram-design/references/type-fishbone.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-fishbone.md)

### Data Visualization & Analytics

- **Bar** – [`skills/diagram-design/references/type-bar.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-bar.md)
- **Line** – [`skills/diagram-design/references/type-line.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-line.md)
- **Scatter** – [`skills/diagram-design/references/type-scatter.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-scatter.md)
- **Radar** – [`skills/diagram-design/references/type-radar.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-radar.md)
- **Polar** – [`skills/diagram-design/references/type-polar.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-polar.md)
- **Sankey** – [`skills/diagram-design/references/type-sankey.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-sankey.md)
- **Treemap** – [`skills/diagram-design/references/type-treemap.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-treemap.md)
- **Quadrant** – [`skills/diagram-design/references/type-quadrant.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-quadrant.md)
- **Pyramid** – [`skills/diagram-design/references/type-pyramid.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-pyramid.md)

### Strategic & Conceptual Models

- **High-Level** – [`skills/diagram-design/references/type-high-level.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-high-level.md)
- **Wardley** – [`skills/diagram-design/references/type-wardley.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-wardley.md)
- **Loop** – [`skills/diagram-design/references/type-loop.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-loop.md)
- **Nested** – [`skills/diagram-design/references/type-nested.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-nested.md)
- **Medallion** – [`skills/diagram-design/references/type-medallion.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-medallion.md)
- **Layers** – [`skills/diagram-design/references/type-layers.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-layers.md)
- **Tree** – [`skills/diagram-design/references/type-tree.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-tree.md)
- **Org Chart** – [`skills/diagram-design/references/type-org-chart.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-org-chart.md)
- **Panorama (Venn)** – [`skills/diagram-design/references/type-venn.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-venn.md)

## How Diagram Types Are Implemented

Each diagram type follows a three-layer architecture that separates specification from implementation.

**Reference Layer.** The markdown files in `skills/diagram-design/references/` serve as the single source of truth for each diagram's **visual grammar**, **sizing limits**, and **accent-budget rules**. These files are consumed by both human readers and automated validation systems.

**Factory Layer.** The `DiagramBuilder` class in [`skills/diagram-design/src/diagram_builder.py`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/src/diagram_builder.py) acts as a central factory. It maps the `diagram_type` string (e.g., `"sankey"`) to the corresponding renderer class located in `skills/diagram-design/src/types/`.

**Renderer Layer.** Individual modules such as [`skills/diagram-design/src/types/sankey.py`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/src/types/sankey.py) or [`skills/diagram-design/src/types/uml_class.py`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/src/types/uml_class.py) implement the parametric layout logic. Each renderer validates inputs against its reference specification, calculates coordinates, and emits raw SVG.

## Rendering Diagrams via the Python API

To generate any supported diagram type, instantiate `DiagramBuilder` with the appropriate `diagram_type` identifier and an `inputs` dictionary structured for that specific type. Call `render()` to receive SVG output.

```python
from diagram_design import DiagramBuilder

# Render a Sankey flow diagram

sankey = DiagramBuilder(
    diagram_type="sankey",
    inputs={
        "stages": ["Raw", "Processed", "Analytics"],
        "flows": [
            {"source": "Raw", "target": "Processed", "value": 120},
            {"source": "Processed", "target": "Analytics", "value": 80},
        ],
    },
)
svg = sankey.render()
open("sankey.svg", "w").write(svg)

```

```python

# Render a UML class diagram

uml = DiagramBuilder(
    diagram_type="uml-class",
    inputs={
        "classes": [
            {"name": "User", "attributes": ["id", "email"], "methods": ["login()", "logout()"]},
            {"name": "Profile", "attributes": ["bio"], "methods": []},
        ],
        "relationships": [
            {"src": "User", "dst": "Profile", "type": "aggregation"},
        ],
    },
)
svg = uml.render()
open("uml_class.svg", "w").write(svg)

```

The `diagram_type` string must match the filename stem in the references directory (e.g., `"uml-class"` for [`type-uml-class.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-uml-class.md)). The `inputs` schema varies by type but always follows the constraints documented in the corresponding reference file.

## Key Implementation Files

Understanding the source structure helps when extending or debugging specific diagram types:

- [`skills/diagram-design/src/diagram_builder.py`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/src/diagram_builder.py) – Central factory that maps type strings to renderer classes and exposes the public `DiagramBuilder` API.
- `skills/diagram-design/src/types/*.py` – One Python module per diagram type containing parametric layout logic and SVG generation (e.g., [`architecture.py`](https://github.com/cathrynlavery/diagram-design/blob/main/architecture.py), [`bar.py`](https://github.com/cathrynlavery/diagram-design/blob/main/bar.py), [`sankey.py`](https://github.com/cathrynlavery/diagram-design/blob/main/sankey.py)).
- `skills/diagram-design/references/type-*.md` – Authoritative documentation for each diagram type, read by the validation engine to enforce constraints.
- [`skills/diagram-design/src/types/uml_class.py`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/src/types/uml_class.py) – Specific implementation for UML Class diagrams, handling inheritance and relationship rendering.
- [`skills/diagram-design/src/types/sankey.py`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/src/types/sankey.py) – Implementation for Sankey diagrams, managing flow values and stage positioning.

## Summary

- Diagram Design supports **39 parametric diagram types** ranging from software architecture to data visualization.
- Each type is defined by a **reference markdown file** (`skills/diagram-design/references/type-*.md`) that specifies visual constraints.
- The **`DiagramBuilder`** class in [`diagram_builder.py`](https://github.com/cathrynlavery/diagram-design/blob/main/diagram_builder.py) serves as the unified entry point for all diagram generation.
- Type-specific renderers in `skills/diagram-design/src/types/` handle validation, layout calculation, and SVG output via the **`render()`** method.
- All diagram types output pure SVG suitable for web or print workflows.

## Frequently Asked Questions

### How do I specify which diagram type to render?

Pass the type identifier to the `diagram_type` parameter when instantiating `DiagramBuilder`. The identifier must match the filename in `skills/diagram-design/references/` without the `type-` prefix and `.md` extension (e.g., `"sankey"` for [`type-sankey.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-sankey.md), `"uml-class"` for [`type-uml-class.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-uml-class.md)).

### What constraints does each diagram type enforce?

Every reference file in `skills/diagram-design/references/` defines **sizing limits**, **accent budgets**, and **visual grammar rules** specific to that diagram. The corresponding renderer module in `skills/diagram-design/src/types/` automatically validates the `inputs` dictionary against these rules before generating SVG.

### Where are the visual specifications documented?

Authoritative specifications reside in `skills/diagram-design/references/type-{name}.md` (markdown format for human readability), while the executable layout logic lives in `skills/diagram-design/src/types/{name}.py`. The separation ensures that documentation and implementation remain synchronized via the same naming convention.

### Can I extend Diagram Design with custom diagram types?

Yes. The modular architecture allows adding new types by creating a reference markdown file in `skills/diagram-design/references/` and a corresponding renderer class in `skills/diagram-design/src/types/`. The `DiagramBuilder` factory in [`diagram_builder.py`](https://github.com/cathrynlavery/diagram-design/blob/main/diagram_builder.py) can then be updated to map the new type string to your renderer class, following the existing 39-type pattern.