# The 27 Available Diagram Types in diagram-design: Complete Visual Reference

> Explore the 27 diagram types in diagram-design, from Architecture and Flowchart to Medallion and DP Security Matrix. Get a complete visual reference for your technical documentation.

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

---

**The cathrynlavery/diagram-design repository ships with 27 distinct visual diagram types, each defined in dedicated reference files under `skills/diagram-design/references/` ranging from Architecture and Flowchart to specialized data platform types like Medallion and DP Security Matrix.**

The `diagram-design` skill provides a comprehensive visualization framework for technical documentation and system design. According to the **Visual-type guide** documented in [`SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/SKILL.md) (lines 81‑112), the repository specifies 27 unique diagram types with standardized layout grammars, styling rules, and example assets.

## Complete Catalog of diagram-design Diagram Types

Each diagram type has its own layout‑specific reference file (`type‑<name>.md`) that defines visualization rules, semantic patterns, and rendering behavior.

### System and Structure Diagrams

- **Architecture**: Components and connections in a system (`type‑architecture.md`)
- **IT Current‑State**: Legacy IT landscapes grouped by phase or department (`type‑it‑state.md`)
- **High‑Level**: End‑to‑end data stack on container clusters (`type‑high‑level.md`)
- **Layer Stack**: Stacked abstraction levels (`type‑layers.md`)
- **Nested**: Hierarchy through containment and scope (`type‑nested.md`)
- **Tree**: Parent‑to‑children relationships (`type‑tree.md`)
- **Org Chart**: Human, agent, or team ownership with reporting and escalation paths (`type‑org‑chart.md`)

### Process and Flow Diagrams

- **Flowchart**: Decision logic with conditional branches (`type‑flowchart.md`)
- **Sequence**: Time‑ordered messages between actors (`type‑sequence.md`)
- **State Machine**: States, transitions, and guard conditions (`type‑state.md`)
- **Swimlane**: Cross‑functional processes with handoffs between lanes (`type‑swimlane.md`)
- **Process**: Multi‑actor sequential process with data handoffs (`type‑process.md`)
- **Data Flow**: Role‑scoped data flow showing who does what at each pipeline step (`type‑data‑flow.md`)
- **Loop**: Reinforcing cycles and flywheel effects (`type‑loop.md`)

### Data and Analytics Diagrams

- **ER / Data Model**: Entities, fields, and relationships (`type‑er.md`)
- **Quadrant**: Two‑axis positioning and prioritization matrices (`type‑quadrant.md`)
- **Radar / Spider**: Multiple entities scored across 3‑5 criteria (`type‑radar.md`)
- **Venn**: Overlap between sets (`type‑venn.md`)
- **Pyramid / Funnel**: Ranked hierarchies or conversion drop‑off visualization (`type‑pyramid.md`)
- **Bar Chart**: Quantitative comparison across categories (`type‑bar.md`)
- **Line Chart**: Continuous trends over time (`type‑line.md`)
- **Scatter Plot**: Distribution and correlation between two variables (`type‑scatter.md`)
- **Medallion**: Multi‑tier data storage with quality levels and access policies (`type‑medallion.md`)

### Timeline and Project Management

- **Timeline**: Events positioned in chronological order (`type‑timeline.md`)
- **Gantt**: Tasks and phases displayed on a timeline (`type‑gantt.md`)

### Data Platform Specific

- **DP Integration**: Integration topology mapping sources to core to consumers (`type‑dp‑integration.md`)
- **DP Security Matrix**: Per‑role and per‑component access‑permissions matrix (`type‑dp‑security‑matrix.md`)

## How to Use diagram-design Diagram Types

The skill architecture expects you to load the appropriate `type‑*.md` file before rendering a diagram. Each type imports its layout grammar through HTML module imports.

### Basic Implementation Pattern

```html
<!-- Save as architecture.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Architecture Diagram</title>
  <link href="template.html" rel="import">
</head>
<body>
  <script type="module">
    import "/skills/diagram-design/references/type-architecture.md";
    // SVG content renders according to Architecture grammar
  </script>
</body>
</html>

```

*Replace `type‑architecture.md` with any other type file (e.g., `type‑flowchart.md`, `type‑gantt.md`) to switch diagram categories.*

### Using Template Variants

For complex layouts requiring full styling capabilities, import the `template‑full.html` variant:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Swimlane Process</title>
  <link href="template-full.html" rel="import">
</head>
<body>
  <script type="module">
    import "/skills/diagram-design/references/type-swimlane.md";
    // Populate with lanes, steps, and connectors
  </script>
</body>
</html>

```

### Pre-built Example Assets

The repository ships ready‑to‑view HTML files for every diagram type. Open these directly in a browser to see fully rendered implementations:

- [`assets/example-architecture.html`](https://github.com/cathrynlavery/diagram-design/blob/main/assets/example-architecture.html)
- [`assets/example-venn.html`](https://github.com/cathrynlavery/diagram-design/blob/main/assets/example-venn.html)
- [`assets/example-gantt.html`](https://github.com/cathrynlavery/diagram-design/blob/main/assets/example-gantt.html)
- [`assets/example-medallion.html`](https://github.com/cathrynlavery/diagram-design/blob/main/assets/example-medallion.html)

## Key Reference Files and Architecture

Understanding the file structure helps navigate the 27 diagram type implementations:

- **[`SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/SKILL.md)**: Skill entry point containing the Visual‑type guide (lines 81‑112) that enumerates all 27 types
- **`references/type‑*.md`**: 27 dedicated files defining layout‑specific grammars (e.g., `type‑sequence.md`, `type‑radar.md`)
- **[`references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/references/style-guide.md)**: Global design tokens including brand colors and typography
- **[`references/semantic-patterns.md`](https://github.com/cathrynlavery/diagram-design/blob/main/references/semantic-patterns.md)**: Behavior‑driven layout catalogue
- **`assets/template*.html`**: Base templates including light, dark, full, motion, and terminal variants
- **`assets/example‑<type>.html`**: Pre‑rendered demonstrations for each diagram category

## Summary

- **diagram-design** provides **27 distinct diagram types** covering structural, process, data analytics, timeline, and data platform visualization needs.
- Each type is governed by a dedicated reference file in `skills/diagram-design/references/`.
- Implementation requires importing the specific `type‑*.md` file via HTML modules before rendering SVG content.
- Ready‑made examples exist for all types in the `assets/` directory.

## Frequently Asked Questions

### How many diagram types does diagram-design support?

The repository supports **27 distinct visual diagram types** as documented in [`SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/SKILL.md) lines 81‑112. This includes general‑purpose types like Flowchart and Sequence, analytical types like Radar and Scatter Plot, and domain‑specific types like Medallion and DP Security Matrix for data platform architecture.

### Where are the diagram type definitions located in the repository?

Each diagram type has a dedicated Markdown reference file located in `skills/diagram-design/references/` using the naming convention `type‑<name>.md`. For example, Architecture diagrams are defined in `type‑architecture.md`, while Gantt charts are defined in `type‑gantt.md`.

### How do I implement a specific diagram type like Architecture or Gantt?

Create an HTML file that imports the corresponding reference module. Use `<script type="module">` to import the specific type file (e.g., `import "/skills/diagram-design/references/type-architecture.md";`), then populate the SVG content following that type's grammar rules. The repository provides working templates in `assets/template*.html` to ensure proper styling and layout behavior.

### Can I customize the styling for diagram-design diagram types?

Yes. Global styling is controlled through [`references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/references/style-guide.md), which defines brand colors, typography, and design tokens. For behavior‑driven customizations, refer to [`references/semantic-patterns.md`](https://github.com/cathrynlavery/diagram-design/blob/main/references/semantic-patterns.md). Individual diagram types inherit these tokens while maintaining their specific layout grammars defined in their respective `type‑*.md` files.