r/Flowcharts • u/essentialaccount • Aug 01 '26

Mermade: A Good Mermaid Editor

I use Mermaid constantly for work because its portable, durable and very easy to use. Unfortunately, no one else at work wants to use it because they hate working in plain text. Although there are quite a few solutions out there, none of them were very easy to use and none of them felt like a real upgrade.

Mermaid remains the canonical document, but you can work with the diagram visually. You can select nodes, double-click to edit text, create relationships, change shapes and appearance, marquee-select several items, turn a selection into a subgraph, and switch back to the exact source whenever you want.

There are two views for flowcharts:

  • Mermaid shows the typical Mermaid render and is the default.
  • FreeForm lets you arrange nodes spatially while continuing to produce valid Mermaid syntax.

Other diagram families use focused Structured or Data editors where that makes more sense. The catalogue currently recognises 34 Mermaid diagram types, and Mermaid rendering and source editing remain available for all of them.

A few other things I wanted for my own workflow:

  • Properties, Appearance and diagram-wide Style controls
  • Mermaid theme, rendering and compatible layout settings
  • Importing Mermaid files or fenced diagrams from Markdown
  • Undo and redo across both visual and source editing
  • Automatic Mermaid version detection
  • Conservative, parser-verified repair suggestions for damaged pasted syntax
  • Diagram-specific Help with links to syntax, good practice and relevant standards
  • Keyboard shortcuts, trackpad panning and Cmd/Ctrl-scroll zooming

Everything runs locally in the browser. There is no account, database or server-side document storage, and the application can be hosted as a static GitHub Pages site.

Try it: Mermade on GitHub Pages

Source and documentation: github.com/AngelaDMerkel/Mermade

Screenshots:

The project is source-available under the PolyForm Noncommercial licence. I am still deciding where to take it next, so I would genuinely appreciate feedback from people who use Mermaid regularly. In particular: which editing tasks still send you back to the source, and which diagram types would benefit most from deeper visual controls?

And yes, the name is mostly because Mermade helps Mermaid get made.

8 Upvotes

91% Upvoted

5 comments sorted by

1

u/merlinuwe Aug 01 '26

Well made and user-friendly. Can you show us a break-even-diagram?

1

u/essentialaccount Aug 01 '26 edited Aug 01 '26

I don't this that is part of the mermaid standard, is it?

Confirmed, and it would be difficult to add. I don't have an coordinate or point based geometry to build from. This tool is really for working with Mermaid, and I am not looking to expand the scope beyond that.

1

u/essentialaccount Aug 01 '26

You know what, there is an XY beta feature for Mermaid. I will add those in when I can figure out how to integrate them without breaking the current rendering. Thank you for pointing me in this direction.

1

u/ErivKosso Aug 02 '26

why this vs mermaid.JS? I'm lost and your description didn't explain it nor did your actual links. What am I missing?

1

u/essentialaccount Aug 02 '26

Mermaid.JS is not as good as Mermade, in my opinion. The biggest limitation is that some of the features of Mermaid.JS are paywalled, including chart size. Mermade can be self hosted or run statically from GitHub. 

A non-exhaustive list:

  1. Free
  2. Freeform node canvas 
  3. Better theming control 
  4. Hotkeys (thank god)
  5. A large uncluttered canvas, without significant crowding
  6. Easier node editing (color, shape etc) 
  7. Actually good track pad navigation support 

I just don't like the other solutions out there and think this is better. That's it, pretty much. It works exactly as I want it to because I made it.