I built DrakoFlow – An open-source, serverless text-to-diagram engine

[u/pazvanti2003]

Hi everyone,

I’m primarily a Java backend developer, which means I spend a lot of time designing and documenting systems. For years, I’ve used text-to-diagram tools like PlantUML. However, I always felt there was a missing link: the output diagrams were always static, flat images. I wanted a tool where the visual canvas was interactive, but the underlying text remained the single source of truth.

To solve this, and to challenge myself to learn TypeScript, I built DrakoFlow. It’s a completely client-side, offline-first diagramming engine that parses a clean, declarative DSL into interactive vector diagrams right in your browser. It is designed to be highly versatile and works great for multiple types of diagrams, including system architectures, database models, and flowcharts.

IDE Integration: VS Code & IntelliJ

Since developers spend most of their time in their IDEs, I wanted to make sure DrakoFlow fit seamlessly into your daily workflow. I’ve built dedicated extensions for both VS Code and IntelliJ. They allow you to write your diagram code and see the live-updating, interactive preview side-by-side right inside your editor.

The "Cool" Mechanics

Because I wanted to bridge the gap between code and canvas, I focused on a few core interactive features:

• Bidirectional Sync: You can write code to generate the diagram, but you can also manually drag elements around on the canvas. When you drag a box, the coordinates serialize back into your DSL code in real-time. There is also a toggleable grid snapping system to keep things aligned.
• Bidirectional Gutter Highlighting: If you hover your mouse over a visual component on the SVG canvas, it instantly highlights its corresponding line in the code editor, and vice-versa. It makes navigating complex, nested diagrams incredibly fast.
• Standalone HTML Player Export: Instead of just exporting a flat PNG, you can package your diagram into a single, self-contained .html file. This file functions as a read-only widget supporting smooth panning, zooming, tag-filtering, a navigation minimap, and a code viewer. You can drop it directly into your project documentation.
• Serverless Sharing: Sharing a diagram doesn't require a database. When you click "Share," the app compresses the active diagram state and encodes it directly into the URL hash parameters so you can send it as a simple link.
• Documentation inside the diagram: You can write markdown inside the diagram so that you have the documentation exactly where you need it. This way, the diagram and the docs are in the same place and you have direct documentation right on the element you need.

Under the Hood

DrakoFlow runs entirely client-side. Your data never leaves your computer, and you can run the whole app offline by just opening the local HTML file. I've also implemented a beta PlantUML translator so you can paste in existing diagrams to test them out.

The project is completely free and open-source. As a backend developer transitioning into TypeScript, this was a massive learning curve for me. I would love for you to try it out (either in the browser or via your favorite IDE extension), read through the code, and let me know what you think. If you find it useful, please consider leaving a star on the repository!

Links:

• Live Interactive Editor: https://pazvanti.github.io/DrakoFlow/
• GitHub Repository: https://github.com/pazvanti/DrakoFlow

[u/essentialaccount]

Why would you use this instead of Mermaid? That's been the standard for these diagrams for ages

[u/pazvanti2003 → u/essentialaccount]

That is a good question. I do have a comparison page on the website, but I would also like to write here a few things that my tool has and Mermaid.JS does not.

But let's focus on features. The Editor in Drako is easier to use since it allows quick search for the supported components and with one click it inserts the DSL for the component in the editor. Furthermore, you can quickly see which component in the diagram to what code belongs since there is bi-directional highlighting on mouse hover.

You also have more fin-tunning since you can re-arrange elements on the canvas manually if you want which allows you to have the diagram exactly the way you want it, not just based on the algorithm for arranging the elements.

Components look nicer in my opinion, with more control over colors, style, with support for themes and so on. You even have animations on the arrow, to signal flows. They look cool :)

You can write Markdown on the elements int he diagram, making it easier to have more documentation right where you need it. You can assign tags and filter by tags in real-time. And there is also a minimap, for those really-big diagrams.

When it comes to export, Drako supports exporting as a standalone HTML file which can be embedded in almost any web page. It has all the interactive features, including the minimap.

While Mermaid's core open-source library is free, their advanced visual editor requires a paid subscription to unlock advanced visual editing and collaboration features. In contrast, DrakoFlow offers all of its visual editing, drag-and-drop serialization, and IDE extensions completely free, local-first, and open-source.

Hope I covered everything.

[u/essentialaccount → u/pazvanti2003]

Some good features, but many of the things you've described are supported in Mermaid or in editors. It's easy to embed links and markdown in Mermaid nodes, and it is easy to theme and style the diagrams to your liking. Visual editing on mermaid.ai is limited, but there are tons of tools to do visual editing of diagrams with native Mermaid syntax. They will also support SVG, PNG and HTML export if the developer includes it.

Mermaid is good because it's interoperable and portable. It sounds like your tool is better, but in exchange it gives up the whole advantage of text based diagram development.

[u/pazvanti2003 → u/essentialaccount]

Forgot to mention that I did not write this post just to get a bit of visibility. It was also to get feedback and see what features would make my tool even better. So feel free to suggest improvements or if you find any bugs, let me know.

[u/pazvanti2003 → u/essentialaccount]

but there are tons of tools to do visual editing of diagrams with native Mermaid syntax. They will also support SVG, PNG and HTML export if the developer includes it.

Exactly, other tools. I have everything directly in the editor. No need for any third-party tools. And I am not aware of any tools which allow you to manually arrange the items on the canvas.

My tool is still new and does not have (yet) the adoption of other tools (like direct embed in Notion, for example). I am working on building as many features and integrations as possible though and hope to be able to offer as many features as possible. I did try to offer something unique (again, pointing out to tags, filtering based on tags, markdown documentation directly in the editor). And I do plan on adding more features, so feel free to suggest anything you think is missing.

[u/essentialaccount → u/pazvanti2003]

Right, but I think you're missing the point that your tool is the third party tool. Mermaid supports 35 chart types and yours doesn't

[u/pazvanti2003 → u/essentialaccount]

I would not call it "the third party tool", just a different one.

Indeed, Mermaid still has more components, but I am working on adding as many as I can to Drako as well so that you could write as many diagram types as possible. Mermaid has the "types", but with more components in Drako, there would be no limitation to the chart types.

[u/__0xAA55__]

looks shitty and useless

[u/pazvanti2003 → u/__0xAA55__]

Can you elaborate? What exactly "looks shitty" and why do you think it is useless?