Create Mermaid diagrams (Beta)

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.

NOTE: Structured Mermaid diagrams are in Beta. Supported diagram types and editing capabilities are improving iteratively, and some capabilities described below are still rolling out.

NOTE: 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.
• 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 three ways.

Paste Mermaid code on the board

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

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.

1. Connect your AI tool to Miro MCP.
2. 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.
3. 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.

NOTE: 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

1. On a Miro board, open the Creation bar and select Formats > Diagram.
2. Click Build with code.
3. Paste your own Mermaid code into the code panel, or choose a Mermaid template.
   The diagram renders as Miro shapes.
4. 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 edit a diagram with AI. Changes stay in sync.

Edit visually

1. Open the diagram in focus mode.
2. 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.
   
3. Set the layout direction. Click the direction control in the Diagram toolbar and choose Top to bottom, Bottom to top, Left to right, or Right to left.
   
4. Adjust spacing. Open the layout control and choose Narrow for a tighter layout, Regular for balanced spacing, or Wide for a roomier layout that is easier to scan.
   
5. Open the code panel to confirm the Mermaid syntax updated to match.

Edit the code

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

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

1. Copy the link to the diagram widget.
2. Open your AI tool of choice, with Miro MCP authenticated.
3. 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.

NOTE: Visual editing and the code panel are available in focus mode only. Split-view editing directly on the canvas is not 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.

1. 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.
2. 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.

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

Supported diagram types

Flowcharts render as native Miro shapes. Additional Mermaid diagram types are being added iteratively:

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.

Share and export

• 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

Because structured Mermaid diagrams are in Beta, keep these current constraints in mind:

• Visual editing is available for flowcharts only.
• 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. To move shapes around freely, or to use a layout Mermaid doesn't support, convert the diagram to free-form.
• Drag-and-drop of shapes is coming soon. For now, add shapes with the + button on a shape, or with copy-paste and duplicate.

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.