How to Use Mermaid: The Ultimate Guide

Learn how to turn simple text and code into beautiful diagrams, flowcharts, and complex technical charts using Mermaid syntax.

What is Mermaid?

Mermaid is an open-source, JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions dynamically. In simple terms, it allows you to generate robust charts directly from a few lines of code. This eliminates the need for dragging and dropping elements natively in clunky UI editors, saving developers and architects massive amounts of time.

By using a free mermaid live editor online like Marmady, you can write Mermaid syntax in the browser and watch your logic transform into visual flowcharts, sequence diagrams, Gantt charts, and class diagrams instantly.

Why Use a Mermaid Live Editor?

While you can integrate Mermaid directly into your web applications, using a dedicated online flowchart tool provides distinct advantages:

• Immediate Feedback: A live preview pane updates in real-time as you type, allowing you to catch syntax errors instantly.
• Exporting Options: Marmady allows you to export your coded diagrams directly to high-resolution SVG or PDF files, perfect for presentations and technical documentation.
• No Dependencies: You don't need to install any npm packages, configure Webpack, or install desktop software to create a diagram.
• Version Control Friendly: Because your diagram is just text, it can easily be stored in Git repositories alongside your code.

Mermaid Flowchart Syntax Guide

Flowcharts are the most popular diagram type in Mermaid. They consist of nodes (shapes) and edges (arrows/lines) connecting them. You start a flowchart by defining its direction. For example, graph TD means Top to Down, while graph LR stands for Left to Right.

Example Flowchart Code

graph LR;
    A[Start Process] --> B{Is it valid?};
    B -- Yes --> C[Process Data];
    B -- No --> D[Throw Error];
    C --> E[Save to Database];
    E --> F((Finish));

In the example above:

• [Square Brackets] create a rectangular node.
• {Curly Braces} create a diamond (decision) node.
• ((Double Parentheses)) create a circular node.
• --> creates a directional arrow edge.

Creating Sequence Diagrams

Sequence diagrams visualize how different parts of a system interact over time. They are crucial for designing API integrations and microservice architectures. To create one, you initialize it with the keyword sequenceDiagram.

Example Sequence Diagram

sequenceDiagram
    participant U as User
    participant A as Auth Service
    participant DB as Database
    
    U->>A: Send Login Request (username, pass)
    activate A
    A->>DB: Query User Hash
    activate DB
    DB-->>A: Return Result
    deactivate DB
    
    alt Valid Credentials
        A-->>U: Return 200 OK + JWT Token
    else Invalid Credentials
        A-->>U: Return 401 Unauthorized
    end
    deactivate A

Notice the use of ->> for solid line arrows (requests) and -->> for dotted line arrows (responses). The alt/else blocks allow you to represent conditional logic directly within your diagram.

Building Gantt Charts

Mermaid isn't just for software architecture; it's also excellent for project management. You can use it to build Gantt charts tracking timelines, dependencies, and milestones.

gantt
    title Product Launch Timeline
    dateFormat  YYYY-MM-DD
    
    section Engineering
    Backend API Development  :a1, 2026-06-01, 30d
    Frontend UI Integration  :a2, after a1, 20d
    
    section Marketing
    Prepare Launch Assets    :b1, 2026-06-15, 14d
    Press Release            :milestone, m1, after b1, 0d

Start Generating Modern Diagrams

Ready to put this into practice? Head over to our Free Mermaid Diagram Editor and paste any of the examples above. Marmady's unique dark-themed editor and intelligent syntax highlighting make drafting documentation a joy.