Overview
Create flowcharts, sequence diagrams, mind maps, and other diagrams with Mermaid syntax. Write or edit the code and see a live preview as you work.
Use Lara to generate Mermaid code from a description, or start from a template. Show or hide the code, copy it, and export your diagram as an SVG or PNG.
When to use it
Map the steps in a process, such as an order or checkout flow.
Show how services, users, or systems interact in a sequence diagram.
Organize related ideas in a mind map.
Document a system or workflow alongside the notes that explain it.
Features and settings
Setting
Hide or show the Mermaid code
Choose Hide code to display only the diagram, or Show code to see and edit its Mermaid source.
Built in
Preview diagrams as you write
The preview updates automatically as you edit the Mermaid code, so you can check the diagram while you work.
Built in
Generate a diagram with Lara
Describe the diagram you need and Lara can create Mermaid code for it. You can also start with a suggestion such as a user authentication flow or an order and payment process.
Built in
Copy or export your diagram
Use Copy to copy the Mermaid code, or export the diagram as an SVG or PNG.
How to use it
Add a Mermaid diagram
Add a Mermaid diagrams block to a page or board card. You can also ask Lara to insert one.
Write or generate the diagram code
Enter Mermaid syntax in Mermaid code, or describe the diagram you need to Lara and choose Generate diagram.
Check the preview
Review Diagram preview as you edit. The live preview updates automatically.
Choose how to use the result
Select Hide code to show just the diagram, Show code to edit the source, Copy to copy the code, or Export SVG or Export PNG to save the diagram.
Where it works
On any page
In the / menu
Inside board cards
Turn other blocks into it
Own settings panel
Lara can add it for you
Examples
Plan an order and payment flow
Map the customer journey from checkout through payment, including what happens if a payment fails. Generate a starting diagram with Lara, then edit the Mermaid code.
Explain a user authentication sequence
Show how a user, application, and service interact during sign-in. Keep the code visible while refining the steps, then hide it to focus on the diagram.
Organize project ideas
Build a mind map to group a project’s goals, tasks, and supporting ideas. Export it as an SVG or PNG to use outside your notes.
Tips · Limitations
Tips
Start with a template when you want a quick structure for a common diagram type.
Describe the process and its important branches clearly when asking Lara to generate a diagram.
Keep the code visible while editing, then select Hide code when you want the diagram to take center stage.
Use Ctrl / Cmd + Enter to render immediately.
Limitations
Mermaid diagrams use Mermaid syntax; code that cannot be rendered displays an error instead of a diagram.
Diagrams containing unsafe content are not rendered.
ZenUML-style diagrams that cannot be safely converted to a Mermaid sequence diagram need to be checked and rewritten as Mermaid.
Frequently asked questions
How do I make a Mermaid diagram?
Add a Mermaid diagrams block, enter Mermaid syntax in Mermaid code, or describe the diagram to Lara and choose Generate diagram. The preview updates as you work.
Can I create a flowchart without writing Mermaid code?
Describe the flowchart you need to Lara and have it generate Mermaid code. You can then review and edit the code alongside the preview.
How do I hide the code and show only the diagram?
Choose Hide code to show only the diagram. Select Show code to display the Mermaid source again.
Can I export a Mermaid diagram as an image?
Yes. Choose Export SVG or Export PNG to export the diagram.
How do I copy Mermaid diagram code?
Choose Copy to copy the Mermaid code.
Build your next page with Mermaid diagrams
Open Workspace, type / and add it in a second. Free to start, no credit card.