How to Create Mermaid Diagrams in Markdown

Published July 2, 2026 · 7 min read

Mermaid lets you create diagrams using text — flowcharts, mind maps, sequence diagrams, and more — directly inside Markdown documents. Instead of switching to a drawing tool, you write a few lines of syntax and the diagram renders automatically.

MDWorkLab's online editor supports Mermaid out of the box. Use the toolbar Mermaid button or wrap your diagram in a fenced code block with the mermaid language tag.

Basic Syntax

```mermaid
flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]
```

Flowcharts

Start with flowchart TD (top-down) or flowchart LR (left-right). Define nodes in square brackets [text], diamonds for decisions {text}, and connect them with arrows.

```mermaid
flowchart LR
    Input --> Process --> Output
    Process --> Error
    Error --> Input
```

Mind Maps

Mind maps use indentation to show hierarchy:

```mermaid
mindmap
  root((Project Plan))
    Research
      User interviews
      Competitor analysis
    Design
      Wireframes
      Prototypes
    Development
      Frontend
      Backend
```

Inserting in MDWorkLab

1. Open the editor.
2. Click the Mermaid button in the toolbar.
3. Choose flowchart or mindmap template.
4. Edit the source and click Insert — the preview renders it instantly.

Tips for Clean Diagrams

• Keep node labels short — one or two words when possible.
• Use consistent direction (TD or LR) within a single diagram.
• Break complex flows into multiple smaller diagrams.
• Test in the live preview before exporting your document.

Related Guides

• Markdown syntax guide →
• MDWorkLab editor tour →