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

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. 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.
• Flowchart — Decision-logic flow. Defined in skills/diagram-design/references/type-flowchart.md.
• Sequence — Messages over time. Defined in skills/diagram-design/references/type-sequence.md.
• State machine — States and transitions. Defined in skills/diagram-design/references/type-state.md.
• Process — Multi-actor sequential workflow. Defined in skills/diagram-design/references/type-process.md.
• Swimlane — Cross-functional flow. Defined in 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.
• Timeline — Events on an axis. Defined in skills/diagram-design/references/type-timeline.md.
• Gantt — Tasks and phases on a timeline. Defined in skills/diagram-design/references/type-gantt.md.
• Data flow — Role-scoped pipeline steps. Defined in skills/diagram-design/references/type-data-flow.md.
• Medallion — Multi-tier data storage. Defined in skills/diagram-design/references/type-medallion.md.
• DP integration — Sources to core to consumers. Defined in 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.

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.
• Tree — Parent to children. Defined in skills/diagram-design/references/type-tree.md.
• Org chart — Ownership and routing. Defined in skills/diagram-design/references/type-org-chart.md.
• Layers — Stacked abstractions. Defined in skills/diagram-design/references/type-layers.md.
• Pyramid / Funnel — Ranked hierarchy or drop-off. Defined in 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.
• Venn — Set overlap. Defined in skills/diagram-design/references/type-venn.md.
• Radar / Spider — Multi-axis comparison. Defined in skills/diagram-design/references/type-radar.md.
• Loop — Flywheel and stations around a hub. Defined in skills/diagram-design/references/type-loop.md.
• Bar chart — Categorical comparison. Defined in skills/diagram-design/references/type-bar.md.
• Line chart — Trends over time. Defined in skills/diagram-design/references/type-line.md.
• Scatter plot — Distribution and correlation. Defined in skills/diagram-design/references/type-scatter.md.
• Treemap — Part-of-whole by area. Defined in 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.
• High-Level — End-to-end stack on a cluster. Defined in 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, 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.

# 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:

/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 — 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 — 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.
• 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.

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.

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.

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