Complete Guide to Specialized Diagram Types in Diagram-Design

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:

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

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, type-quadrant.md, 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. 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: 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).
• 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 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 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 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 that renders every specialized type in three visual variants: light mode, dark mode, and full-editorial styling.

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