What Are the Different Categories of the 39 Visual Diagram Types? A Complete Guide

The Diagram Design skill organizes 39 editorial-quality visual diagram types into distinct categories covering structural architectures, temporal flows, statistical comparisons, hierarchical maps, and specialized data-platform views, each implemented as self-contained HTML/SVG files with strict accessibility constraints.

The cathrynlavery/diagram-design repository delivers a comprehensive visual communication toolkit through its collection of 39 visual diagram types. These editorial-quality templates enable developers and technical writers to transform complex system descriptions into clean, brand-consistent diagrams without external dependencies or build steps. Each type follows a rigid design system emphasizing accessible SVG markup, limited accent colors, and zero shadows.

System Architecture and Structure

This category covers diagrams that illustrate component relationships, system layouts, and organizational hierarchies.

• Architecture: Displays components and connections for system layout overviews.
• IT current-state: Maps legacy landscapes alongside modernization plans.
• High-Level: Presents end-to-end stacks on clusters for executive overviews.
• Layer stack: Visualizes stacked abstractions common in layered architecture patterns.
• Org chart: Defines ownership and routing structures for organizational hierarchies.
• UML class: Shows classes, operations, and typed relations for object-oriented design.
• Database schema: Documents physical tables and column foreign key relationships.

Process Flow and State Management

These types handle dynamic systems, decision logic, and workflow progression.

• Flowchart: Represents decision-logic branching and procedural steps.
• Sequence: Illustrates messages exchanged over time, such as protocol exchanges.
• State machine: Maps states and transitions within finite state systems.
• Swimlane: Displays cross-functional flows organized by role-based lanes.
• Process: Shows multi-actor sequential workflows across departments or systems.
• Data flow: Details role-scoped pipeline steps for data movement visualization.
• Sankey: Quantifies volumes that split and merge across flow stages.
• Kanban: Tracks work-in-progress items organized by state on a board layout.
• Deployment: Maps zones, hosts, and artifacts across infrastructure environments.

Hierarchical and Containment Models

These diagrams express nested relationships, set theory, and ranked structures.

• ER / data model: Defines entities and fields for entity-relationship modeling.
• Nested: Expresses hierarchy through visual containment and enclosure.
• Tree: Displays simple parent-to-children hierarchical relationships.
• Venn: Visualizes set overlaps and intersection logic.
• Pyramid / funnel: Represents ranked hierarchies or conversion drop-off analysis.
• Treemap: Encodes part-of-whole relationships through area-sized rectangles.

Temporal and Project Management

Time-based visualization types for scheduling, roadmapping, and event plotting.

• Timeline: Plots events chronologically along a time axis.
• Gantt: Displays tasks and phases on timelines for project planning.
• Story map: Organizes product roadmaps by backbone against release slices.

Statistical and Analytical Visualizations

Quantitative comparison and correlation diagrams for data analysis.

• Quadrant: Positions items on two-axis matrices (e.g., impact versus effort).
• Radar / spider: Compares multi-axis values such as skill matrices or capability assessments.
• Bar chart: Facilitates categorical comparison in vertical or horizontal orientations.
• Line chart: Displays trends over time through continuous series plotting.
• Scatter plot: Reveals distribution and correlation through x-y point positioning.
• Fishbone: Organizes grouped causes for root-cause analysis.
• Wardley map: Maps value chains against evolution stages for strategic planning.
• Polar chart: Represents cyclic magnitude against linear radius for circular quantitative data.

Cyclical and Strategic Frameworks

Diagrams emphasizing feedback loops, user experiences, and dependency networks.

• Loop / flywheel: Visualizes reinforcing cycles with shared hubs.
• User journey: Maps stages, actions, and sentiment across customer flows.
• Dependency graph: Analyzes fan-in, ranks, and cycles for code or module dependencies.

Data Platform Specific Views

Specialized diagrams for modern data architecture and governance.

• Medallion: Represents multi-tier data storage patterns such as lake-house architectures.
• DP integration: Maps sources to core platforms to consumers in data-platform flows.
• DP security matrix: Displays per-role access permissions in matrix format.

Technical Implementation and Type References

The repository implements these categories through a modular reference system defined in skills/diagram-design/SKILL.md. When a user requests a diagram, the skill loads its central description and then selects only the appropriate type reference file (e.g., type-architecture.md, type-polar.md) based on the specific request. As implemented in cathrynlavery/diagram-design, this selective loading occurs between lines 95-115 of SKILL.md, ensuring minimal runtime footprint by loading only the requested type's reference.

Each of the 39 categories has a corresponding file in the references/ directory (formatted as type-<name>.md) containing the layout rules, visual grammar, and accessibility constraints for that specific diagram type. The README.md file at the repository root provides the complete gallery table showcasing all 39 types with their typical use cases. For interactive browsing, assets/index.html serves as a live gallery displaying light, dark, and full-editorial variants of each diagram type.

Summary

• The repository contains 39 self-contained HTML/SVG diagram types requiring no external JavaScript or build steps.
• Categories span seven functional domains: system architecture, process flow, hierarchical models, temporal planning, statistical analysis, strategic frameworks, and data platform views.
• Individual specifications reside in references/type-<name>.md files following strict design constraints (no shadows, limited accent colors, accessible markup).
• The system optimizes performance by loading only the specific type reference required for each request via SKILL.md.
• All diagram types are viewable in the interactive gallery at assets/index.html.

Frequently Asked Questions

Where is the complete list of all 39 diagram categories documented?

The README.md file contains the authoritative gallery table listing all 39 diagram categories with their typical use cases between lines 37-101. This table serves as the primary reference for the available visualization types.

How does the system minimize resource usage when generating diagrams?

According to skills/diagram-design/SKILL.md (lines 95-115), the skill implements lazy loading by fetching only the specific type reference file required for the current request. This architectural decision keeps the runtime footprint minimal rather than loading all 39 type definitions simultaneously.

What design constraints apply across all 39 diagram types?

Every diagram category adheres to a strict design system implemented in the individual references/type-<name>.md files. These constraints prohibit drop shadows, enforce limited accent color palettes, and mandate accessible SVG markup structures to ensure editorial consistency and accessibility compliance.

Can these diagrams be viewed outside of the generation environment?

Yes, the repository includes assets/index.html, which functions as a live gallery allowing users to browse all variants (light, dark, and full-editorial) of each diagram type directly in a browser without requiring the skill runtime or external dependencies.

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