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

> Explore the cathrynlavery/diagram-design skill's specialized diagram types: flowchart, sequenceDiagram, stateDiagram-v2, and erDiagram. Get full parsing and rendering for these Mermaid formats.

- Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design)
- Tags: deep-dive
- Published: 2026-09-08

---

**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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/scripts/mermaid_extract.py) at lines 35-36:

```python
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:

```python
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:

```bash

# 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:

```python
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:

```bash
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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/mermaid_extract.py) provides the primary API for extracting these specialized types into graph models.
- Complementary validation is available through [`self_check.py`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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.