Markdown Editor Preview

Mermaid diagrams in Markdown

Mermaid turns a few lines of text into a diagram. In Markdown you write it in a code block marked mermaid, and tools that support it, such as GitHub, GitLab, Obsidian and this editor, draw the diagram in its place. Because the diagram is text, it is easy to change and to keep with your notes. Each example below shows the Markdown first and the drawn result under it.

Flowcharts

Start with flowchart and a direction: TD (top down) or LR (left to right). Each line connects two boxes; a box gets its label the first time it appears, and its short name after that. 

```mermaid
flowchart LR
  A[Write] --> B{Looks good?}
  B -->|Yes| C[Publish]
  B -->|No| A
```

Shapes, lines and groups

The brackets around a label set the shape, and the arrow sets the line. A subgraph draws a frame around a group of boxes. Put labels with parentheses or other punctuation in quotes. 

```mermaid
flowchart TD
  start([Start]) --> input[/Read the file/]
  input --> check{Valid?}
  check -- yes --> save[(Database)]
  check -. no .-> error["Show an error (and log it)"]
  subgraph Server
    save --> done((Done))
  end
```
Write For
A[Text] a box
A(Text) / A([Text]) rounded corners / a pill
A{Text} a decision (diamond)
A((Text)) a circle
A[(Text)] a database (cylinder)
A[/Text/] input or output (slanted)
--> / --- a line with / without an arrow
-.-> / ==> a dotted / thick arrow
-->|text| or -- text --> a label on the line

Sequence diagrams

A sequence diagram shows messages between people or systems over time, from top to bottom. ->> is a message, -->> a reply (dashed), and loop, alt and Note add structure. 

```mermaid
sequenceDiagram
  actor User
  participant App
  participant Server
  User->>App: Click "Save"
  App->>Server: Send the document
  alt Saved
    Server-->>App: 200 OK
    App-->>User: Show "Saved"
  else Offline
    App-->>User: Keep a local copy
  end
  Note over App,Server: Retries every 30 seconds
```

Class diagrams

Class diagrams describe the structure of code: classes with their fields and methods, and how they relate. <|-- means "inherits from", *-- "is made of" and --> "uses". 

```mermaid
classDiagram
  class Document {
    +String title
    +String content
    +save()
  }
  class Folder {
    +String name
    +add(Document doc)
  }
  Folder "1" *-- "many" Document
  Document <|-- Note
```

State diagrams

A state diagram shows the states something can be in and what moves it from one to the next. [*] is the start or the end. 

```mermaid
stateDiagram-v2
  [*] --> Draft
  Draft --> Review: submit
  Review --> Draft: request changes
  Review --> Published: approve
  Published --> [*]
```

Entity relationship diagrams

ER diagrams describe a database: tables, their columns and how many rows of one relate to the other. || means exactly one, o{ zero or more and |{ one or more. 

```mermaid
erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains
  PRODUCT ||--o{ LINE_ITEM : "appears in"
  CUSTOMER {
    int id
    string name
  }
```

Gantt charts

A Gantt chart plans tasks over time. Give each task a name, an optional id, and either a start date and a length or after another task. On a narrow screen the chart scrolls sideways. 

```mermaid
gantt
  title Website launch
  dateFormat YYYY-MM-DD
  section Design
    Wireframes   :done, wire, 2026-01-05, 5d
    Visual design:active, look, after wire, 7d
  section Build
    Pages        :pages, after look, 10d
    Launch       :milestone, after pages, 0d
```

Pie charts

```mermaid
pie title Where the time goes
  "Writing" : 45
  "Editing" : 30
  "Research" : 25
```

Tips

More guides