The 27 Available Diagram Types in diagram-design: Complete Visual Reference

The cathrynlavery/diagram-design repository ships with 27 distinct visual diagram types, each defined in dedicated reference files under skills/diagram-design/references/ ranging from Architecture and Flowchart to specialized data platform types like Medallion and DP Security Matrix.

The diagram-design skill provides a comprehensive visualization framework for technical documentation and system design. According to the Visual-type guide documented in SKILL.md (lines 81‑112), the repository specifies 27 unique diagram types with standardized layout grammars, styling rules, and example assets.

Complete Catalog of diagram-design Diagram Types

Each diagram type has its own layout‑specific reference file (type‑<name>.md) that defines visualization rules, semantic patterns, and rendering behavior.

System and Structure Diagrams

• Architecture: Components and connections in a system (type‑architecture.md)
• IT Current‑State: Legacy IT landscapes grouped by phase or department (type‑it‑state.md)
• High‑Level: End‑to‑end data stack on container clusters (type‑high‑level.md)
• Layer Stack: Stacked abstraction levels (type‑layers.md)
• Nested: Hierarchy through containment and scope (type‑nested.md)
• Tree: Parent‑to‑children relationships (type‑tree.md)
• Org Chart: Human, agent, or team ownership with reporting and escalation paths (type‑org‑chart.md)

Process and Flow Diagrams

• Flowchart: Decision logic with conditional branches (type‑flowchart.md)
• Sequence: Time‑ordered messages between actors (type‑sequence.md)
• State Machine: States, transitions, and guard conditions (type‑state.md)
• Swimlane: Cross‑functional processes with handoffs between lanes (type‑swimlane.md)
• Process: Multi‑actor sequential process with data handoffs (type‑process.md)
• Data Flow: Role‑scoped data flow showing who does what at each pipeline step (type‑data‑flow.md)
• Loop: Reinforcing cycles and flywheel effects (type‑loop.md)

Data and Analytics Diagrams

• ER / Data Model: Entities, fields, and relationships (type‑er.md)
• Quadrant: Two‑axis positioning and prioritization matrices (type‑quadrant.md)
• Radar / Spider: Multiple entities scored across 3‑5 criteria (type‑radar.md)
• Venn: Overlap between sets (type‑venn.md)
• Pyramid / Funnel: Ranked hierarchies or conversion drop‑off visualization (type‑pyramid.md)
• Bar Chart: Quantitative comparison across categories (type‑bar.md)
• Line Chart: Continuous trends over time (type‑line.md)
• Scatter Plot: Distribution and correlation between two variables (type‑scatter.md)
• Medallion: Multi‑tier data storage with quality levels and access policies (type‑medallion.md)

Timeline and Project Management

• Timeline: Events positioned in chronological order (type‑timeline.md)
• Gantt: Tasks and phases displayed on a timeline (type‑gantt.md)

Data Platform Specific

• DP Integration: Integration topology mapping sources to core to consumers (type‑dp‑integration.md)
• DP Security Matrix: Per‑role and per‑component access‑permissions matrix (type‑dp‑security‑matrix.md)

How to Use diagram-design Diagram Types

The skill architecture expects you to load the appropriate type‑*.md file before rendering a diagram. Each type imports its layout grammar through HTML module imports.

Basic Implementation Pattern

<!-- Save as architecture.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Architecture Diagram</title>
  <link href="template.html" rel="import">
</head>
<body>
  <script type="module">
    import "/skills/diagram-design/references/type-architecture.md";
    // SVG content renders according to Architecture grammar
  </script>
</body>
</html>

Replace type‑architecture.md with any other type file (e.g., type‑flowchart.md, type‑gantt.md) to switch diagram categories.

Using Template Variants

For complex layouts requiring full styling capabilities, import the template‑full.html variant:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Swimlane Process</title>
  <link href="template-full.html" rel="import">
</head>
<body>
  <script type="module">
    import "/skills/diagram-design/references/type-swimlane.md";
    // Populate with lanes, steps, and connectors
  </script>
</body>
</html>

Pre-built Example Assets

The repository ships ready‑to‑view HTML files for every diagram type. Open these directly in a browser to see fully rendered implementations:

• assets/example-architecture.html
• assets/example-venn.html
• assets/example-gantt.html
• assets/example-medallion.html

Key Reference Files and Architecture

Understanding the file structure helps navigate the 27 diagram type implementations:

• SKILL.md: Skill entry point containing the Visual‑type guide (lines 81‑112) that enumerates all 27 types
• references/type‑*.md: 27 dedicated files defining layout‑specific grammars (e.g., type‑sequence.md, type‑radar.md)
• references/style-guide.md: Global design tokens including brand colors and typography
• references/semantic-patterns.md: Behavior‑driven layout catalogue
• assets/template*.html: Base templates including light, dark, full, motion, and terminal variants
• assets/example‑<type>.html: Pre‑rendered demonstrations for each diagram category

Summary

• diagram-design provides 27 distinct diagram types covering structural, process, data analytics, timeline, and data platform visualization needs.
• Each type is governed by a dedicated reference file in skills/diagram-design/references/.
• Implementation requires importing the specific type‑*.md file via HTML modules before rendering SVG content.
• Ready‑made examples exist for all types in the assets/ directory.

Frequently Asked Questions

How many diagram types does diagram-design support?

The repository supports 27 distinct visual diagram types as documented in SKILL.md lines 81‑112. This includes general‑purpose types like Flowchart and Sequence, analytical types like Radar and Scatter Plot, and domain‑specific types like Medallion and DP Security Matrix for data platform architecture.

Where are the diagram type definitions located in the repository?

Each diagram type has a dedicated Markdown reference file located in skills/diagram-design/references/ using the naming convention type‑<name>.md. For example, Architecture diagrams are defined in type‑architecture.md, while Gantt charts are defined in type‑gantt.md.

How do I implement a specific diagram type like Architecture or Gantt?

Create an HTML file that imports the corresponding reference module. Use <script type="module"> to import the specific type file (e.g., import "/skills/diagram-design/references/type-architecture.md";), then populate the SVG content following that type's grammar rules. The repository provides working templates in assets/template*.html to ensure proper styling and layout behavior.

Can I customize the styling for diagram-design diagram types?

Yes. Global styling is controlled through references/style-guide.md, which defines brand colors, typography, and design tokens. For behavior‑driven customizations, refer to references/semantic-patterns.md. Individual diagram types inherit these tokens while maintaining their specific layout grammars defined in their respective type‑*.md files.

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