Visimer lets you edit Mermaid diagrams without touching the code

PromptCube Expert 1h ago 42 views 6 likes 2 min read

Writing Mermaid syntax by hand is fine until you need to move one specific node or rename a label, at which point you're stuck in a loop of editing text and refreshing the preview. Visimer fixes this by adding a WYSIWYG layer on top of the Mermaid.js renderer, allowing for direct point-editing on the visual canvas. Instead of fighting with the syntax to get a layout just right, you can just click and drag.

This feels like a necessary addition to any AI workflow. LLMs are incredible at generating the initial structure of a flowchart or sequence diagram, but they often hallucinate the exact positioning or trip up on a specific label. Having a visual editor means you can use an LLM for the heavy lifting and then manually polish the artifact for professional sharing without having to manually parse the Mermaid code.

How it works under the hood

The technical implementation is where this gets interesting. Most visual editors for code-based diagrams try to re-generate the entire text file every time a change is made. The problem with that approach is that it strips out all your manual formatting and comments.

To solve this, Visimer maps the rendered SVG elements directly back to a Concrete Syntax Tree (CST). This means when you rename a node on the screen, the library identifies the exact character range in the source code that needs to change and updates only that segment, preserving everything else in the file.

Integration and Deployment

If you're building an app and want to add this functionality, it's designed as an embeddable component library. It isn't just a standalone tool; it provides specific bindings for popular code editors:

Monaco Editor: Full support for VS Code-like environments.
CodeMirror: Ready for lightweight web-based editors.
Headless Version: Available for those who want to build their own custom UI logic on top of the engine.

For those who just want a practical tutorial on how to use it without coding a library, the playground is the fastest way to see it in action. You can drag nodes, change shapes, and edit labels in real-time while seeing the Mermaid code update in a side panel.

If you're looking for a full-blown environment to use this in, it's already integrated into the OpenKnowledge markdown IDE. It essentially turns Mermaid diagrams into editable objects within a markdown document, which is a massive upgrade over the standard "write code, hope it looks right" experience.