# What Kinds of Diagrams Can Diagram Design Create? 38 Editorial-Grade Visual Types Explained

> Discover the 38 diagram types Diagram Design creates. From software architecture to business analysis, get editorial-grade visuals rendered as HTML with inline SVG.

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

---

**Diagram Design can create 38 editorial-grade visual types spanning software architecture, data modeling, process flows, business analysis, and strategic frameworks, each rendered as self-contained HTML with inline SVG.**

The `cathrynlavery/diagram-design` repository is a specialized skill for AI agents that generates publication-ready diagrams without external dependencies. According to the source code in [`SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/SKILL.md), the system selects a visual type based on your request, then lazily loads the corresponding reference file containing layout grammar, styling rules, and accessibility contracts.

## Complete List of 38 Diagram Types in Diagram Design

### Software Architecture & System Design

- **Architecture** — Components and their connections in a system ([[`references/type-architecture.md`](https://github.com/cathrynlavery/diagram-design/blob/main/references/type-architecture.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-architecture.md))
- **IT current-state** — Legacy landscape plus modernization pathways ([[`type-it-state.md`](https://github.com/cathrynlavery/diagram-design/blob/main/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 ([[`type-high-level.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-high-level.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-high-level.md))
- **Deployment** — Zones, hosts, and artifacts ([[`type-deployment.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-deployment.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-deployment.md))
- **Dependency graph** — Fan-in, ranks, and cycles ([[`type-dependency.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-dependency.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-dependency.md))

### Process & Workflow Diagrams

- **Flowchart** — Decision logic with branches ([[`type-flowchart.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-flowchart.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-flowchart.md))
- **Sequence** — Time-ordered messages between actors ([[`type-sequence.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-sequence.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-sequence.md))
- **State machine** — States and transitions ([[`type-state.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-state.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-state.md))
- **Swimlane** — Cross-functional flow with hand-offs ([[`type-swimlane.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-swimlane.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-swimlane.md))
- **Process** — Multi-actor sequential workflow ([[`type-process.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-process.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-process.md))
- **Kanban** — Work-in-progress by state ([[`type-kanban.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-kanban.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-kanban.md))

### Data Modeling & Database Diagrams

- **ER / data model** — Entities, fields, and relationships ([[`type-er.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-er.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-er.md))
- **Medallion** — Multi-tier data storage architecture ([[`type-medallion.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-medallion.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-medallion.md))
- **Data flow** — Role-scoped pipeline steps ([[`type-data-flow.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-data-flow.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-data-flow.md))
- **DP integration** — Sources to core to consumers ([[`type-dp-integration.md`](https://github.com/cathrynlavery/diagram-design/blob/main/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 ([[`type-dp-security-matrix.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-dp-security-matrix.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-dp-security-matrix.md))
- **Database schema** — Physical tables with column foreign keys ([[`type-db-schema.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-db-schema.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-db-schema.md))

### Hierarchical & Structural Diagrams

- **Nested** — Hierarchy by containment ([[`type-nested.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-nested.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-nested.md))
- **Tree** — Parent-to-children relationships ([[`type-tree.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-tree.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-tree.md))
- **Org chart** — Ownership and routing ([[`type-org-chart.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-org-chart.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-org-chart.md))
- **Layer stack** — Stacked abstractions ([[`type-layers.md`](https://github.com/cathrynlavery/diagram-design/blob/main/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 visualization ([[`type-pyramid.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-pyramid.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-pyramid.md))

### Analytical & Comparative Diagrams

- **Quadrant** — Two-axis positioning and prioritization ([[`type-quadrant.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-quadrant.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-quadrant.md))
- **Radar / spider** — Multi-axis comparison ([[`type-radar.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-radar.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-radar.md))
- **Venn** — Set overlap visualization ([[`type-venn.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-venn.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-venn.md))
- **Bar chart** — Categorical comparison ([[`type-bar.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-bar.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-bar.md))
- **Treemap** — Part-of-whole by area ([[`type-treemap.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-treemap.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-treemap.md))
- **Line chart** — Trends over time or slopegraph ([[`type-line.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-line.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-line.md))
- **Scatter plot** — Distribution and correlation ([[`type-scatter.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-scatter.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-scatter.md))
- **Sankey** — Quantities that split and merge ([[`type-sankey.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-sankey.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-sankey.md))

### Strategic & Business Frameworks

- **Timeline** — Events positioned on an axis ([[`type-timeline.md`](https://github.com/cathrynlavery/diagram-design/blob/main/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 ([[`type-gantt.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-gantt.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-gantt.md))
- **Loop / flywheel** — Reinforcing cycle with shared hub ([[`type-loop.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-loop.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-loop.md))
- **Fishbone** — Grouped causes leading to one effect, for root-cause analysis ([[`type-fishbone.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-fishbone.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-fishbone.md))
- **Wardley map** — Value chain by evolution ([[`type-wardley.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-wardley.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-wardley.md))
- **User journey** — Stages, actions, and sentiment tracking ([[`type-journey.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-journey.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-journey.md))
- **Story map** — Backbone by release slices ([[`type-story-map.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-story-map.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-story-map.md))

### UML & Formal Modeling

- **UML class** — Classes, operations, and typed relations ([[`type-uml-class.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-uml-class.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-uml-class.md))

## How Diagram Design Selects and Renders Diagram Types

The runtime architecture follows a three-phase pipeline defined in [`SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/SKILL.md) (lines 1-4):

1. **Manifest loading** — The agent loads [`SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/SKILL.md) to access the 38-type catalog and design system philosophy
2. **Visual type selection** — Based on your request, the skill selects a visual type and optionally a semantic pattern
3. **Lazy reference loading** — The matching `references/type-*.md` file is loaded on demand, containing layout grammar, styling rules, and accessibility contracts

Semantic patterns are loaded only when behavior matters, as documented in the "Selection: semantic pattern, then visual type" section. Optional motion is gated by [`animation.md`](https://github.com/cathrynlavery/diagram-design/blob/main/animation.md).

## Output Formats and Styling Variants

Every diagram type in Diagram Design renders to **three static variants**:

- **Minimal light** — Clean, low-ink design for documents
- **Minimal dark** — Inverted for dark-mode presentations
- **Full-editorial** — Rich styling with gradients and depth

Optional enhancements include accessible motion, sketchy hand-drawn styling, and terminal-window styling. All outputs are **self-contained HTML with inline SVG** — no external JavaScript, CSS, or image dependencies except Google Fonts.

### Running the Local Gallery

Browse every example in all variants:

```bash

# macOS

open skills/diagram-design/assets/index.html

# Linux

xdg-open skills/diagram-design/assets/index.html

```

## Importing and Converting Existing Diagrams

Diagram Design supports **importing** existing sources and redrawing them into any of its 38 visual types:

| Source format | Extraction script | Behavior |
|:---|:---|:---|
| draw.io (`.drawio`) | [[`scripts/drawio_extract.py`](https://github.com/cathrynlavery/diagram-design/blob/main/scripts/drawio_extract.py)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/scripts/drawio_extract.py) | Extracts structured IR, preserves content, discards original layout/colors/fonts |
| Mermaid (`.mmd`) | [[`scripts/mermaid_extract.py`](https://github.com/cathrynlavery/diagram-design/blob/main/scripts/mermaid_extract.py)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/scripts/mermaid_extract.py) | Extracts structured IR, preserves content, discards original layout/colors/fonts |

### Import Commands

```bash

# Import draw.io and redraw as high-detail architecture diagram

/diagram-design:import-drawio platform.drawio --size=slide-16x9 --detail=faithful

# Export generated diagram to SVG and PNG

export-diagram path/to/diagram.html --svg-only
export-diagram path/to/diagram.html --png-only --scale=3

```

## Key Implementation Files

| File | Purpose |
|:---|:---|
| [`SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/SKILL.md) | Manifest describing 38 visual types, design system, and pre-output checklist |
| `references/type-*.md` | Layout grammars for each visual type |
| `assets/template*.html` | Scaffold HTML for minimal light, minimal dark, full-editorial, and motion variants |
| `assets/example-*.html` | Example outputs for every type |
| [`scripts/self_check.py`](https://github.com/cathrynlavery/diagram-design/blob/main/scripts/self_check.py) | Runtime validation of accessibility, motion contracts, and SVG safety |
| `commands/*.md` | Slash-command definitions for agents (export, import-drawio, import-mermaid, profile) |

## Summary

- **Diagram Design creates 38 editorial-grade diagram types** across architecture, data, process, hierarchy, analytics, strategy, and UML categories
- **Each type has a dedicated reference file** in `references/type-*.md` defining layout grammar and styling rules
- **Outputs are self-contained HTML/SVG** with three styling variants plus optional motion and hand-drawn effects
- **Import pipeline** converts draw.io and Mermaid sources into any Diagram Design visual type
- **No external dependencies** except Google Fonts — ideal for embedding in documents and presentations

## Frequently Asked Questions

### What diagram format does Diagram Design output?

Diagram Design outputs **self-contained HTML with inline SVG**, plus optional PNG export. The HTML embeds all CSS and uses only Google Fonts as an external dependency. No JavaScript or image assets are required at runtime.

### Can I convert my existing Mermaid or draw.io diagrams?

Yes. Use [[`scripts/mermaid_extract.py`](https://github.com/cathrynlavery/diagram-design/blob/main/scripts/mermaid_extract.py)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/scripts/mermaid_extract.py) or [[`scripts/drawio_extract.py`](https://github.com/cathrynlavery/diagram-design/blob/main/scripts/drawio_extract.py)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/scripts/drawio_extract.py) to extract a structured intermediate representation, then redraw into any of the 38 Diagram Design visual types. The content is preserved; original layout, colors, and fonts are discarded.

### How do I request a specific diagram type from an AI agent?

Reference the visual type directly in your prompt. For example: "Make me an **architecture diagram** of my app: frontend, backend, database, Redis cache" or "I need a **quadrant** showing Q2 projects by impact vs effort." The agent loads [`SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/SKILL.md), selects the matching type, and lazy-loads the corresponding `references/type-*.md` file.