Getting Started with Mermaid
New to Mermaid? Start here. Learn the fundamentals and create your first diagram in minutes.
Mermaid is a text-based diagramming tool. Write simple text syntax, and it renders as professional diagrams. It's perfect for documentation because diagrams live in your codebase as text.
flowchart LR
Text[Write Text] --> Render[Mermaid Renders]
Render --> Diagram[Beautiful Diagram]Live Editor
Unsaved
More Tutorials
Flowchart Syntax Guide — Nodes, Arrows & Subgraphs
Master Mermaid flowchart syntax with this interactive guide. Learn node shapes, connections, and advanced features.
Sequence Diagram Guide — Messages, Loops & Fragments
Learn to create professional sequence diagrams with Mermaid. Cover participants, messages, and advanced features.
Gantt Chart Tutorial — Tasks, Dependencies & Milestones
Create professional project timelines with Mermaid Gantt charts. Learn tasks, dependencies, and scheduling.
Paste ChatGPT Mermaid Code
Got Mermaid code from ChatGPT? Paste it here to render, edit, and export.