Diagram Design Visual Types: Complete Guide to All 27 Supported Diagram Types

Diagram Design supports exactly 27 distinct visual diagram types, each defined in dedicated reference files under skills/diagram-design/references/ with specialized rendering rules and layout engines.

The Diagram Design library (maintained by cathrynlavery/diagram-design) provides a comprehensive taxonomy of diagram types for technical documentation, system architecture, and data visualization. Every type ships with its own reference specification that governs layout constraints, connector primitives, and styling defaults—ensuring consistent output across HTML, PNG, and interactive exports.

Complete List of All 27 Diagram Design Visual Types

The 27 diagram types span six functional categories: classic charting, hierarchical structures, process workflows, state-based visualizations, specialized layouts, and enterprise architecture patterns.

Classic Charting Types

| # | Diagram Type | Reference File | Primary Use Case |

|---|-------------|----------------|------------------| | 1 | Bar | type-bar.md | Categorical data comparison | | 2 | Line | type-line.md | Trend analysis over time | | 3 | Scatter | type-scatter.md | Correlation and distribution analysis | | 4 | Radar | type-radar.md | Multi-variable performance metrics | | 5 | Pyramid | type-pyramid.md | Hierarchical proportions (e.g., Maslow's hierarchy, food chain) | | 6 | Quadrant | type-quadrant.md | Two-axis positioning matrices (e.g., Gartner Magic Quadrant) |

Hierarchical and Structural Types

| # | Diagram Type | Reference File | Primary Use Case |

|---|-------------|----------------|------------------| | 7 | Tree | type-tree.md | Parent-child node relationships | | 8 | Org-Chart | type-org-chart.md | Organizational reporting structures | | 9 | Nested | type-nested.md | Containment hierarchies with visual nesting | | 10 | Architecture | type-architecture.md | System and software architecture diagrams | | 11 | Layers | type-layers.md | Stack-based abstractions (OSI model, tech stacks) |

Process and Workflow Types

| # | Diagram Type | Reference File | Primary Use Case |

|---|-------------|----------------|------------------| | 12 | Flowchart | type-flowchart.md | Decision logic and procedural flows | | 13 | Process | type-process.md | Business process modeling | | 14 | Sequence | type-sequence.md | Object interaction over time (UML) | | 15 | Swimlane | type-swimlane.md | Cross-functional process flows | | 16 | Gantt | type-gantt.md | Project schedules and timelines | | 17 | Timeline | type-timeline.md | Chronological event visualization |

State and Dynamic System Types

| # | Diagram Type | Reference File | Primary Use Case |

|---|-------------|----------------|------------------| | 18 | State | type-state.md | Finite state machines and state transitions | | 19 | IT State | type-it-state.md | IT infrastructure state monitoring | | 20 | Data Flow | type-data-flow.md | Information movement through systems (DFD) |

Specialized Layout Types

| # | Diagram Type | Reference File | Primary Use Case |

|---|-------------|----------------|------------------| | 21 | Venn | type-venn.md | Set theory and overlapping categories | | 22 | Loop | type-loop.md | Cyclical processes and feedback systems | | 23 | Medallion | type-medallion.md | Centered hub-and-spoke diagrams | | 24 | High-Level | type-high-level.md | Executive summary visualizations |

Enterprise Architecture Types

| # | Diagram Type | Reference File | Primary Use Case |

|---|-------------|----------------|------------------| | 25 | DP Security Matrix | type-dp-security-matrix.md | Data protection security posture assessment | | 26 | DP Integration | type-dp-integration.md | Data protection integration patterns | | 27 | ER | type-er.md | Entity-relationship database modeling |

Working with Diagram Types in Diagram Design

Specifying Types in CLI Commands

Diagram Design exposes the --type flag on import commands to override automatic type detection. Each command references the corresponding type-*.md specification at skills/diagram-design/references/[type-name].md.

Import a Mermaid file with explicit type assignment:

diagram-design import-mermaid my-diagram.mmd --type gantt

Force architecture type detection on Draw.io import:

diagram-design import-drawio my-diagram.drawio --type architecture

Export with default type inference:

diagram-design export-diagram --output diagram.html

Rendering Pipeline Architecture

All 27 types flow through a unified rendering engine defined in the core library. The process works as follows:

1. Type Detection: Automatic inference from source file structure, or manual override via --type
2. Spec Loading: Reference file loaded from skills/diagram-design/references/type-[name].md
3. Constraint Validation: Python scripts in scripts/*.py enforce type-specific rules (e.g., edge constraints for DP Security Matrix)
4. Template Selection: HTML template chosen from assets/template-*.html (light, dark, full variants)
5. Output Generation: Final render to HTML, PNG, or interactive format

Key Source Files for Diagram Type Implementation

File Path	Purpose
skills/diagram-design/references/*.md	Authoritative specifications for all 27 diagram types
commands/import-mermaid.md	CLI docs for Mermaid import with --type option
commands/import-drawio.md	CLI docs for Draw.io import with --type option
commands/export-diagram.md	Export command documentation
assets/template-*.html	Rendering templates for visual output
scripts/*.py	Validation scripts enforcing diagram-type constraints

Selecting the Right Diagram Type

Choose based on your communication goal:

• Comparing quantities → Bar, Radar
• Showing change over time → Line, Timeline, Gantt
• Modeling decisions → Flowchart, State, IT State
• Mapping relationships → ER, Tree, Venn
• Architecting systems → Architecture, Layers, Data Flow
• Compliance documentation → DP Security Matrix, DP Integration
• Executive presentations → High-Level, Quadrant, Pyramid

Summary

• Diagram Design provides 27 fixed visual diagram types, each with dedicated reference specifications in skills/diagram-design/references/
• Types are organized into six functional categories: charting, hierarchical, process, state, specialized layouts, and enterprise architecture
• The --type CLI flag overrides automatic detection on import-mermaid and import-drawio commands
• Validation scripts in scripts/*.py enforce type-specific constraints (e.g., DP Security Matrix edge rules)
• HTML templates in assets/template-*.html handle final rendering across light, dark, and full variants

Frequently Asked Questions

How do I force a specific diagram type when importing?

Use the --type flag followed by the lowercase type name. For example: diagram-design import-mermaid file.mmd --type sequence. This bypasses automatic detection and loads the corresponding reference specification from skills/diagram-design/references/type-sequence.md.

Can I create custom diagram types beyond the 27 supported?

No. The 27 types constitute a fixed taxonomy designed for consistency across outputs. The architecture intentionally restricts type extensions to ensure validation scripts and templates remain reliable. For specialized needs, select the closest matching type and customize styling within its constraints.

What is the difference between State and IT State diagrams?

State (type-state.md) models general finite state machines for software engineering and logic design. IT State (type-infrastructure-tailored state.md) extends this for infrastructure monitoring—tracking operational conditions like "healthy," "degraded," or "failed" across IT systems with specialized visualization conventions.

Where are diagram type specifications stored?

All 27 reference files live in skills/diagram-design/references/ with the naming pattern type-[diagram-name].md. Each file defines layout rules, connector primitives, and styling defaults that the rendering engine applies consistently across export formats.

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