I built a visual editor for Mermaid diagrams in VS Code

Ąžuolas Saulius — Thu, 23 Jul 2026 21:06:37 +0000

Mermaid diagrams are great because they are plain text, live with the code, and work well in Git. Writing the syntax gets tedious once a diagram becomes large.

So I built FlowForge, a visual Mermaid editor for VS Code.

Open an .mmd file and you get a canvas, Mermaid source, and a live preview. Drag nodes, draw connections, and edit labels visually. The three views stay in sync, but the file remains a normal Mermaid file that works with other tools.

I built this because I think diagrams can make spec driven development more practical. A system model can stay close to the original human intent, while still giving agentic tools a clear, structured spec to work from. For complex systems, that is often faster than trying to explain everything in a long document or a chat prompt.

I am still improving connection routing, text editing, clearer flowchart arrows, and support for more diagram types.

Flowforge is now available in the VS Code Marketplace:

https://marketplace.visualstudio.com/items?itemName=sauliusd3v.flowforge

It is open source under the MIT license. Source: https://github.com/SauliusDev/flowforge

DEV Community: Ąžuolas Saulius

I built a visual editor for Mermaid diagrams in VS Code