Create Mermaid diagrams – Miro Help Center

Who can do it: All users
Which plans: Free, Starter, Business, Enterprise, Education
Which platforms: Browser, Desktop

Create diagrams from Mermaid code, and edit them as you would with Miro shapes and lines. Mermaid stays the source of truth, so you can move diagrams between Miro, your codebase, and AI tools without losing structure.

If you're looking for information about the legacy Mermaid app, refer to Mermaid diagrams for Miro (legacy).

Why use Mermaid diagrams in Miro

Portable with the rest of your Mermaid workflow. Use the same Mermaid syntax you already write in docs, PRs, and AI chats. With Miro MCP, agents can create, read, update, and edit Mermaid diagrams on your boards.
Rendered as Miro shapes. Mermaid code turns into a Diagram built from editable Miro shapes and connectors, laid out automatically by Miro—not a static image. Miro supports the shapes from Mermaid versions 10 and 11, so diagrams pasted from Mermaid Live, Mermaid AI, or other tools render with the intended shape types.
Bi-directional editing. Change the diagram visually on the board, and the Mermaid code updates. Edit the code, and the diagram re-renders.
Built for collaboration. Because diagrams are native Miro content, your team can comment, co-edit, and iterate on the same board in real time.

Create a Mermaid diagram

You can add Mermaid diagrams in several ways.

Paste Mermaid code on the board

Copy Mermaid code from your editor, docs, or an AI chat.
Paste it onto a Miro board.
Miro renders the code as a Diagram of Miro shapes.

If the code has a syntax error, Miro shows feedback on the canvas so you know to open focus mode and fix it in the code panel. After you correct the code, the diagram renders automatically.

Drag and drop a Mermaid file

Drag a .mmd or .mermaid file from your computer onto a Miro board.
Miro renders the file as a Diagram of Miro shapes.

For the full list of uploadable formats, see Supported file formats.

Create a diagram with Miro MCP

Use an MCP-compatible AI tool (for example Cursor or Claude Code) connected to Miro MCP Server to generate a Mermaid diagram on a board.

Connect your AI tool to Miro MCP.
Ask the agent to create a Mermaid diagram on a specific board. Include the board URL in your prompt when you want the diagram on an existing board.
Open the board in Miro to review, edit, and collaborate on the rendered diagram.

Agents can also read Mermaid back from the board and update diagrams in place, so you can keep iterating between your codebase and Miro. When an agent edits a diagram, it can add a legend that marks what was added, removed, or changed.

On Enterprise plans, a company admin must enable Miro MCP before users can connect. See the Miro MCP Server admin guide.

Start from the Diagram format

On a Miro board, open the Creation bar and select Formats > Diagram.
Click Build with code.
Paste your own Mermaid code into the code panel, or choose a Mermaid template.
The diagram renders as Miro shapes.
Continue editing in focus mode or on the canvas.

For more on the Diagram format, focus mode, layers, and templates, see Miro Diagrams.

Edit a Mermaid diagram

You can edit visually on the board, in the Mermaid source, or with AI (Sidekicks, Flows, or Miro MCP). Changes stay in sync.

Edit visually

Open the diagram in focus mode.
Select a shape, line, or text label to edit it directly on the diagram. A toolbar opens with controls for the selected element—for example, change the shape type, edit text, adjust font size, apply bold, or set text, border, and fill color.
Open the code panel to confirm the Mermaid syntax updated to match.

Add and connect shapes

In focus mode, you can grow the diagram without editing Mermaid code:

Click to add shapes. Open the shapes panel and click a shape to add it to the diagram. The panel includes Mermaid flowchart shapes and the standard Miro flowchart shapes.
Add a connected shape. Select a shape, then click the + button to add a new shape connected to it.
Connect shapes. Select a shape, then drag the + button onto another shape to draw a line between them. You can also reconnect an existing line to change the flow.

Adjust layout

Open the layout panel in focus mode to change how the diagram is arranged:

Under Direction, click an arrow to set the flow of the diagram: left to right, top to bottom, bottom to top, or right to left.
Under Spacing, drag the Horizontal and Vertical sliders to set the gap between shapes.
Under Shapes, choose how shapes are sized:
- Same width: All shapes share a uniform width for a neat, aligned layout.
- Fit to content: Each shape is sized to its text—useful when some shapes have much more text than others.
Under Text, choose how labels are laid out:
- Multiple lines: Long labels wrap onto several lines.
- Single line: Each label stays on one line, which makes shapes wider.

Edit the code

Open the diagram in focus mode.
Open the code panel.
Update the Mermaid syntax.
The diagram re-renders as you edit.

While you edit:

Shape and code stay linked. Select a shape on the diagram to highlight its code, or select code to jump to the matching shape.
Syntax highlighting colors Mermaid tokens in the editor so structure is easier to scan.
You can resize the code panel to give yourself more room while editing.

Click the settings icon (gear) in the code panel to adjust how the editor displays your code:

Line numbers: Show or hide line numbers in the editor.
Wrap text: Wrap long lines to fit the panel width instead of scrolling horizontally.

Edit with AI

You can iterate on Mermaid diagrams with Sidekicks, Flows, or a connected agent via Miro MCP. Agents read and edit the Mermaid source, so they can make precise changes without regenerating the whole diagram.

With Sidekicks or Flows:

Select the diagram on the board, or copy a link to the diagram widget.
Open a Sidekick or run a Flow.
Ask for the change you want (for example, “make all containers in this diagram red”).
The diagram updates in place.

With Miro MCP:

Copy the link to the diagram widget.
Open your AI tool of choice, with Miro MCP authenticated.
Ask the agent to make your changes, pasting the link to the diagram widget you want it to edit.
The diagram re-renders in place as the agent edits.

Visual editing and the code panel are available in focus mode only. Split-view editing directly on the canvas isn't supported.

More editing capabilities

If you need more shapes, or you want to move shapes around freely, switch the diagram to free-form. You can start this from the shapes panel, from the layout panel, or by trying to move a shape on the diagram.

Try to move a shape, or select Switch to free-form from the shapes panel or the layout panel.
The Switch to free-form editing modal opens.
Choose how to switch:
- Switch and replace: Convert this diagram to free-form.
- Create copy then switch: Keep the current Mermaid version and convert a copy to free-form.

Once you switch a diagram to free-form, it's no longer in sync with the Mermaid code, and you can no longer edit it via MCP.

Supported diagram types

This table shows how each Mermaid diagram type renders in Miro. Visual editing in focus mode is available for flowcharts today; more types are being added iteratively:

Diagram type	Renderer	Visually editable?
Flowcharts	Native Miro shapes	Yes
State	Native Miro shapes	Coming soon
Sequence	Native Miro shapes	Coming soon
Class	Native Miro shapes	Coming soon
ER (Entity-Relationship)	Native Miro shapes	Coming soon
Other supported Mermaid diagrams	Mermaid SVG	No
Diagrams not supported in Mermaid (for example, swimlanes)	N/A	N/A

If you need a diagram type that isn't visually editable yet, share your feedback in this form. We may reach out for an interview.

For the full list of Mermaid diagram types and syntax, see the official Mermaid documentation.

Read with Miro MCP. Ask a connected agent to read the diagram from the board URL so you can document it in a codebase, PR, or other tools. The Mermaid source stays available for round-trips.
Share a link. Copy the board URL, or from the diagram's More menu (⋯) select Copy focus mode link to send collaborators straight into the diagram. See also Sharing boards and inviting collaborators.
Download as PDF or image. From the diagram's More menu (⋯), select Export as PDF or Export as image (JPG, SVG, or PDF). You can also copy the diagram as an image from the board.

Known limitations

Keep these current constraints in mind:

Visual editing is available for flowcharts only. State, sequence, class, and ER diagrams render as native Miro shapes, but visual editing for those types is coming later.
Visual editing and the code panel are available in focus mode only.
Visual editing of shapes, text, and lines is limited to what Mermaid syntax supports.
Diagrams use Miro's native auto layout. You cannot move shapes around freely on a Mermaid diagram.

We assess feature requests on an ongoing basis, so if any of these limitations are a barrier to you, please get in contact with us either via the community or your admin.

Additional information

For Mermaid syntax, supported diagram types, and examples, see the official Mermaid documentation.
For Diagram format features such as layers, containers, and focus mode, see Miro Diagrams.
For connecting AI tools to Miro, see Miro MCP Server overview.
For Sidekicks and Flows, see Sidekicks overview and Flows overview.