How It Started
I am a backend software engineer, primarily working in the Java ecosystem. Most developers in my space know about PlantUML and have probably been using it for years—I certainly have. PlantUML has long been a go-to tool for developers who need a robust way to write UML diagrams as code. But let's face it: PlantUML is showing its age.
As powerful as it is, PlantUML can feel slow, its default look-and-feel is dated, and its interactive feature set has lagged behind modern development workflows. That is a major reason why alternatives have gained so much ground. Tools like Draw.io and Mermaid.js have steadily captured a large portion of the mindshare that PlantUML once held.
While Draw.io is a visual drag-and-drop tool rather than a pure text DSL, it offers rich component sets and high customizability. However, text-based versioning and quick code playback aren't its primary strengths.
On the other hand, Mermaid.js brought text-to-diagramming into the modern web. It is fast, renders across browsers and IDEs, offers an accessible DSL, and integrates directly into platforms like GitHub and Notion.
Yet, I felt we could take this concept even further. We need something more modern, more customizable, and more tactile—a text-to-diagram engine that is fast, easy to learn, and visually sharp, while bridging the gap between raw code and visual canvas control.
Introducing DrakoFlow
For a long time, I’ve dreamed of having a diagram engine that makes sharing architecture effortless. A tool that enhances the documentation experience rather than standing in the way of it. So, I finally decided to build it.
I wanted DrakoFlow to be fast, robust, and elegant—not only in its syntax, but in its visual output. Most importantly, I wanted it to be 100% free, open-source, and privacy-first (running entirely in the browser with zero server dependencies).
Building it was a challenge. As a backend developer, creating a heavily interactive, client-side web application meant stepping far outside my comfort zone. I had to master TypeScript, dive into advanced SVG geometry, and develop an eye for UI/UX and visual design.
After months of focused development, I am excited to share what I've built.
👉 Try the live tool: DrakoFlow – Text-to-Diagram Engine
⭐️ Explore the code: GitHub Repository
The Design Philosophy
When designing DrakoFlow's Domain-Specific Language (DSL), I had one primary goal: make the syntax simple and intuitive without sacrificing expressive power.
I wanted developers to feel immediately at home, keeping the learning curve as flat as possible. The syntax takes inspiration from JSON and CSS-like blocks, using familiar structural tokens like {, [, and :.
1. Extensible Component Blocks
Every element explicitly declares its identifier and component type, keeping code readable and fast to parse:
Gateway: Rectangle {
label: "API Gateway"
rx: 8
ry: 8
x: 50
y: 155
}
2. Fine-Grained Theme Overrides
Visual customization is supported both globally through themes and locally per-element using a clean themeOverride block:
Database: Rectangle {
label: "User Database"
rx: 6
ry: 6
themeOverride: {
borderColor: "secondaryColor"
}
}
3. Nested Scopes & Containers
Grouping components into logical subsystems or containers follows the exact same nested hierarchy:
MyRectangle: Rectangle {
label: "Rectangle"
rx: 8
ry: 8
}
MyContainer: VerticalContainer {
label: "Core Pipeline"
gap: 12
padding: 16
Step1: Process {
label: "Process Payload"
}
Step2: MyRectangle
}
What’s Next
This first part covers just the foundation. Over the course of its development, DrakoFlow has expanded into a comprehensive visualization suite supporting bidirectional drag-to-code synchronization, Git Flow branching engines, interactive Mindmaps, 3D quantitative charts, and self-contained HTML player exports.
In Part 2, I will dive into the technical details of how the bidirectional sync works under the hood, how the browser-based layout engines compute coordinates, and explore the advanced features that make DrakoFlow unique.
If you'd like to test it out today, check out the Live Studio and let me know your thoughts in the comments!
