DEV Community

Kai Alder
Kai Alder

Posted on

I built a free Mermaid diagram editor that doesn't suck

I use Mermaid diagrams a lot. Architecture docs, PR descriptions, onboarding flows — they're everywhere in my projects.

But every time I need to quickly iterate on one, I end up in the Mermaid Live Editor. Which works... but feels clunky. No themes, the UI is busy, and exporting is annoying.

So I added a Mermaid Studio to webtoolz.dev.

What's different

Themes. Not just "default" and "dark" — actual styled themes like Blueprint, Forest, Neutral. Pick one from the dropdown and your diagram looks completely different.

Templates. Don't want to remember the syntax for a state diagram? Grab a template. Flowcharts, sequence diagrams, ER diagrams, Gantt charts — they're all there as starting points.

Split editor/preview. Write on the left, see the result on the right. Or go full preview when you're presenting.

Export. SVG or just share a link. The share URL encodes the entire diagram so nothing is stored server-side.

The privacy thing

Same as everything else on webtoolz — it runs in your browser. No backend. Your diagrams aren't being sent anywhere. If you're mapping out internal architecture or database schemas, that matters.

Try it

webtoolz.dev/mermaid

If you've got feedback or want a feature, open an issue on GitHub. Or just tell me here — I actually read the comments.

Top comments (0)