Cascadia renders Mermaid diagrams natively in the editor, with live preview — flowcharts, sequence diagrams, class diagrams, state diagrams, and the other Mermaid types. The Cascadia DSL is a separate, interaction-oriented layer: it models participants exchanging messages. This page maps each Mermaid diagram type to its DSL equivalent, where one exists.
Where the DSL fits
Direct equivalents. Sequence diagrams and ZenUML-style flows map directly to the DSL: participants, messages, fragments, and notes cover the same ground.
Strong fit. Architecture and C4-style diagrams work well through cluster grouping — hierarchical clusters with participants inside them express context, container, and component levels.
Workarounds. Several Mermaid types can be modeled indirectly:
- Class diagrams — participants with detailed labels, edges for relationships.
- State machines — state transitions expressed as message exchanges.
- ER diagrams — participants as entities, labeled edges as relationships.
- User journeys — phases as notes, steps as participant interactions.
- Requirement diagrams — requirements as participants with labeled edges.
- Block and packet diagrams — clusters and fragments carrying structural detail.
- Mindmaps and Venn-style groupings — cluster nesting and notes.
- Timelines — a sequence with temporal notes.
Outside the paradigm. Diagram types that visualize data rather than interactions have no DSL equivalent: Gantt, pie, quadrant, XY, radar, treemap, and Sankey charts, plus git graphs and kanban boards. Author these directly in Mermaid.
Support matrix
| Mermaid type | DSL support | How to model it |
|---|---|---|
| Sequence | Full | Direct equivalent: participants, messages, fragments |
| ZenUML | Full | Direct mapping to DSL sequences |
| Architecture | Full | Hierarchical clusters + participants |
| Flowchart | Partial | Sequence of interactions |
| Class | Partial | Participants with detailed labels + relationship edges |
| State | Partial | State transitions as messages |
| ER | Partial | Participants as entities, labeled edges |
| User journey | Partial | Phases as notes + participant interactions |
| Requirement | Partial | Participants + labeled edges |
| C4 | Partial | Clusters for context / container / component levels |
| Mindmap | Partial | Cluster nesting |
| Timeline | Partial | Sequence + temporal notes |
| Block | Partial | Clusters + participants |
| Packet | Partial | Sequence + structured fragments |
| Venn | Partial | Participant grouping + notes |
| Gantt | Not applicable | Use Mermaid directly |
| Pie | Not applicable | Use Mermaid directly |
| Git graph | Not applicable | Use Mermaid directly |
| Quadrant | Not applicable | Use Mermaid directly |
| XY chart | Not applicable | Use Mermaid directly |
| Sankey | Not applicable | Use Mermaid directly |
| Kanban | Not applicable | Use Mermaid directly |
| Radar | Not applicable | Use Mermaid directly |
| Treemap | Not applicable | Use Mermaid directly |
Example conversions
Class diagram
Mermaid:
classDiagram
class Animal {
+name: String
+move()
}
class Dog {
+bark()
}
Animal <|-- Dog
Cascadia DSL alternative:
participant Animal { type: service; label: "Animal (+name, +move())" }
participant Dog { type: service; label: "Dog (+bark())" }
Dog -> Animal: "extends (inheritance)"
State diagram
Mermaid:
stateDiagram-v2
[*] --> Idle
Idle --> Running: start()
Running --> Paused: pause()
Paused --> Running: resume()
Running --> [*]: stop()
Cascadia DSL alternative:
participant System { type: service; label: "State Machine" }
fragment StateTransitions {
System -> System: "start() → Running"
System -> System: "pause() → Paused"
System -> System: "resume() → Running"
System -> System: "stop() → [*]"
}
ER diagram
Mermaid:
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
Cascadia DSL alternative:
participant CUSTOMER { type: service; label: "Customer" }
participant ORDER { type: service; label: "Order" }
participant LINEITEM { type: service; label: "LineItem" }
CUSTOMER -> ORDER: "places (1..N)"
ORDER -> LINEITEM: "contains (1..N)"