Reladraw: Text-based diagram language with explicit layout control

Original: Show HN: Reladraw – A diagram language where you decide where to place things

Why This Matters

Fills a real gap between auto-layout and manual tools for engineers who want layout intent preserved in code.

Reladraw is an open-source diagram language that lets users specify spatial relationships (e.g., 'above-left of', 'between') in plain text, then resolves exact coordinates automatically. It targets users who need precise layout control without hand-placing every element in GUI tools like draw.io.

Reladraw sits between fully auto-layout tools like Mermaid, Graphviz, and D2 — which place elements for you — and manual GUI tools like draw.io, where you drag everything by hand. The project lets users write relational position statements such as 'above-left of cluster.hub' or 'between cluster.desktop1 and cluster.laptop1', and a constraint solver works out the coordinates. The result: a 44-statement text file can reproduce a diagram that would require significant hand-positioning in draw.io, with no explicit coordinates anywhere in the source file. A live browser demo lets users edit source text on the left and watch the layout update on the right. The repo is written in TypeScript, licensed Apache-2.0, and currently sits at 238 stars with active commits. The project includes a full SYNTAX.md reference and example files.

Source

github.com — Read original →