Skip to main content

Editable Mermaid diagrams

· 3 min read
draw.io Team
draw.io Team

When you insert Mermaid description of a diagram via Arrange > Insert > Mermaid, it is now rendered with native draw.io shapes inside a Mermaid container group. The Mermaid source is attached to this container group so you can re-edit it and regenerate a updated Mermaid diagram.
You can restyle the Mermaid diagram and change its shapes - styles will be kept if you regenerate, but geometry changes will not

Insert an editable Mermaid diagram​

  1. Click Arrange > Insert > Mermaid. Alternatively, click the + icon in the toolbar, then select Mermaid.
    Click Arrange /> Insert > Mermaid to create a diagram from Mermaid Markdown-inspired code
  2. Paste your text into the text box, then click Insert.
    Paste the text in Mermaid syntax, then click Insert

By default using the Diagram option, Mermaid shapes are converted to native draw.io shapes, then automatically laid out in a Mermaid container group. Hover over a shape or connector to see the Mermaid source.
Hover over a shape in the Mermaid container group to see the source

Use the Style tools in the format panel to change fill and line colours and styles, text colours and fonts, and change the labels of the shapes. These edited styles and labels override any Mermaid style information, and will persist over edits to the Mermaid source.
You can restyle the Mermaid diagram and change its shapes - styles will be kept if you regenerate, but geometry changes will not

You can also resize and reposition shapes and repath connectors within the Mermaid container group. These changes will be overridden if you edit the source and regenerate the Mermaid diagram.

Edit the Mermaid diagram​

Because the Mermaid source is still available, you can edit it and regenerate the diagram.

  1. Select one of the shapes in the Mermaid container group to see the edit (pen) icon in the top left.
    Select a shape inside the Mermaid container group, then click the pen icon in the top left to re-edit and regenerate the diagram
  2. Click on the edit icon to re-open the Mermaid dialog, make your changes, and click Apply.

Prevent edits: Click on the padlock icon in the top left of the Mermaid container group to lock the Mermaid diagram to prevent style or geometry changes, or alternatively insert the Mermaid diagram as a single uneditable SVG image.

See the Mermaid section in the user manual for more example diagrams using the Mermaid syntax, configuring the layout engine, and for more a detailed example of drawing a mindmap from Mermaid text.