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

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, 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/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/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/skills/diagram-design/references/type-high-level.md))
• Deployment — Zones, hosts, and artifacts ([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/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/skills/diagram-design/references/type-flowchart.md))
• Sequence — Time-ordered messages between actors ([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/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/skills/diagram-design/references/type-swimlane.md))
• Process — Multi-actor sequential workflow ([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/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/skills/diagram-design/references/type-er.md))
• Medallion — Multi-tier data storage architecture ([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/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/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/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/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/skills/diagram-design/references/type-nested.md))
• Tree — Parent-to-children relationships ([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/skills/diagram-design/references/type-org-chart.md))
• Layer stack — Stacked abstractions ([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/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/skills/diagram-design/references/type-quadrant.md))
• Radar / spider — Multi-axis comparison ([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/skills/diagram-design/references/type-venn.md))
• Bar chart — Categorical comparison ([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/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/skills/diagram-design/references/type-line.md))
• Scatter plot — Distribution and correlation ([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/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/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/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/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/skills/diagram-design/references/type-fishbone.md))
• Wardley map — Value chain by evolution ([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/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/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/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 (lines 1-4):

1. Manifest loading — The agent loads 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.

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:

# 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/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/skills/diagram-design/scripts/mermaid_extract.py)	Extracts structured IR, preserves content, discards original layout/colors/fonts

Import Commands

# 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	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	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/skills/diagram-design/scripts/mermaid_extract.py) or [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, selects the matching type, and lazy-loads the corresponding references/type-*.md file.

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