What Types of Diagrams Can the Agent Skills Plugin Generate? Complete Catalog of 39 Visual Types

The Agent Skills plugin from cathrynlavery/diagram-design supports 39 editorial-grade diagram types—including architecture diagrams, flowcharts, Gantt charts, and Wardley maps—rendering them as self-contained HTML, SVG, or PNG files.

The cathrynlavery/diagram-design repository provides an Agent Skills plugin that transforms natural-language requests into publication-ready visuals. When you ask the agent to create a diagram, it dynamically loads only the necessary reference files to keep runtime overhead minimal while delivering professional-grade output.

Complete List of Agent Skills Plugin Diagram Types

The plugin supports 39 distinct visual types, each defined in its own reference file under skills/diagram-design/references/. These span architectural modeling, data visualization, process mapping, and strategic analysis.

Structural and Architectural Diagrams

• Architecture (type-architecture.md): System component layouts and high-level infrastructure designs.
• IT Current-State (type-it-state.md): As-is infrastructure documentation for enterprise audits.
• Layer Stack (type-layers.md): Technology stack visualization showing application, platform, and infrastructure layers.
• High-Level Stack (type-high-level.md): Simplified architectural overviews for executive presentations.
• Deployment (type-deployment.md): Infrastructure and deployment topologies across environments.
• Nested (type-nested.md): Hierarchical containment visualization for complex systems.
• Tree (type-tree.md): Branching hierarchies and taxonomies.
• Org Chart (type-org-chart.md): Organizational hierarchies and reporting structures.

Process and Flow Visualization

• Flowchart (type-flowchart.md): Algorithmic and business process flows.
• Sequence (type-sequence.md): Interaction timelines between actors and systems.
• State Machine (type-state.md): Finite state transitions and lifecycle modeling.
• Process (type-process.md): Step-by-step procedure mapping with decision points.
• Swimlane (type-swimlane.md): Cross-functional process flows showing responsibility handoffs.
• Data Flow (type-data-flow.md): Information movement between systems and databases.
• Loop / Flywheel (type-loop.md): Cyclic processes, feedback loops, and continuous improvement cycles.
• Fishbone (type-fishbone.md): Root cause analysis and Ishikawa diagrams.

Data Modeling and Relationships

• ER / Data Model (type-er.md): Entity-relationship modeling for database design.
• Database Schema (type-db-schema.md): SQL schema visualization with tables and constraints.
• Dependency Graph (type-dependency.md): Module, package, and service dependencies.
• UML Class (type-uml-class.md): Object-oriented class structures and inheritance.
• Venn (type-venn.md): Set relationships, intersections, and logical operations.

Strategic and Analytical Visuals

• Quadrant (type-quadrant.md): 2x2 matrices for impact vs. effort prioritization.
• Radar / Spider (type-radar.md): Multi-variable comparison charts for capability assessment.
• Pyramid / Funnel (type-pyramid.md): Hierarchical progression, conversion flows, or Maslow-style hierarchies.
• Treemap (type-treemap.md): Hierarchical data as nested rectangles showing proportional values.
• Sankey (type-sankey.md): Flow magnitude visualization between nodes, ideal for revenue or traffic flows.
• Wardley Map (type-wardley.md): Value chain evolution mapping from genesis to commodity.
• Story Map (type-story-map.md): Agile story organization across user activities and tasks.
• User Journey (type-journey.md): Experience pathway visualization with touchpoints and emotions.

Project Management and Timelines

• Timeline (type-timeline.md): Chronological event sequences and milestones.
• Gantt (type-gantt.md): Project scheduling with task dependencies and durations.
• Kanban (type-kanban.md): Board-based workflow visualization with WIP limits.
• Medallion (type-medallion.md): Bronze-silver-gold architecture tier designation.

Specialized Technical Diagrams

• DP Integration (type-dp-integration.md): Data platform integration patterns and pipelines.
• DP Security Matrix (type-dp-security-matrix.md): Security zoning and compliance matrices for data platforms.
• Bar Chart (type-bar.md): Categorical data comparison with editorial styling.
• Line Chart (type-line.md): Trend analysis and time-series data visualization.
• Scatter Plot (type-scatter.md): Correlation and distribution analysis.
• Polar Chart (type-polar.md): Cyclical data visualization and directional metrics.

Mermaid Grammar Support

While the plugin natively supports 39 custom visual types, it also parses four specific Mermaid grammars for interoperability. According to skills/diagram-design/scripts/mermaid_extract.py, the SUPPORTED_KINDS array includes:

• flowchart
• sequenceDiagram
• stateDiagram-v2
• erDiagram

When importing Mermaid files via /diagram-design:import-mermaid, the extractor parses these grammars into an intermediate representation (IR) before applying the editorial styling templates.

How Diagram Generation Works

The Agent Skills plugin uses a lazy-loading architecture to minimize memory footprint. As implemented in cathrynlavery/diagram-design, the rendering pipeline follows this sequence:

1. Intent Parsing: The agent loads skills/diagram-design/SKILL.md to map natural-language cues (e.g., "make me a Sankey diagram") to the specific type reference.
2. Reference Loading: Only the matched type-*.md file is pulled from skills/diagram-design/references/ (e.g., type-sankey.md for flow visualizations).
3. Semantic Enrichment: If the request requires animations or advanced patterns, the system optionally loads semantic-patterns.md or animation.md.
4. Parsing: The mermaid_extract.py or drawio_extract.py script converts source files into the plugin's intermediate representation.
5. Rendering: The IR is compiled into self-contained HTML using templates from skills/diagram-design/assets/, with optional export to SVG or PNG via the export commands.

This architecture ensures that adding new diagram types does not increase runtime load for existing types—the plugin maintains constant memory usage regardless of the 39 available options.

Generating Diagrams: Command Reference

You can invoke the Agent Skills plugin through slash commands in supported hosts (Claude Code, Codex, Factory Droid, or Pi).

Creating a diagram from natural language:

# Architecture overview

/diagram-design "Make me an architecture diagram of my app: frontend, backend, database, Redis cache."

# Strategic prioritization

/diagram-design "I need a quadrant showing Q2 projects by impact vs effort."

Importing existing diagrams:

# Convert Mermaid to editorial style

/diagram-design:import-mermaid README.md --diagram=all

# Import Draw.io with specific dimensions

/diagram-design:import-drawio platform.drawio --size=slide-16x9 --detail=balanced

Exporting outputs:

# Export to SVG

/export-diagram path/to/diagram.html --svg-only

# Export high-resolution PNG

/export-diagram path/to/diagram.html --png-only --scale=3

Viewing the gallery locally:

# macOS

open skills/diagram-design/assets/index.html

# Linux

xdg-open skills/diagram-design/assets/index.html

All command specifications reside in the commands/ directory, while prompt templates for natural-language replies are stored in prompts/.

Summary

• The Agent Skills plugin supports 39 editorial-grade diagram types ranging from architecture diagrams to Wardley maps.
• Diagram references are stored as individual type-*.md files in skills/diagram-design/references/, enabling lazy loading.
• The plugin parses four Mermaid grammars (flowchart, sequenceDiagram, stateDiagram-v2, erDiagram) via mermaid_extract.py.
• Output formats include self-contained HTML, SVG, and PNG.
• The architecture maintains constant runtime footprint regardless of how many diagram types are available.

Frequently Asked Questions

How many diagram types does the Agent Skills plugin support?

The plugin supports 39 distinct diagram types, each with its own reference file in skills/diagram-design/references/. These include technical diagrams like UML class and database schemas, process flows like Sankey and fishbone diagrams, and strategic visuals like quadrant charts and Wardley maps.

Can the Agent Skills plugin import existing Mermaid diagrams?

Yes. The plugin can import and restyle existing Mermaid diagrams using the /diagram-design:import-mermaid command. According to skills/diagram-design/scripts/mermaid_extract.py, it specifically supports flowchart, sequenceDiagram, stateDiagram-v2, and erDiagram grammars, converting them into the plugin's intermediate representation before applying editorial styling.

What file formats can the Agent Skills plugin generate?

The plugin generates self-contained HTML files by default, which include embedded SVG and CSS for portability. You can export these to standalone SVG or PNG formats using the /export-diagram command with --svg-only or --png-only flags, optionally specifying scale factors for high-resolution outputs.

Does adding more diagram types slow down the plugin?

No. The plugin uses a lazy-loading architecture where only SKILL.md and the specific type-*.md reference file for the requested diagram are loaded at runtime. As documented in the repository README, this design ensures that the runtime footprint remains constant even as the visual palette expands beyond the current 39 types.

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