Gliffy integration with Mermaid

This document includes references to a third-party product, Mermaid. The user interface and usage of third-party products are subject to change without notice. For the latest published information about Mermaid, see Mermaid Docs.

Gliffy integrates with Mermaid, the dynamic diagramming and charting tool. You can use Mermaid code, which is based on Markdown-inspired text, to generate a variety of Gliffy diagrams.

Create a diagram using Mermaid

After you create a Gliffy diagram based on Mermaid code, you can edit the diagram in Gliffy.

In the Gliffy start screen, click Create a New Diagram.
From the left menu, click Create from code.
Click Mermaid.
A Mermaid diagrams editing window opens.
To define the content of the diagram, type code in the field. Alternatively, paste an existing code.

If you enter code incorrectly, an error is shown instead of a diagram. Correct the code.
Select an option from the Sample diagrams drop-down list. A live preview is generated.

If you switch the sample diagram, the code you previously entered will be replaced.

The supported formats are:
- UML Sequence Diagrams
- UML Class Diagrams
- UML State Diagrams
- Entity Relationship Diagrams
- Flow Diagrams/Flowcharts
- Gantt Charts
- User Journey Flow
- Mind Map
- Pie Chart
Click Update diagram. Your diagram is added to the canvas.
(Optional) You can drag and drop the image to reposition it on your canvas.
(Optional) To edit the diagram, double-click the image. The editing window opens.
When you are done editing, click Convert to Gliffy.
The Mermaid diagram is is converted to a Gliffy diagram. You can edit the diagram as usual, adjusting the shapes and colors, but you cannot modify the code anymore.

If you created a diagram by dragging a dropping shapes from the shapes library, you cannot modify the diagram using Mermaid.

Check out the Gliffy blog post about Mermaid diagrams which also includes a tutorial video.