Mermaid diagrams for Miro

People: All users
Plans: All plans
Platforms: Browser, Desktop

With the Mermaid app, you can easily create and embed rich, code-based diagrams directly within your Miro boards. This allows you to visualize complex systems, workflows, or data structures using a simple text-based syntax, enhancing collaboration and understanding.

Changing a diagram code and seeing the preview update in real-time

Install the Mermaid app

You can install the Mermaid app from the Miro Marketplace or directly from the Creation toolbar within a Miro board.

To install from the Miro Marketplace:

1. Navigate to the Miro Marketplace or follow this direct link to the Mermaid app.
2. Select a Miro team to complete the installation.

You can also install the app from the Creation toolbar:

1. In the Creation toolbar on the left of your board, select Tools, Media and Integrations (+). The Tools, Media and Integrations panel will open.
2. In the Tools tab, search for and select Mermaid Diagrams.
3. The Mermaid Diagrams app panel will open, and the app will be added to your toolbar.

✏️ Note: Non-admin users cannot install apps if app installation is restricted in the team settings.

Create and add diagrams to Miro boards

Once installed, the Mermaid app allows you to generate diagrams using text-based code and add them to your board as images.

After installation, you will find the Mermaid app on your Creation toolbar. The app opens with a default sample code. As you modify the code to build your diagram, it refreshes in the preview area on the right, allowing you to see your changes in real-time.

The Mermaid app includes several sample diagrams, accessible from the bottom left corner of the app panel. You can select one of these samples and then customize it to fit your needs.

You can change the size of the code editor pane by dragging its right edge.

Changing the size of the code editor pane

When you have finished building your diagram, click Add to board. The diagram will be added to your board as an image.

Adding a diagram to the board

Edit existing diagrams

You can also modify Mermaid diagrams that are already on your Miro board.

1. Click the Mermaid diagram image on your board to select it.
2. Click the Mermaid icon in the context menu that appears (or find it on the Creation toolbar).
3. The Mermaid editor will open with the diagram's code. Make your changes in the code editor.
4. Click Update Diagram.
5. You will be returned to your Miro board, and the diagram on the board will be updated with your changes.

Additional information

Here are some additional resources and details for working with Mermaid diagrams in Miro.

Mermaid syntax and documentation

The Mermaid app uses a specific syntax to generate diagrams from text. For detailed information on the syntax, including supported diagram types and options, please consult the official Mermaid documentation. You can also access a link to this documentation from the bottom left corner of the Mermaid app panel within Miro.

Sharing and exporting diagrams

Once a Mermaid diagram is added to your board, it functions as an image. You can download this image directly from the board if needed. To collaborate with others, you can share the Miro board containing the diagram.