For the best experience on mobile, use landscape mode when editing complex diagrams.

Diagram Source Code 0 characters

Drag & drop a .txt or .mmd file here

or click to browse files

Supported formats: .txt, .mmd, .md

Error Found

Suggestion

Diagram Preview

Rendering diagram...

100%

No diagram rendered yet

Enter your Mermaid code and click "Render Diagram" to see the visualization here.

Tip: For Gantt and Pie charts, use zoom controls above to enlarge the diagram before PNG export. SVG export always captures the full resolution.

AI Diagram Assistant

Try:

Note: AI can make mistakes and can generate invalid mermaid code.

How to Use

Enter Mermaid code in the editor or upload a file
Click "Render Diagram" to generate the visualization
Use zoom controls to adjust the preview size
Use the download buttons to export as PNG or SVG
Try the examples to see different diagram types

Common Mermaid Errors & Fixes

Error Message	What Went Wrong	How to Fix
`Expecting 'AMP'... got 'STR'`	Using quotes for nodes without IDs	Use: `A[Label] --> B[Label]` not `"Label" -> "Label"`
`Parse error on line X`	Invalid syntax on that line	Check for missing brackets or wrong arrow types
`Token X not found`	Using forbidden characters	Use only letters/numbers for node IDs, no spaces
Diagram renders but looks wrong	Missing node shapes or wrong connections	Every node needs: `ID[shape]` where shape is [], (), or {}
No diagram appears	Major syntax error or missing declaration	First line must be: `graph TD`, `sequenceDiagram`, etc.

Mermaid Diagram Tutorial & Reference

Getting Started with Mermaid

Mermaid is a JavaScript-based diagramming and charting tool that uses text-based definitions to create and modify diagrams dynamically. It's perfect for documentation, presentations, and visualizing complex systems.

Quick Tip: Just type your diagram code in the editor and click "Render Diagram" to see it visualized instantly!

Basic Diagram Structure

All Mermaid diagrams start with a declaration of the diagram type:

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Success]
    B -->|No| D[Failure]

Key components:

graph TD - Declares a top-down flowchart
graph LR - Declares a left-right flowchart
A[Start] - Creates a node labeled "Start" with ID "A"
--> - Creates an arrow between nodes
-- text --> - Adds text to the arrow

Available Diagram Types

Flowcharts

Visualize processes, workflows, and decision trees.

Keywords: graph TD, graph LR

Sequence Diagrams

Show interactions between components over time.

Keyword: sequenceDiagram

Class Diagrams

Document object-oriented class structures.

Keyword: classDiagram

Gantt Charts

Create project timelines and schedules.

Keyword: gantt

Pie Charts

Show proportional data and percentages.

Keyword: pie

State Diagrams

Visualize state machines and transitions.

Keyword: stateDiagram-v2

Common Syntax Patterns

Syntax	Result	Description
`A[Square]`	Square node	Process or step
`B(Round)`	Round node	Start/end point
`C{Diamond}`	Diamond node	Decision point
`D((Circle))`	Circle node	Connection point
`E>Stadium]`	Stadium node	Sub-process

Syntax	Result	Description
`A --> B`	Solid arrow with arrowhead	Default connection
`A --- B`	Solid line without arrowhead	Undirected connection
`A -.-> B`	Dotted arrow	Alternative path
`A ==> B`	Thick arrow	Strong relationship
`A -- text --> B`	Arrow with text	Labeled connection

graph TD
    subgraph Group1
        A1 --> A2
    end
    subgraph Group2
        B1 --> B2
    end
    A2 --> B1

Subgraphs help organize related nodes into visual groups.

Quick Examples to Try

Simple Process

graph TD
    Start[Start Process] --> 
    Input{Get Input}
    Input -->|Valid| Process[Process Data]
    Input -->|Invalid| Error[Show Error]
    Process --> Output[Display Results]
    Error --> Start

Login Flow

graph LR
    User[User] --> Login[Login Page]
    Login --> Creds{Enter Credentials}
    Creds -->|Valid| Auth[Authenticate]
    Creds -->|Invalid| Retry[Try Again]
    Auth -->|Success| Dashboard[Dashboard]
    Auth -->|Failed| Lock[Account Locked]
    Retry --> Login

Best Practices

Keep It Simple

Start with simple diagrams and gradually add complexity. Break large diagrams into smaller ones.

Use Descriptive Labels

Use meaningful node IDs and labels. This makes your diagrams self-documenting and easier to understand.

Test Often

Render your diagram frequently as you build it. This helps catch syntax errors early.

Common Errors & Solutions

Error	Cause	Solution
Mismatched brackets	`[` without `]` or vice versa	Check all brackets are properly paired
Missing direction	`graph` without `TD`, `LR`, etc.	Add direction after `graph` keyword
Unclosed subgraph	`subgraph` without `end`	Add `end` after subgraph contents
Invalid arrow syntax	Wrong number of dashes or wrong characters	Use proper arrow syntax: `-->`, `---`, etc.

Additional Resources

Ready to Start?

Try modifying the example in the editor, or use one of the pre-made examples from the dropdown menu!

Mermaid Diagram Viewer