Create Mermaid diagrams

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. For setup steps, see 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 Begin with code.
3. Choose a Mermaid template, or paste your own Mermaid code into the code panel.
   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 a diagram with AI, visually on the board, or in the Mermaid source. Changes stay in sync.

Edit visually

1. Open the diagram in focus mode.
2. Add or remove shapes and connectors as you would with any Miro diagram.
3. Change the layout: top to bottom, left to right.
4. 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.

Edit with AI

1. Copy the link to the diagram widget.
2. Open your agent 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, use one of the entry points in the shapes panel or the layout panel to switch the diagram 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:

• Flowcharts: Render as native, editable Miro shapes.
• Sequence, Class, and Entity Relationship diagrams: Render as native Miro shapes; visual editing is coming soon.
• Other diagram types: If you need a diagram type not listed above, 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.