One of our engineers at Astah, Kenji Fujimoto developed a “Mermaid Graphical Editor” which is a plug-in you can add to Visual Studio Code (VS Code) and Google Chrome to enable you to preview and directly edit Mermaid diagrams using the graphical editor.
What is Mermaid?
If you aren’t familiar with Mermaid, Mermaid is a diagramming tool that enables you to create diagrams and charts by Markdown-like markup dynamically in the browser. Mermaid has been getting popular with developers and last year GitHub started supporting Mermaid. Now you can easily create diagrams inline using Mermaid syntax to include Mermaid diagrams in GitHub.
What does “Mermaid Graphical Editor” do?
So what does “Mermaid Graphical Editor” do?
You can preview the diagram you create with Mermaid syntax, and also directly edit diagrams using the simple graphical tool. Of course, the code is updated in real time accordingly when any change is made from the presentation.
You can also create Mermaid diagram from scratch using the graphical editor, then use the generated code for sharing.
It is wonderful to be able to create diagrams with text, but it also takes some practice to convert the diagram image you want to draw into text in your head.
Simple diagram is easy but when the diagram gets complex, it’d be easier just to click the presentation and edit diagrams visually – especially when updating the existing diagrams.
What diagrams are supported?
Currently, the following two diagram types are supported for the Mermaid Graphical Editor. And support for UML class diagram is on its way!
- Flowcharts
- Sequence Diagram
Let’s get it installed!
You can directly access the Marketplace to add the Mermaid Graphical Editor to VS Code and Google Chrome from the links below.
For VSCode
For Chrome
Or you can directly search for “Mermaid Graphical Editor” within VSCode.
Use on Google Chrome
By adding Mermaid Graphical Editor extension to your Chrome, you can open the editor directly in the browser with a set of code field and presentation field.
Since you can open it directly on the web browser, it is convenient to copy and paste the generated code for sharing, or to access the existing code you want to edit or use as a template to bring it to the editor.
We will give you more information about this in another blog post.
So stay tuned!
As a modeling tool vendor, we’re pleased to see how the visual communication using diagrams has become this easy.
If you are interested in diagramming for software design, please try out our product – Astah Professional.
You can create UML diagrams, ER diagrams, Flowcharts, Requirement diagrams and more with it and exporting to Mermaid code is available via using a free plug-in. 🙂
Astah in 5min 