Skip to main content

Insert Mermaid as an SVG image

When Mermaid source text is inserted using the Image option, the generated diagram is placed on the drawing canvas as a single SVG image. You can re-edit this image at any time, but you can't style the elements inside the generated Mermaid diagram.

Choose this option when you want a fixed, self-contained image rather than editable shapes — for example to ensure a Mermaid diagram looks the same wherever the file is viewed.

  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.

You can't edit or style the individual shapes or connectors in this SVG image version, but you can add limited styling information to the Mermaid code itself.

Hover for Mermaid source: The generated image carries its Mermaid source in a mermaidData attribute (data plus config: null), along with an optional border padding field (8 px by default). Hover over the SVG image to see the Mermaid code in the tooltip.

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

Change the image padding​

The SVG image has a small padding (8 pixels by default) around the diagram. To change it, adjust the optional border value stored with the image:

  1. Select the Mermaid SVG image, then open Edit > Edit Data (Ctrl+M / Cmd+M).
  2. In the mermaidData value, add or change the border field — for example, "border": 20 for more padding, or "border": 0 for none — then click Apply.
  3. Double-click the image and click Apply to regenerate it with the new padding.

When the border field is omitted, the default 8-pixel padding is used.