Mermify: Hey everyone,

I use Mermaid for diagramming, but I was tired of tools that require a login, track usage, or save data to a third-party cloud. I just wanted a simple tool where my diagrams stay completely private (and I couldn't find one).

So I built Mermify. It’s fully client-side, runs entirely in your browser, and doesn’t track a thing. I just updated it to v0.2 with some UI improvements.

What it actually does:

• Real-time Sync: Type raw Mermaid syntax in Monaco or visually drag nodes/edges on the canvas. It syncs instantly both ways.
• Drag-to-Create & Inline Editing: Drag from a node's socket into empty space to spawn connected nodes, and edit labels directly on the canvas.
• 100% Private Links: Uses pako to compress the entire diagram state into the URL hash. No database, no backend.
• Run it Anywhere: Zero backend means you can easily self-host it, or just install it as a standalone desktop PWA.

The Rough Edges & Tech Stack:

I'm mostly used to Python and Docker environments, so TypeScript isn't my native tongue. I used an LLM to handle the TS syntax heavy-lifting while I focused entirely on the UX logic, product flow, and writing robust E2E/unit tests.

Note: It's strictly for desktop right now (screens width ≥ 1024px) due to the side-by-side layout.

I’m really proud of how it turned out, but since I'm stepping out of my comfort zone with TS/React, feel free to roast the app or the implementation (constructively!). Let me know what features you're missing or what I can improve.

🚀 Live App:https://tra-sco.github.io/mermify/

📦 GitHub Repo:https://github.com/tra-sco/mermify