Re-edit a mermaid diagram in draw.io

When Mermaid code is inserted and converted to draw.io shapes, you gain the ability to style, edit and add to your diagram using the draw.io features. But you can’t re-edit the original Mermaid code.

To be able to view and edit the Mermaid code of an inserted diagram, you must insert it as an image.

Insert the Mermaid diagram as an SVG image

  1. Click Arrange > Insert > Mermaid or + > Mermaid from the toolbar.
    Click Arrange > Insert > Mermaid to create a diagram from Mermaid Markdown-inspired code
  2. Add your Mermaid code in the large text block.
    Insert the Mermaid code as an image so you can edit it later
  3. Select Image from the list, then click Insert to add it to the drawing canvas.
    Hover over a Mermaid diagram image in draw.io to see the Mermaid syntax for that diagram in a tooltip

This generates the Mermaid diagram as a single SVG image and places it on the drawing canvas. Hover over the SVG image to see the Mermaid code in the tooltip. Note that you can’t edit or style the individual shapes or connectors in this SVG image version.

Edit the Mermaid SVG image

  1. Double-click on the SVG image on the drawing canvas to open the Mermaid code dialog.
  2. Edit the text and click _Apply to regenerate the SVG image.

    Hover over a Mermaid diagram image in draw.io to see the Mermaid syntax and double click to edit it