Supported Mermaid diagram types

The Mermaid diagram type is detected from the first keyword, so the Mermaid description must start with one of the keywords below.

Diagram	Start your source with
Flowchart	`flowchart` or `graph`
Class diagram	`classDiagram`
State diagram	`stateDiagram` / `stateDiagram-v2`
Sequence diagram	`sequenceDiagram`
ZenUML sequence	`zenuml`
Entity-Relationship (ER)	`erDiagram`
Requirement diagram	`requirementDiagram`
C4 model	`C4Context` / `C4Container` / `C4Component` / `C4Dynamic` / `C4Deployment`
Gantt chart	`gantt`
User journey	`journey`
Kanban board	`kanban`
Timeline	`timeline`
Git graph	`gitGraph`
Pie chart	`pie`
XY chart (bar / line)	`xychart-beta`
Quadrant chart	`quadrantChart`
Radar chart	`radar` / `radar-beta`
Sankey diagram	`sankey` / `sankey-beta`
Treemap	`treemap` / `treemap-beta`
Mindmap	`mindmap`
Block diagram	`block` / `block-beta`
Packet diagram	`packet` / `packet-beta`
Architecture diagram	`architecture` / `architecture-beta`
Venn diagram	`venn`
Ishikawa / fishbone	`ishikawa` or `fishbone`
Tree view	`treeView`
Wardley map	`wardley` / `wardley-beta`
Event Modeling	`eventmodeling` / `eventmodeling-beta`

If the text starts with a keyword that isn't in this list, draw.io reports it as an unsupported diagram type. If it is a supported type but the body can't be parsed, you get a parse error pointing at the problem.

Frontmatter to define diagram type options

Mermaid configuration, such as %%{init}%% directives and comments, are ingnored until the first valid diagram type keyword is found.

For example, when flowchart is read on the second line, the init options will then be evaluated and applied if they are valid for that diagram type.

%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
flowchart LR
  A --> B --> C

Frontmatter to define diagram type options​

Frontmatter to define diagram type options