# Complete Guide to Specialized Diagram Types in Diagram-Design

> Explore 28 specialized diagram types in Diagram-Design. Learn how to use the /diagram-design:make command and find reference files for each type.

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

---

**Diagram-Design ships with 28 specialized diagram types, each defined in individual reference files under `skills/diagram-design/references/` and invoked via the `/diagram-design:make` command.**

The `cathrynlavery/diagram-design` repository is an open-source skill for AI coding agents that automates technical visualization. It provides **specialized diagram types** ranging from architecture blueprints to data security matrices, automatically selecting the optimal layout based on semantic context and rendering output in static HTML, SVG, or PNG formats.

## Full Catalog of Diagram Types

The 28 visual types are organized into five functional categories. Each type corresponds to a `type-{name}.md` file in the `skills/diagram-design/references/` directory.

### Structural and Hierarchical Diagrams

These types map ownership, containment, and rank:

- **Architecture**: Components and connections for system design.
- **Nested**: Hierarchy by visual containment.
- **Tree**: Parent-to-children branching structures.
- **Org chart**: Ownership and routing relationships.
- **Layer stack**: Stacked abstractions and tiered systems.
- **Pyramid / funnel**: Ranked hierarchies or drop-off analysis.

### Process and Flow Diagrams

These visualize logic, state changes, and workflows:

- **Flowchart**: Decision-logic flows and control paths.
- **Sequence**: Messages exchanged over time between actors.
- **State machine**: States and transition triggers.
- **Swimlane**: Cross-functional flows across responsibility boundaries.
- **Process**: Multi-actor sequential workflows.
- **Loop**: Flywheel patterns with stations arranged around a central hub.

### Data Modeling and Integration

Types for database design, pipelines, and security:

- **ER / data model**: Entities, fields, and relationships.
- **Data flow**: Role-scoped pipeline steps.
- **Medallion**: Multi-tier data storage architectures.
- **DP integration**: Data platform flows from sources to core to consumers.
- **DP security matrix**: Per-role access permissions and controls.

### Analytical and Strategic Frameworks

Matrices and comparisons for business analysis:

- **Quadrant**: Two-axis positioning maps.
- **Consultant 2×2**: Scenario matrices with named cells.
- **Radar / Spider**: Multi-axis performance comparisons.
- **Venn**: Set overlap and intersection analysis.
- **IT current-state**: Legacy landscape documentation and modernization planning.
- **High-Level**: End-to-end stack overviews on a cluster.

### Temporal and Statistical Visualizations

Charts for time-series and distribution analysis:

- **Timeline**: Events plotted on a chronological axis.
- **Gantt**: Tasks and phases on a project timeline.
- **Bar chart**: Categorical comparisons.
- **Line chart**: Trends over continuous time.
- **Scatter plot**: Distribution and correlation analysis.

## Command Reference and Usage

Diagram-Design exposes a unified interface across Claude Code, Codex, and Pi agents. The skill parses natural language requests to select the appropriate template from the 28 available types.

### Claude Code and Codex Syntax

Use the slash command followed by the type key and description:

```bash

# General pattern

/diagram-design:make <type> "<description>"

# Architecture diagram example

/diagram-design:make architecture "frontend, backend, database, Redis cache"

# Strategic quadrant example

/diagram-design:make quadrant "impact vs effort for Q2 projects"

# Project timeline example

/diagram-design:make gantt "plan, design, develop, launch – 2024 Q3"

```

### Pi Agent Syntax

For Pi-compatible environments, use natural language prompts:

```bash
pi ask "Make me a <type> diagram of <subject>"

```

All commands render **static HTML** by default, with optional export to **SVG** or **PNG** formats.

## Repository Structure and Source Files

The diagram type definitions are modularized across the `skills/diagram-design/` directory tree.

### Reference Files

Each specialized type is documented in a standalone markdown file following the `type-*.md` naming convention:

- **Path pattern**: `skills/diagram-design/references/type-{diagram-name}.md`
- **Examples**: [`type-architecture.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-architecture.md), [`type-quadrant.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-quadrant.md), [`type-gantt.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-gantt.md)

These files contain the visual grammar, layout constraints, and rendering parameters for their respective diagram types.

### Skill Configuration

The root skill definition resides in [`skills/diagram-design/SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/SKILL.md). This file maps user intent to specific reference types and defines the selection logic used when agents automatically choose a diagram format.

### Visual Gallery and Templates

Pre-rendered examples and scaffolding files are located in the assets directory:

- **[`skills/diagram-design/assets/index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/index.html)**: Interactive gallery displaying all 28 diagram types in light, dark, and full-editorial visual variants.
- **`skills/diagram-design/assets/template*.html`**: Scaffold HTML files for rapid customization of new diagrams.

## Summary

Diagram-Design provides a comprehensive, code-driven approach to technical visualization:

- **28 specialized diagram types** covering architecture, process, data, and analytical use cases.
- **Modular reference files** stored in `skills/diagram-design/references/` (e.g., [`type-architecture.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-architecture.md)).
- **Unified command interface** (`/diagram-design:make`) compatible with Claude Code, Codex, and Pi.
- **Multiple output formats** including static HTML, SVG, and PNG.
- **Live gallery** at [`skills/diagram-design/assets/index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/index.html) for visual reference.

## Frequently Asked Questions

### How does Diagram-Design automatically select the appropriate diagram type?

The skill uses semantic parsing logic defined in [`skills/diagram-design/SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/SKILL.md) to match user descriptions against keywords and structural patterns associated with each of the 28 reference types. For example, detecting temporal sequences triggers the **Gantt** or **Timeline** types.

### Can I create custom diagram types in Diagram-Design?

While the repository ships with 28 pre-defined types in `skills/diagram-design/references/`, you can extend functionality by creating new `type-{custom}.md` files following the existing reference format and updating the skill configuration in [`SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/SKILL.md) to recognize the new patterns.

### What output formats does Diagram-Design support?

By default, diagrams render as **static HTML** for web embedding. The toolchain also supports export to **SVG** for vector graphics and **PNG** for rasterized images, selectable via export flags in the generation command.

### Where can I view visual examples of all diagram types?

The repository includes a live gallery at [`skills/diagram-design/assets/index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/index.html) that renders every specialized type in three visual variants: light mode, dark mode, and full-editorial styling.