Editing & Layout – Mermaid Help Center

Mermaid diagrams can be edited in multiple ways, and styled with preset themes or reusable custom styles. This article covers the tools available to shape how your diagrams look.

How to edit a diagram

You can edit a Mermaid diagram in three ways:

Code Editor — write or paste Mermaid syntax directly. Changes render live in the canvas.
Visual Editor — click nodes and edges directly in the canvas to change shapes, color, text, or layout. Useful when you don't know the syntax or want to adjust visually.
Mermaid AI — describe your change in plain English and let AI update the diagram. See Using Mermaid AI for details.

You can switch between these freely — changes in one method are reflected in the others.

Will the Visual Editor change my code?

Yes. When you make changes in the Visual Editor, the underlying Mermaid code updates to reflect them. If you want to preserve exact code formatting, make changes in the Code Editor instead.

Layout modes: Auto-Layout and Manual layout

Mermaid has two layout modes, toggled by the Auto-Layout switch in the top toolbar of the editor:

Auto-Layout (on): Mermaid automatically positions and arranges nodes based on your diagram code. Best for most diagrams — you write the logic, Mermaid handles the visual arrangement.
Manual layout (Auto-Layout off): You position and arrange nodes yourself by dragging them on the canvas. Best when you want precise control over spacing, alignment, or visual grouping that isn't reflected in the diagram code.

Note: Manual layout mode was previously called "Whiteboard."

Using Manual layout

To switch to Manual layout:

In the top toolbar of the editor, toggle Auto-Layout off.
The canvas now lets you drag nodes freely to reposition them.

In Manual layout, you can:

Drag nodes to reposition them anywhere on the canvas.
Resize nodes by dragging the corner handles.
Add comments on nodes for collaboration — comments are visible in both layout modes.
Export your diagram as PNG, SVG, PDF, or MMD using the Export button in the top toolbar.
Share via the Share icon — invite collaborators by email, use an invite link, or generate a public link (depending on your plan).

Switching between layout modes

You can toggle Auto-Layout on and off at any time. When you switch from Manual to Auto-Layout, Mermaid re-arranges the nodes automatically based on your code. Your manual positioning will be lost, so save a version or export a copy if you want to preserve the manual arrangement before switching.

Resizing text in a node

You can adjust text size at the node level without editing code.

Click a node in the diagram to select it. The node toolbar appears.
In the node toolbar, click the text style icon (the letter A). The Text style panel opens.
Under Font size, click one of the three Aa sizes (small, medium, or large — indicated by icon size).

The change applies to the selected node only.

Changing the diagram theme

Mermaid includes preset themes that change the color scheme, style, and font of your entire diagram.

Click the Theme icon (the rainbow circle) in the top toolbar of the editor to open the Theme panel. The panel has three sections:

Diagram theme — eight preset color schemes: Default, Mermaid Chart, Neutral, Forest, Base, Dark, and Redux. Hover any icon to see its name.
Diagram style — three visual variants that change border weight and fill treatment: Classic, Hand-drawn, and Neo.
Diagram font — five fonts: Default, Open Sans, Inter, Merriweather, and Source Code Pro.

Toggle the sun/moon icon at the top-right of the panel to switch between light and dark mode.

Themes apply to the whole diagram. To style individual nodes, use custom styles.

Diagram font

The Diagram font selector applies a font to the entire diagram — all node text, edge labels, and headings. Font selection is global per diagram; to change font size on individual nodes, use the node toolbar's text style option (see Resizing text in a node above).

Bold and italic node text

You can apply bold and italic formatting to text inside node labels in two ways:

Visual editor. Click a node to open the node toolbar, then use the bold (B) and italic (I) buttons. To format only part of the label, double-click into the node to enter text-edit mode, highlight the portion you want to style, then click bold or italic — the rest of the label stays unchanged.
Markdown syntax. Wrap text with asterisks for bold or single asterisks for italic.

Applying a style to multiple nodes

Two ways to multi-select:

Marquee selection — click and drag on empty canvas to draw a selection box around the nodes.
Shift+click — click the first node, then hold Shift and click additional nodes to add them to the selection.

With multiple nodes selected, any property change — color, shape, bold/italic, custom style — applies to all selected nodes at once.

Custom styles

Custom styles let you define a reusable look for nodes — a specific background color, border, and text treatment — and apply it to multiple nodes across your diagram.

Built-in styles: Aqua, Sky, Rose, Peach, Pine, Ash

To apply a built-in style

Select a node.
From the node toolbar, click the Style icon (paintbrush).
In the Apply style panel under Default, click the style name.

To create your own custom style

Select a node.
From the node toolbar, click the Style icon.
Click Create custom at the bottom of the panel.
Name your style (for example, "Class_01").
Use the icons at the top of the panel to switch between background color, border, text color, and code.
Adjust colors using the Add custom color field or the default colors grid.
Click Save.

Your custom style now appears under Custom styles in the Apply style panel. Select any node and click your named style to apply it.

To edit or delete a custom style

Click the style name to reveal pencil (edit) and trash (delete) icons below it.

To remove all custom styles

Open the Apply style panel and click Remove all custom styles.

Applying a style to multiple nodes

To apply a style to several nodes at once:

Click and drag on empty canvas to draw a marquee selection over the nodes you want to style.
With multiple nodes selected, click the Style icon in the toolbar and choose a built-in or custom style.
The style applies to every selected node.

Note: Shift+click to add nodes to a selection is not currently supported. Use marquee-drag selection instead.

Discovering node actions on hover

When you hover over a flowchart node, the + icon now appears immediately — you no longer need to click the node first to surface direct-manipulation controls like adding a connected node or changing the shape. This makes the visual editor's direct-manipulation features more discoverable, especially for users who would otherwise reach for the code editor first. Hover states also render correctly on nodes that have a theme or a custom style applied; previously they could fail to show on styled nodes.

Keyboard shortcuts

Mermaid supports keyboard shortcuts to speed up common actions in the editor. Shortcuts are grouped below by where they apply.

General

Ctrl/Cmd + Z — Undo
Ctrl/Cmd + Y (or Cmd + Shift + Z on Mac) — Redo
Ctrl/Cmd + C / V — Copy and paste nodes
Delete (or Fn + Delete on Mac) — Remove selected nodes or edges
Ctrl/Cmd + Alt/Option + K — Open keyboard shortcuts panel
Ctrl/Cmd + Alt/Option + G — Open Help

Toolbar actions

Ctrl/Cmd + Shift + E — Settings
Ctrl/Cmd + Shift + Y — Timeline (version history)
Ctrl/Cmd + Shift + U — Export
Alt/Option + S — Add shape
Alt/Option + G — Add subgraph
Alt/Option + T — Add text
Ctrl/Cmd + Alt/Option + I — Design (theme panel)
Ctrl/Cmd + Alt/Option + R — Rearrange diagram
Ctrl/Cmd + Alt/Option + N — Add icon
Ctrl/Cmd + Alt/Option + M — Add image

Canvas navigation

Spacebar + drag — Pan the canvas
Right-click + drag — Pan the canvas (alternative)
Ctrl/Cmd + scroll — Zoom in or out
Shift + (+) — Zoom in
Shift + (-) — Zoom out
Ctrl + 0 (Cmd + Option + 0 on Mac) — Reset view
F11 (Cmd + Option + F on Mac) — Full screen
Click + drag — Select multiple nodes with a marquee

Node styling (when a node is selected)

Ctrl/Cmd + Alt/Option + J — Set classDef
Ctrl/Cmd + Alt/Option + U — Select shape
Ctrl/Cmd + Alt/Option + B — Border
Ctrl/Cmd + Alt/Option + O — Border color
Ctrl/Cmd + Alt/Option + P — Background color
Ctrl/Cmd + Alt/Option + T — Text color

Edge styling (when an edge is selected)

Shift + Alt/Option + Y — Arrow style
Shift + Alt/Option + D — Stroke style
Shift + Alt/Option + H — Edge color

You can also open the keyboard shortcuts panel inside the editor at any time using Ctrl/Cmd + Alt/Option + K.

Troubleshooting

My text is cut off in a node

Mermaid auto-fits node width to text by default. If text is cut off:

Check that Auto-Layout is toggled on in the top toolbar. When off, Mermaid uses manual positioning and may not recalculate widths.
If the node is inside a container (subgraph, swimlane), the container may be constraining width.
If the issue persists, contact us with a screenshot and the diagram code.

My diagram didn't update after I changed the code

Confirm the Code Editor panel shows your latest change
Check that Auto-Update is toggled on at the top of the Code Editor panel
Refresh the page if the change still doesn't render

If none of this resolves the issue, contact us.