Advanced

Mermaid Diagrams

Create flowcharts, sequence diagrams, Gantt charts, and more using simple text-based syntax.

Introduction

Mermaid is a JavaScript-based diagramming tool that uses Markdown-inspired syntax. Use a fenced code block with the language identifier mermaid to create diagrams.

Note: Mermaid rendering requires support from your Markdown editor or renderer. Tools like Obsidian, GitHub, GitLab, and many others support it natively.

Flowcharts

Use graph TD (top-down) or graph LR (left-right) to create flowcharts.

Start
Is it working?
Yes
Great!
No
Debug
End

Sequence Diagrams

Sequence diagrams show the interactions between participants over time. Use sequenceDiagram to define them.

UserAppDB
→ Login request
→ Check credentials
← User found
← Login successful

Gantt Charts

Gantt charts visualize project timelines. Define sections and tasks with durations.

Project Timeline

Wireframes
Mockups
Frontend
Backend