api-reference

Supported Diagram Types in Diagram Design: The Complete Catalog

August 22, 2026 cathrynlavery/diagram-design ↗

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 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.

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 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 or 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.

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)


# 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). 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 – 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, bar.py, 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 – Specific implementation for UML Class diagrams, handling inheritance and relationship rendering.
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 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, "uml-class" for 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 can then be updated to map the new type string to your renderer class, following the existing 39-type pattern.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:

curl -s "https://instagit.com/install.md"

Add to your MCP client configuration:

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}

Ask your agent:

"Use Instagit MCP to understand how cathrynlavery/diagram-design works."

Works with

Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →