What is Mermaid flow 2.0?

Mermaid flow 2.0 is a complete rewrite of the Mermaid flow platform. This endeavor began after I received some feedback regarding the design and onboarding workflows of the Mermaid flow platform.

So whats new?

The editor

The new editor makes it easier and more intuitive than ever to create mermaid diagrams. It features a tab based toolbar on the left and an interactive mermaid image on the right.

The toolbar allows for up to 2 tabs to be open at once so you can manually adjust your diagram text while AI creates something for you. The new export panel allows you to take your diagram with you featuring text and image export options.

On top of all this, the image editor is now much more intuitive, with element toolbars to edit elements, accessible element buttons and drop target borders for easy drag and drop diagramming.

A focus on accessibility

Mermaid flow is now much more accessible than before. You can now create diagrams completely by keyboard navigation, all buttons have hover and press animations and all images have alternative text for screen readers.

We recognize accessibility isn't a binary switch and will continue working to make Mermaid flow the most accessible Mermaid editor ever. Some future work is planned to make the keyboard editing experience even smoother so you don't even need to reach for you mouse to create beautiful diagrams.

Mobile friendly

Following on from our mission to create the most accessible editor ever, Mermaid flow is now completely mobile friendly. The mobile editor is fully featured allowing you to edit visually, via text, drag and drop and even AI.

A fresh modern design

The most recognizable change is the beautiful and fresh new design. We have modernized and revamped the entire design system to allow us to scale the apps design language into the future.

The design features both a light and a dark mode which you can adjust in the footer of the site.

Documentation and onboarding tours

In an effort to ease the learning curve, we have invested significantly into our documentation and onboarding workflows. The documentation covers the general information, the editor, Mermaid flow premium and also Mermaid js syntax. Also, the editor now has a "Start a tour" button, which will guide you through the features it has whilst our Premium members will be greeted with a special onboarding tour.

This blog

Well, you are reading it! So you get the idea. Check in here for the latest updates and features of Mermaid flow.

Mermaid flow premium

Mermaid flow Premium is our fully featured diagramming platform providing a best in class editing experience, checkout the pricing here.

Mermaid flow premium is packed full of the following features:

• Visual editor
• Commercial use
• Lightning fast generative AI features
• Ad free experience
• Priority issue and feature request support
• Future updates and planned features

We are so excited to help you save thousands of hours by helping you create beautiful diagrams as quickly and easily as possible.

So whats old?

Credits

Mermaid flow now moving to a subscription based model which means credits will no longer be valid. If you already have credits don't worry, as an early bird user we will be giving you a special offer to ensure any credits you do have don't go to waste.

Flowchart editor

The editor previously hosted at https://www.mermaidflow.app/flowchart will be removed from the home page. Don't worry, all your diagrams will still be accessible via their original links but we will remove the button from the site. Please reach out to [email protected] if you have any questions or concerns.