The Lab is open! Here's The Little Mermaid Editor! (#mermaid #mermaidjs #diagram #web #pwa)

If you've ever needed to whip up a quick diagram and found yourself fighting with clunky tools, creating an account you'll never use again, wondering who's watching over your shoulder while you sketch out your system architecture, or if all your confidential work is going to be used to train some AI... I feel you. That's exactly why I built The Little Mermaid Editor.

What is Mermaid?

In short, it is a markdown syntax for creating different types of flowcharts. It takes a little while to get used to, but when you do, you can create neat diagrams, and share them as text in readme files, or saving as images.

Here's an example:

1flowchart TD
2    A[Do some coding] --> B{Is it working?}:::decision
3    B -- Yes --> C{Only on your Machine?}:::decision
4    B -- No --> A
5    C -- Yes --> A
6    C -- No --> D[Nice! Ship it!]

What is it?

It's a browser-based Mermaid diagram editor that runs entirely in your browser:

1. No AI feature you never asked for being shoved down your throat.
2. No subscription required.
3. No tracking.
4. No account creation.
5. No ads.

You open it, you type Mermaid syntax, you see your diagram. That's it.

You can try it right now: The Little Mermaid Editor

Features

Here's a quick rundown of what it can do:

• Live preview: type on the left, see the diagram update on the right in real time.
• Shareable links: generate a URL that encodes your diagram, so you can share it with anyone without creating an account or uploading anything.
• 20+ diagram types: flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, mindmaps, timelines, C4, and more. If Mermaid supports it, the editor supports it.
• Multiple layouts: horizontal split, vertical split, editor-only, or preview-only. Switch with a click or Alt+1 through Alt+4.
• Multi-tab documents: work on several diagrams at once, each with its own undo history.
• Dark mode: because of course.
• Diagram themes: switch between default, dark, forest, and neutral themes to match your style.
• Templates: save your own diagram templates and load them whenever you need a starting point.
• Auto-history: the editor automatically snapshots your work every 30 seconds while idle, so you can always roll back if needed. You can also save manual snapshots.
• Export: download your diagram as SVG or PNG, with configurable options.
• Copy to clipboard: copy as source, Markdown block, SVG, or PNG. Great for pasting directly into docs or chat.
• File I/O: open and save .mmd files directly. You can also drag and drop files onto the editor.
• Format / pretty-print: auto-format your Mermaid source with one click.
• Context-sensitive docs: the editor detects what diagram type you're working on and links directly to the relevant Mermaid documentation.
• Keyboard shortcuts: a full set of shortcuts for power users. Hit F1 to see them all.
• Interactive preview: zoom with scroll, pan by dragging, double-click to fit, and click on any node to jump to its source line in the editor.
• Installable (PWA): you can install it as a standalone app and use it fully offline.

Why another Mermaid editor?

There are other Mermaid editors out there, and some of them are pretty good (and free). But I wanted something simple: open a page, draw a diagram, export it, done. No friction, no data leaving my browser, no need to worry about how the editor is tracking me, and data leaks.

Try it out

Here's the link: The Little Mermaid Editor

It's free, it's open, and it respects your privacy. Hope that helps! :)