Use diagram as code to generate a Lucidchart diagram using Mermaid. Once you’ve written out the Mermaid code, you can automatically generate a diagram onto your Lucid document.

Free	Individual	Team	Enterprise	FedRAMP

See the Upgrade your Lucid account article for instructions to upgrade.

The Mermaid code entered to generate a diagram is only compatible with the English language. If you are working in Lucid with another language, the code will need to be translated to English.

Generate a diagram

Get familiar with the diagram as code process by leveraging one of our provided examples for each supported diagram type. When you’re ready, generate a diagram by writing out your own Mermaid code.

Note: If a diagram isn’t generated and you see a “Syntax error. Please check syntax.” message under the diagram as code editor instead, make sure the Mermaid code is formatted correctly and retry.

Use a provided example

To create a diagram using the provided examples, follow these steps from the diagram as code menu:

Select +New Mermaid diagram.
From the bottom of the provided editor, click one of the example options.
Code will automatically be added to the editor for the selected example type.
Edit the example code as needed.
Click Generate.

The diagram will be generated on the canvas.

generate-sequence-diagram-from-provided-example-in-lucidchart.gif

Create from scratch using Mermaid

To create a new diagram from scratch using Mermaid code, follow these steps from the diagram as code menu:

Select +New Mermaid diagram.
Type your code in the provided editor.
Click Generate.

The diagram will be generated on the canvas.

manually-build-flowchart-diagram-using-mermaid-code-in-lucidchart.gif

Learn more: For instructions to get started with Mermaid, check out this Mermaid user guide from the Mermaid help center. The link provided navigates you out of the Lucid help center and we cannot guarantee the accuracy of the content.

Edit a diagram

A diagram generated from code is displayed as an image on the canvas and must be updated by opening and editing the code. To do so:

Open the associated code editor using one of the following ways:
- Click the diagram on the canvas.
- Navigate to the diagram as code menu, scroll through, and select the diagram you want to edit.
Click into the editor and make your changes.
Click Update.

The diagram will be updated on the canvas.

edit-mermaid-code-to-update-flowchart-diagram-in-lucidchart.gif

Supported diagram types

The following diagram types are supported using Mermaid code:

Flowchart: Build easy-to-follow flowcharts that cover complex systems and processes.
Sequence: Represent the processes and objects that live simultaneously, and the messages exchanged between them to perform a function, before the lifeline ends.
Class: Map out the structure of a particular system by modeling its classes, attributes, operations, and relationships between objects.
State: Build a behavioral diagram to show transitions between various objects.
C4: Leverage the four levels of models (context, containers, components, and code) depending on your audience.
Gantt: Visually represent the schedule and progress when managing a project.
Entity Relationship: Visually represent a database to show relationships between fields.

Learn more: To learn more about Mermaid syntax and how to use supported diagrams in Lucidchart, check out this post from the Lucid Community.

FAQ

What version of Mermaid is supported in Lucidchart?
Lucidchart is optimized to support version 11.4.1 of Mermaid.

How do I style and format a diagram I generated using Mermaid code?
When you generate a diagram in Lucid using Mermaid code, it’s displayed as an image on the canvas. To edit the style and format of your diagram, include Mermaid styling syntax directly in the code.

Give feedback on this article

Have feedback about this article? Tell us about your experience here.

Related articles