# What Are the 28 Visual Diagram Types in Diagram Design? Complete Reference

> Discover the 28 visual diagram types supported by the cathrynlavery diagram design library. Explore this comprehensive reference for all diagram design needs.

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

---

**The `cathrynlavery/diagram-design` library supports 28 core visual diagram types, each defined in a dedicated reference file under `skills/diagram-design/references/` and rendered as self-contained HTML diagrams.**

The Diagram Design library ships a comprehensive gallery of visual diagram types designed for editorial and technical communication. Every type is backed by its own markdown reference that controls layout, styling, and semantics according to the central [`style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/style-guide.md). The complete set of **28 visual diagram types** covers everything from system architecture to data analytics and strategic planning.

## System and Process Diagrams

These types model workflows, decisions, and component interactions.

- **Architecture** — Components and connections. Defined in [`skills/diagram-design/references/type-architecture.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-architecture.md).
- **Flowchart** — Decision-logic flow. Defined in [`skills/diagram-design/references/type-flowchart.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-flowchart.md).
- **Sequence** — Messages over time. Defined in [`skills/diagram-design/references/type-sequence.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-sequence.md).
- **State machine** — States and transitions. Defined in [`skills/diagram-design/references/type-state.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-state.md).
- **Process** — Multi-actor sequential workflow. Defined in [`skills/diagram-design/references/type-process.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-process.md).
- **Swimlane** — Cross-functional flow. Defined in [`skills/diagram-design/references/type-swimlane.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-swimlane.md).

## Data and Timeline Visualizations

Use these types to represent data models, pipelines, and temporal plans.

- **ER / Data model** — Entities and fields. Defined in [`skills/diagram-design/references/type-er.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-er.md).
- **Timeline** — Events on an axis. Defined in [`skills/diagram-design/references/type-timeline.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-timeline.md).
- **Gantt** — Tasks and phases on a timeline. Defined in [`skills/diagram-design/references/type-gantt.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-gantt.md).
- **Data flow** — Role-scoped pipeline steps. Defined in [`skills/diagram-design/references/type-data-flow.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-data-flow.md).
- **Medallion** — Multi-tier data storage. Defined in [`skills/diagram-design/references/type-medallion.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-medallion.md).
- **DP integration** — Sources to core to consumers. Defined in [`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** — Per-role access permissions. Defined in [`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).

## Hierarchy and Structure Diagrams

These diagrams express ranked, nested, or layered relationships.

- **Nested** — Hierarchy by containment. Defined in [`skills/diagram-design/references/type-nested.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-nested.md).
- **Tree** — Parent to children. Defined in [`skills/diagram-design/references/type-tree.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-tree.md).
- **Org chart** — Ownership and routing. Defined in [`skills/diagram-design/references/type-org-chart.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-org-chart.md).
- **Layers** — Stacked abstractions. Defined in [`skills/diagram-design/references/type-layers.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-layers.md).
- **Pyramid / Funnel** — Ranked hierarchy or drop-off. Defined in [`skills/diagram-design/references/type-pyramid.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-pyramid.md).

## Comparison and Analytical Charts

Visualize distributions, correlations, set overlaps, and multi-axis comparisons.

- **Quadrant** — Two-axis positioning. Defined in [`skills/diagram-design/references/type-quadrant.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-quadrant.md).
- **Venn** — Set overlap. Defined in [`skills/diagram-design/references/type-venn.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-venn.md).
- **Radar / Spider** — Multi-axis comparison. Defined in [`skills/diagram-design/references/type-radar.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-radar.md).
- **Loop** — Flywheel and stations around a hub. Defined in [`skills/diagram-design/references/type-loop.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-loop.md).
- **Bar chart** — Categorical comparison. Defined in [`skills/diagram-design/references/type-bar.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-bar.md).
- **Line chart** — Trends over time. Defined in [`skills/diagram-design/references/type-line.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-line.md).
- **Scatter plot** — Distribution and correlation. Defined in [`skills/diagram-design/references/type-scatter.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-scatter.md).
- **Treemap** — Part-of-whole by area. Defined in [`skills/diagram-design/references/type-treemap.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-treemap.md).

## Specialized IT and Strategic Views

High-level and legacy-landscape diagrams for enterprise contexts.

- **IT current-state** — Legacy landscape and modernization. Defined in [`skills/diagram-design/references/type-it-state.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-it-state.md).
- **High-Level** — End-to-end stack on a cluster. Defined in [`skills/diagram-design/references/type-high-level.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-high-level.md).

## Rendering Variants and Gallery Output

Every diagram type is rendered in three static variants: **minimal light**, **minimal dark**, and **full-editorial**. The live gallery is available at [`skills/diagram-design/assets/index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/index.html), and example outputs are stored as `example-<type>.html` in the same directory.

## How to Invoke a Diagram Type

You can request any of the **28 visual diagram types** during a Claude Code, Codex, or Pi session. Replace `<type-name>` with the desired identifier, such as `architecture`, `flowchart`, or `radar`.

```text

# Basic request – the skill auto-selects the correct type

Make me a <type-name> diagram of my web service.

# Explicitly naming the type (useful when multiple matches exist)

Make a <type-name> showing the data model for orders.

```

For Pi slash commands, use:

```text
/diagram-design:import-mermaid my-diagram.mmd --type <type-name>
/export-diagram path/to/<type-name>.html --svg-only

```

## Key Source Files

The library architecture is organized around four core file groups:

- **[`skills/diagram-design/SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/SKILL.md)** — The main skill description and type-selection guide.
- **`skills/diagram-design/references/type-*.md`** — Individual reference files that define layout, styling, and semantics for each visual type (the 28 files listed above).
- **`skills/diagram-design/assets/`** — HTML templates and example outputs (`example-<type>.html`) for every diagram type.
- **[`skills/diagram-design/references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md)** — Central source of truth for colors, fonts, and other visual tokens used by all diagram types.

## Summary

- The `cathrynlavery/diagram-design` library supports **28 visual diagram types** ranging from flowcharts to treemaps.
- Each type has a dedicated reference file in `skills/diagram-design/references/type-<name>.md`.
- Diagrams render in three static variants: minimal light, minimal dark, and full-editorial.
- The live gallery is hosted at [`skills/diagram-design/assets/index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/index.html).
- Use natural language or slash commands to generate any supported type from compatible AI coding sessions.

## Frequently Asked Questions

### What are the 28 visual diagram types supported by Diagram Design?

The library supports Architecture, Flowchart, Sequence, State machine, ER/Data model, Timeline, Swimlane, Quadrant, Nested, Tree, Org chart, Venn, Layers, Pyramid/Funnel, Radar/Spider, Loop, IT current-state, High-Level, Bar chart, Line chart, Gantt, Scatter plot, Process, Medallion, Data flow, DP integration, DP security matrix, and Treemap. Each type is defined in its own markdown reference under `skills/diagram-design/references/`. All 28 types are rendered in minimal light, minimal dark, and full-editorial variants.

### How do I render a diagram in Diagram Design?

Diagram Design renders each type as a self-contained HTML diagram in three variants: minimal light, minimal dark, and full-editorial. Example outputs live in `skills/diagram-design/assets/` and the gallery is viewable at [`skills/diagram-design/assets/index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/index.html).

### Where are the diagram type definitions stored?

Every diagram type is stored as a markdown reference file in `skills/diagram-design/references/`, following the naming convention `type-<name>.md`. Shared visual tokens are centralized in [`skills/diagram-design/references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md).

### Can I generate these diagrams from an AI coding assistant?

Yes. You can invoke any of the 28 types with natural language requests like `Make me a flowchart diagram of my web service`, or use Pi slash commands such as `/diagram-design:import-mermaid my-diagram.mmd --type flowchart` and `/export-diagram path/to/diagram.html --svg-only`.