Available Diagram Types for Flow in diagram-design: Supported Mermaid Kinds

The cathrynlavery/diagram-design repository supports exactly four diagram types for flow-related visualizations: flowchart (aliased as graph), sequenceDiagram, stateDiagram-v2, and erDiagram.

These diagram kinds are hardcoded in the Mermaid extractor and represent the only formats recognized for processing flow-based diagrams. When working with the diagram-design skill, using any Mermaid syntax outside of these four types will result in parsing errors.

Supported Diagram Types for Flow

The parser defined in skills/diagram-design/scripts/mermaid_extract.py explicitly enumerates four allowed diagram kinds. Each serves distinct flow visualization purposes within the engine.

Flowchart (Graph)

The flowchart diagram kind—also referenced as graph—provides classic flow-chart representation with nodes and directed edges. This is the primary flow type recognized by the parser for general workflow visualization.

flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Result A]
    B -->|No| D[Result B]

Sequence Diagram

sequenceDiagram visualizes interactions between participants over time, displaying message sequences that represent temporal workflow communications between system actors.

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>Alice: I'm good, thanks!

State Diagram v2

The stateDiagram-v2 kind models state-machine transitions, making it ideal for workflow visualization where entities progress through discrete states based on triggering events.

stateDiagram-v2
    [*] --> Idle
    Idle --> Running : start
    Running --> Idle : stop
    Running --> Error : fail
    Error --> Idle : reset

Entity-Relationship Diagram

While primarily for data modeling, erDiagram supports flow-related visualizations by representing entity relationships and data flows within system architectures.

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    CUSTOMER {
        string name
        string address
    }
    ORDER {
        int id
        date orderDate
    }

Implementation in the Source Code

The available diagram types for flow are strictly defined in the SUPPORTED_KINDS constant at line 35 of skills/diagram-design/scripts/mermaid_extract.py. This constant enumerates the four allowed values, ensuring the parser only accepts these specific Mermaid declarations.

The parser's grammar comment at line 9 explicitly lists the four kinds, mentioning flowchart/graph as the primary flow type. This implementation choice means that unsupported diagram kinds—such as pie, gantt, or gitGraph—trigger validation failures.

At line 770, the extractor's error handling logic rejects any unsupported diagram kind with a specific error message, preventing downstream processing of invalid Mermaid syntax.

Processing Flow Diagrams with the Extractor

To utilize these diagram types, save your Mermaid definitions in .mmd files and process them through the extractor:

python -m skills.diagram-design.scripts.mermaid_extract example.mmd

The repository also includes skills/diagram-design/scripts/drawio_extract.py for handling Draw.io imports with compatible flowchart candidates. For validation testing, the scripts/verify-mermaid-import.py test suite verifies parser behavior across all supported diagram kinds, ensuring consistent handling of flow syntax.

Summary

• The cathrynlavery/diagram-design repository recognizes exactly four diagram types specifically for flow-related visualizations: flowchart/graph, sequenceDiagram, stateDiagram-v2, and erDiagram.
• Valid diagram kinds are hardcoded in the SUPPORTED_KINDS constant within mermaid_extract.py at line 35.
• Attempting to use unsupported Mermaid types results in explicit errors at line 770 of the extractor.
• The engine supports both native Mermaid files and Draw.io imports through separate extractor modules.

Frequently Asked Questions

What happens if I use an unsupported diagram type like Gantt or Pie?

The parser will reject the file with an "unsupported diagram kind" error. According to the error handling implementation at line 770 of mermaid_extract.py, only the four types listed in SUPPORTED_KINDS are permitted; any other Mermaid declaration triggers immediate validation failure.

Can I use "graph" instead of "flowchart" in my Mermaid syntax?

Yes, the parser recognizes graph as a valid alias for flowchart. The grammar comments at line 9 of mermaid_extract.py explicitly mention flowchart/graph as the primary flow type, allowing both keywords interchangeably.

How do I verify that my diagram type is supported before processing?

Use the scripts/verify-mermaid-import.py test suite, which validates the parser's behavior for each supported diagram kind. This script tests against the SUPPORTED_KINDS definitions and will flag any unsupported syntax before production processing.

Are there plans to support additional flow diagram types?

Based on the current source code analysis, the SUPPORTED_KINDS constant at line 35 contains only the four enumerated types, and line 770's strict validation logic suggests that extending support would require modifying both the constant definition and the parser's grammar rules.

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