What Specialized Diagram Types Does the Diagram-Design Skill Offer?

The Diagram-Design skill supports four specialized diagram types—flowchart, sequenceDiagram, stateDiagram-v2, and erDiagram—providing full parsing and rendering capabilities for these specific Mermaid formats while explicitly rejecting unsupported kinds.

The cathrynlavery/diagram-design repository provides a targeted skill for analyzing diagram source files with precision. Rather than attempting to parse every possible visualization format, the implementation concentrates on a curated set of specialized diagram types that receive complete validation and extraction support through the mermaid_extract.py parser.

The Four Specialized Diagram Types Explained

The skill delivers reliable processing for these specific Mermaid diagram variants:

Flowchart

The flowchart type handles classic left-to-right or top-down flow diagrams using Mermaid's graph TD or graph LR syntax. This covers standard process flows, decision trees, and workflow visualizations that define nodes and directional edges between them.

Sequence Diagram

sequenceDiagram provides time-ordered message flows between participants. This specialized type captures lifelines, activation boxes, and asynchronous or synchronous messages between actors in the system, parsed into structured node and edge representations.

State Diagram v2

The stateDiagram-v2 type supports modern state-machine diagrams using Mermaid's newer v2 syntax. Unlike the legacy stateDiagram (which is explicitly unsupported), this variant handles composite states, concurrent regions, and state transitions with the updated grammar.

Entity-Relationship Diagram

erDiagram enables parsing of entity-relationship visualizations, including tables, fields, data types, and relationship cardinalities. This specialized type extracts database schema representations into analyzable graph structures.

How Diagram Types Are Defined in the Source Code

The authoritative list of supported types is hardcoded in skills/diagram-design/scripts/mermaid_extract.py at lines 35-36:

SUPPORTED_KINDS = "flowchart, sequenceDiagram, stateDiagram-v2, erDiagram"

To prevent parser errors on incompatible formats, the module explicitly defines unsupported diagram kinds at lines 37-49 in the UNSUPPORTED_KINDS set:

UNSUPPORTED_KINDS = {
    "pie", "mindmap", "gitgraph", "quadrantchart", "timeline",
    "c4context", "sankey", "sankey-beta", "gantt", "journey",
    "classdiagram", "statediagram",
}

This strict separation ensures that the parse_file() function only attempts to process the four specialized diagram types for which it has complete parsing logic, rejecting types like classdiagram, gantt, or sankey that require different handling.

Extracting and Parsing Specialized Diagrams

Command-Line Extraction

You can extract a specific supported diagram from a Mermaid file using the command-line interface:

# Extract a flowchart from a Mermaid file

python3 skills/diagram-design/scripts/mermaid_extract.py examples/flowchart.mmd --diagram 0

Programmatic Parsing

Access the parser directly in Python to work with specialized diagram objects:

from skills.diagram_design.scripts.mermaid_extract import parse_file

# Load a Mermaid file containing a sequence diagram

diagrams = parse_file("examples/seq.mmd")
seq_diagram = diagrams[0]               # first (and only) diagram

print(seq_diagram.kind)                 # → "sequenceDiagram"

print([node.id for node in seq_diagram.nodes])
print([edge.source + "→" + edge.target for edge in seq_diagram.edges])

Validation Using self_check.py

To verify that rendered HTML outputs contain only allowed diagram content, use the validation script:

python3 skills/diagram-design/scripts/self_check.py my-diagram.html

This script emits errors if the file contains unsupported diagram kinds or disallowed HTML tags.

Summary

• The Diagram-Design skill intentionally limits support to four specialized diagram types: flowchart, sequenceDiagram, stateDiagram-v2, and erDiagram.
• Supported types are defined in the SUPPORTED_KINDS constant within mermaid_extract.py (lines 35-36).
• Twelve diagram types—including pie charts, Gantt charts, class diagrams, and mind maps—are explicitly excluded via the UNSUPPORTED_KINDS set (lines 37-49).
• The parse_file() function in mermaid_extract.py provides the primary API for extracting these specialized types into graph models.
• Complementary validation is available through self_check.py for verifying output integrity.

Frequently Asked Questions

What diagram types are supported by the Diagram-Design skill?

The skill supports exactly four Mermaid diagram types: flowchart for process flows, sequenceDiagram for message sequences, stateDiagram-v2 for state machines using modern syntax, and erDiagram for entity-relationship models. These are the only types the mermaid_extract.py parser fully analyzes and renders.

Why does the skill exclude certain Mermaid diagram types?

The UNSUPPORTED_KINDS set in mermaid_extract.py explicitly excludes types like pie, gantt, classdiagram, and mindmap to prevent parsing errors. According to the source code, these diagram kinds require different AST structures or rendering engines that the current implementation does not handle, ensuring reliable operation for the four supported specialized types.

Does the Diagram-Design skill support Draw.io diagrams?

Yes, the repository includes drawio_extract.py for handling Draw.io XML diagram extraction. This complements the Mermaid parser and provides specialized support for Draw.io formats, though the primary focus for Mermaid syntax remains the four specific diagram kinds defined in SUPPORTED_KINDS.

How can I verify my diagram uses a supported type?

Run the self_check.py script against your output HTML file. The script validates that only allowed tags and attributes are present and will emit an error if the content includes unsupported diagram kinds, ensuring compliance with the skill's specialized diagram type constraints.

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