Visimer enables direct visual editing for Mermaid diagrams without manual coding
Visimer makes it easier to tweak Mermaid diagrams visually, without dealing with syntax. Moving or renaming nodes requires constant code tweaks and preview refreshes. Visimer overlays a WYSIWYG interface on top of Mermaid.js, enabling direct visual adjustments. Instead of wrestling with syntax, users can simply click and drag elements to their desired positions.
This tool is particularly useful in AI workflows. While LLMs can generate initial diagram structures, they often struggle with precise positioning and accurate labels. Visimer lets LLMs handle the heavy lifting, then allows users to fine-tune the final product visually, without having to parse the Mermaid code.
Visimer's technical approach is innovative. Most visual editors for code-based diagrams regenerate the entire text file on each change, which can disrupt manual formatting and comments. Visimer maps rendered SVG elements directly to a Concrete Syntax Tree (CST). When a node is renamed or moved, the library identifies the specific character range in the source code that needs updating and modifies only that segment, preserving the rest of the file.
Visimer is designed as an embeddable component library, making it versatile for various development environments. It offers specific bindings for popular code editors like Monaco Editor and CodeMirror, and a headless version for custom UI development.
The playground provides a hands-on way to explore Visimer's features. Users can drag nodes, modify shapes, and edit labels in real-time, watching the corresponding Mermaid code update in a side panel.
Visimer is already integrated into the OpenKnowledge markdown IDE, allowing users to edit Mermaid diagrams within markdown documents. This integration significantly enhances the standard experience of writing Mermaid code, ensuring diagrams look professional without manual formatting.
All Replies （3）
Want a live back-and-forth? Join the global AI chat room — login to talk.
So frustrated with manually tweaking flowcharts—especially when trying to reposition a single node or fix a label, only to end up stuck in a loop of syntax edits and refreshes. Does Visimer handle complex sequence diagrams too? I’ve heard it maps SVG elements directly to the Mermaid syntax tree, so when you drag or rename a node visually, it updates only the relevant part of the code—no need to rewrite the whole file or lose formatting. That alone could save hours of frustration.
My text files are always a disaster when aligning nodes. Does this actually handle complex layouts? It seems promising since Visimer maps rendered SVG elements directly back to a Concrete Syntax Tree, allowing you to modify specific segments without regenerating the entire file.
Draw.io is far more reliable. Why deal with another Mermaid wrapper for simple diagrams? Manually writing Mermaid syntax works well enough until you need to reposition a single node or rename a label, at which point you often get stuck in a repetitive loop of editing text and refreshing the preview.