{"slug": "show-hn-visimer-open-source-visual-editor-for-mermaid-diagrams", "title": "Show HN: Visimer – open-source visual editor for Mermaid diagrams", "summary": "OpenKnowledge founder Nick released Visimer, an open-source visual editor for Mermaid diagrams, enabling point-and-click editing of diagram elements while preserving file formatting. The library maps rendered SVG elements back to a concrete syntax tree (CST) to edit only the changed parts, and it offers bindings for Monaco and CodeMirror, plus a headless version. Visimer is available as an embeddable component and integrated into OpenKnowledge's markdown IDE.", "body_md": "Hi HN, Nick here, founder at OpenKnowledge. We built an open source library, Visimer, for editing Mermaid diagrams with a what-you-see-is-what-you-get visual editor. Try the playground at [https://visimer.com/playground](https://visimer.com/playground). You can rename labels, change shapes, add new nodes, etc. by clicking and dragging the visual canvas.\n\nWe set out to build this originally for OpenKnowledge, our markdown wysiwyg editor, then realized it’d be great to share it as a proper embeddable component library so that other apps can leverage it as well.\n\nOur general take is that AI is great for generating content, but whenever you want to tweak fine details, for example to create an artifact sharable with others, point-edit functionality is much better. We built Visimer to bring that to Mermaid diagrams, just like we did for markdown.\n\nSome technical bits:\n\n- Leverages the native Mermaid.js renderer for visualizing the Mermaid diagram true to how it’s intended. We add point-edit functionality on top.\n\n- We tried re-generating the entire file on every edit, but found that it would eat comments and formatting, etc. The final approach maps the rendered SVG elements back to a CST, so we can then edit only the parts of the file that should change.\n\nYou can pair the visual editor with any text-editor so you can have both visual and code-level editor experiences. The library provides bindings for Monaco and CodeMirror and is extensible. There's also a low-level headless version.\n\nIf you just care about being able to edit your Mermaid diagrams in your markdown, you can try it in the OpenKnowledge app (our OSS markdown IDE, available as Mac/Linux/Windows apps).\n\nLet us know what you think.\n\nComments URL: [https://news.ycombinator.com/item?id=49335470](https://news.ycombinator.com/item?id=49335470)\n\nPoints: 1\n\n# Comments: 0", "url": "https://wpnews.pro/news/show-hn-visimer-open-source-visual-editor-for-mermaid-diagrams", "canonical_source": "https://github.com/inkeep/visimer", "published_at": "2026-08-17 18:26:04+00:00", "updated_at": "2026-08-17 18:41:26.564840+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["Visimer", "OpenKnowledge", "Nick", "Mermaid", "Monaco", "CodeMirror"], "alternates": {"html": "https://wpnews.pro/news/show-hn-visimer-open-source-visual-editor-for-mermaid-diagrams", "markdown": "https://wpnews.pro/news/show-hn-visimer-open-source-visual-editor-for-mermaid-diagrams.md", "text": "https://wpnews.pro/news/show-hn-visimer-open-source-visual-editor-for-mermaid-diagrams.txt", "jsonld": "https://wpnews.pro/news/show-hn-visimer-open-source-visual-editor-for-mermaid-diagrams.jsonld"}}