---
url: https://flip-chart.ru/knowledge-base/en/mermaid-diagrams.md
description: >-
  Paste Mermaid code into the “Mermaid diagram” window, check the preview and
  click “Add to flip” — a flowchart, sequence, class or Gantt diagram appears on
  the flip as a single object
---

# How to add a Mermaid diagram

Mermaid is a text language for describing diagrams: you write code and flip builds a flowchart, a sequence, class, state or Gantt diagram and more from it. The diagram is added to the flip as a single object, and you can change its code at any time

## How to add a diagram

1. On the toolbar, select “Mermaid diagram” — a window with the same name opens, with a code editor and a preview

   If the tool is not on the toolbar, open “All tools” — it is in the “Diagrams and flowcharts” section

2. Type or paste the code into the editor, or pick one of the templates below it. For example:

   ```
   flowchart TD
       A[Request] --> B{Approved?}
       B -->|Yes| C[In progress]
       B -->|No| D[Rejected]
   ```

3. Check the result in the preview

4. Click “Add to flip” — the diagram appears in the center of the visible area of the flip

   The “Add to flip” button is active only when the code has been rendered without errors and the preview is up to date. To close the window without adding anything, click the cross

![The “Mermaid diagram” window with code and a preview](/images/kb/mermaid-diagrams/1.png)

## Templates

Below the editor there is a “Templates” block with ready-made examples: “Flowchart”, “Sequence”, “Classes”, “State”, “Gantt”, “Pie”, “ER”, “CJM”, “Git graph” and “C4”. Templates that do not fit in the row open with the three-dot button at the end of the row

A template fully replaces the code in the editor. You can edit it before adding it to the flip — the diagram will contain the changed code

Templates are examples, not a complete list: in the editor you can also write other diagram types that Mermaid supports

## Theme, direction and preview zoom

The preview area has the following settings:

* “Theme” — the color styling of the diagram: “Classic”, “Standard”, “Neutral”, “Minimal”, “Green”, “Dark”, “Soft dark” and “Minimal dark”. The list keeps only the themes that look different for the current diagram
* “Direction” — “Top to bottom”, “Bottom to top”, “Left to right” or “Right to left”. The setting is available for flowcharts, class, state and ER diagrams. Choosing a direction also changes the diagram code
* “Zoom” — the preview zoom. You can also change it with the mouse wheel and move the diagram in the preview with the right or middle mouse button. The preview zoom does not affect the size of the diagram on the flip

![The “Theme” list in the preview area](/images/kb/mermaid-diagrams/2.png)

## Errors in the code

If the code contains an error — for example, a node bracket is not closed — the line is marked and underlined with a wavy line. Hover over the marker to see the error description — it is shown in English, for example “Parse error on line 3”

![A line with an error in the code editor](/images/kb/mermaid-diagrams/3.png)

Until the error is fixed, the preview keeps the last valid version of the diagram, and the “Add to flip” and “Save” buttons are unavailable

If a diagram on the flip could not be rendered, the message “Failed to render the diagram” appears in its place — click it to open the editor and fix the code

## How to change a diagram on a flip

Select the diagram — a menu of icons without labels appears above it, the name of an icon is shown in a tooltip on hover:

* “Edit diagram” — opens the window with the code. Make your changes and click “Save”
* “Direction” and “Theme” — change the diagram without opening the editor
* “Copy Mermaid code” — copies the diagram code to the clipboard. The editor window has the same button: it copies the current text from the editor, even if it has not been saved yet
* “Download” — “Download SVG” or “Download PNG”

![The Mermaid diagram menu on a flip](/images/kb/mermaid-diagrams/4.png)

A diagram is resized with its proportions kept. If the diagram has more or fewer nodes after you edit the code, its area grows or shrinks, while the size of the nodes and labels stays the same

You can drag a diagram from the flip into a [document](/en/documents) and back onto the flip — the code and theme are kept

## Limitations

* A diagram is a single object: individual nodes and links cannot be selected or moved on the flip. To change the diagram, edit the code
* The theme and font of a diagram are defined by flip: the `%%{init}%%` directive and frontmatter in the code do not override them. Styles of individual nodes and links — `style`, `classDef`, `linkStyle` — are applied
* Sequence, Gantt, pie and Git graph diagrams have no “Direction” setting
* On a phone, the editor window does not open: you can change the theme and direction, copy the code and download the diagram