Diagram as code with Mermaid in Lucidchart

Access the diagram as code menu

To access the diagram as code menu in Lucidchart, follow these steps:

1. Select the Diagram as code icon from the Primary Toolbar on the far left-hand side of the workspace.

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.

Use a provided example

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

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

The diagram will be generated on the canvas.

Create from scratch using Mermaid

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

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

The diagram will be generated on the canvas.

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:

1. 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.
2. Click into the editor and make your changes.
   • As you edit, the diagram on the canvas will update in real-time.

The diagram will be updated on the canvas.

Supported diagram types

The following diagram types are supported using Mermaid code:

• Class: Map out the structure of a particular system by modeling its classes, attributes, operations, and relationships between objects.
• C4: Leverage the four levels of models (context, containers, components, and code) depending on your audience.
• Entity Relationship: Visually represent a database to show relationships between fields.
• Flowchart: Build easy-to-follow flowcharts that cover complex systems and processes.
• Gantt: Visually represent the schedule and progress when managing a project.
• Ishikawa: Build fishbone diagrams to visually map out cause-and-effect relationships during root cause analysis.
• Nested Treemap: Visualize hierarchical data structures using nested rectangles.
• Radar Chart: Create a chart to compare multiple quantitative variables on a radial grid.
• Sequence: Represent the processes and objects that live simultaneously, and the messages exchanged between them to perform a function, before the lifeline ends.
• State: Build a behavioral diagram to show transitions between various objects.
• XY Chart: Create comprehensive line, bar, or scatter plots to visualize relationships between data points.

FAQ

What version of Mermaid is supported in Lucidchart? 
Lucidchart is optimized to support version 11.14 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