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.

  1. In the Gliffy start screen, click Create a New Diagram.

  2. From the left menu, click the button for the data-driven option.

  3. Click Mermaid.
    A Mermaid diagrams editing window opens.


  4. 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.

  5. Select an option from the Sample diagrams drop-down list. An SVG image 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

  6. Click Build diagram. The SVG image is added to the canvas.

  7. (Optional) You can drag and drop the image to reposition it on your canvas.

  8. (Optional) To edit the diagram, double-click the image. The editing window opens.

If you created a diagram using Mermaid, you cannot edit it from the shapes library. Similarly, 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.