Diagrams

Write a diagram as text in a fenced code block. It renders as you type, and exports with your document.

Language	Draws
mermaid	Flowcharts, sequence, class, state, Gantt and other diagrams
flow or flowchart	flowchart.js diagrams
sequence	js-sequence-diagrams

Mermaid

```mermaid
graph LR
  Draft --> Review --> Publish
```

Typora draws mermaid blocks with Pele, which follows Mermaid's syntax with its own layout and look. For diagrams drawn exactly as Mermaid.js draws them, install the Mermaid.js extension, then choose it in Settings ▸ Markdown ▸ Syntax by Extension.

Flowcharts

```flow
st=>start: Start
e=>end: End
st->e
```

Sequence diagrams

```sequence
Mira->Jonas: Is the beta ready?
Jonas-->Mira: Friday.
```

Editing a diagram

Click a diagram to edit its source, side by side or stacked with the preview. Its toolbar opens it full screen, where you can zoom and pan.

More languages

Extensions add PlantUML, Graphviz, D2, charts, kanban boards and more. See Extensions. When several extensions draw the same language, Settings ▸ Markdown ▸ Syntax by Extension picks one.