Mermaid
Creating diagrams with Mermaid
Text-based diagrams.
Mermaid diagrams for flowcharts, sequence diagrams, and other visualizations. Diagrams automatically adapt to light/dark theme.
```mermaid
graph TD
A[Start] ==> B{Is it working?}
B ==>|Yes| C[Great!]
B ==>|No| D[Debug]
D ==> B
C ==> E[End]
```
result:
Important
Due to MDX parser limitations, use ==> instead of --> for arrows in flowcharts.
Sequence diagrams (avoid -->> because it contains --> and will be stripped):
```mermaid
sequenceDiagram
participant User
participant Browser
User->>Browser: Click button
Browser->>User: Display result
```
result: