Mermaid Graphical Editor: A Visual Approach to Mermaid Diagramming

We’re excited to introduce the Mermaid Graphical Editor, a free tool created by one of Astah developers, corschenzi.

What is the “Mermaid Graphical Editor”?

The Mermaid Graphical Editor is a free tool that allows you to create Mermaid diagrams visually, while still offering the original option to edit via code. This tool is available as an extension for Visual Studio Code and Chrome.

Mermaid.js provides a powerful way to generate diagrams using code, but many developers face a common challenge : the steep learning curve of Mermaid’s syntax. The creator of this tool wanted to make diagramming easier by offering a more visual, intuitive approach, eliminating the need to learn Mermaid syntax from the start – drawing on the knowledge and expertise gained from Astah, our software modeling tool.

Supported Diagram Types:

Flowchart
UML Class Diagram
UML Sequence Diagram
ER Diagram

Download (Last Updated v0.4.1 on 8/25/2024)

You can add the Mermaid Graphical Editor to Visual studio Code or Google Chrome directly from the links below:

For VSCode

For Chrome

How to get started:

On Visual Studio Code:

Open an existing .md file or create a new one.
When you type a Mermaid code block (```mermaid), the “MermaidEditor” menu will automatically appear at the top of the editor.
Click “MermaidEditor” to open the diagram editor in the right pane.
From the top toolbar, select stencils and click on the diagram canvas to start creating diagrams – just like any general drawing tool! As you build the diagrams graphically, the code is generated automatically.

On Chrome:

Click the Mermaid Editor icon in the tool bar
This opens the editor window.
Choose the diagram type you want to create.
Select stencils from the top and click on the diagram canvas to create your diagrams graphically, with the code automatically generated in real-time.

Editing diagrams with a live preview on the same screen is extremely handy – for instance, you can generate diagrams using the diagram editor window, then directly copy and paste the generated code into GitHub issues without switching the apps.

Stay Tuned for Updates!

We will soon be updating the “How to Use” documentation! In the mean time, feel free to explore the Mermaid Graphical Editor. If you have any questions or feedback, please leave a comment below!

– Astah Team