Reladraw - Diagram language with explicit relative placement
Show HN: Reladraw – A diagram language where you decide where to place things
Reladraw is a text-based diagram language where you state where things go using relative statements like 'above-left of cluster.hub' — no coordinates. It sits between auto-layout tools like Mermaid and absolute-positioning tools like draw.io, giving you precise control without manual pixel work. The resolver computes the tightest arrangement from minimum distances, so edits stay fast and predictable. Ideal for agents and developers who need to modify diagrams by editing sentences, not numbers. Try it in your browser or install via npm.
Every position is stated relative to something else, and nothing in the file is a coordinate — the file states the arrangement, not an algorithm.
- atombender
The readme says:
> Mermaid, Graphviz and D2 let you declare boxes and connections, then determine positions for you. If you have a particular picture in mind, these aren't the right tool.
D2's layout engine TALA [1] actually allows you to provide a lot of manual control. TALA used to be commercial, but is now open source.
In my own testing, TALA tends to produce much better layouts than Mermaid, including the ELK layout algorithm (which is not Mermaid's default; D2 also supports ELK).
TALA supports controlling direction per container, defining which shapes have to be near each other, and so on. I've not played with this yet, though.
- apinstein
This is very needed in the AI coding age! I find diagramming is one of the best ways for high bandwidth alignment between my mental model and the agent’s. I have been working on this problem a bit as I see good visuals as a key bottleneck in faster development while maintaining a real architecture.
Will def be adding this to my list of diagramming tools the agent can use!
- picardo
Love it! I created a VSCode extension to render it in markdown files and highlight its syntax: https://github.com/volkanunsal/relative-diagrams-vscode/
- s1mon
I’m excited to see this, but switching many of the examples from “dark” to “light” or “print” theme leaves the boxes black and the text unreadable.
- whizzter
I like it, drawing stuff around can get tedious if an engine like this can do it "automatically" when adding more stuff instead of copy-paste-move.
As a compiler writer I'm pondering if it'd be possible to parametrise to a degree with data-sources or you think that's something better suited to custom script generators (right now, it feels like you want to write a lot of this manually, but the grouping system does lend itself to wildcard expansions from data.
- tonnydourado
That's an interesting idea, and an unexplored design space. Graphviz's dot has rank and head/tail ports, and Plantuml's class diagram has some support for relative position, but both are more hints for the layout engine, not deterministic declarations. If I had a nickel for every hour I spent fiddling with a Plantuml diagram to get the relation directions to force the layout into at least an approximation of what I wanted, I'll be a lot closer to retirement.
I like that you're going for one generic syntax instead of many specific ones, like mermaid and Plantuml, but it's as much as a pro as it is a con, it's one reason why these languages evolved in the first place, instead of everyone just using DOT. One possible mitigation would be some sort of reuse mechanism? Some way that generic nodes could be defined once and instantiated many times, so if I wanted to draw something like a sequence diagram, I could define/change my participant lanes just once.
Another issue the "No multi-line statements, no line continuations, no blocks." philosophy. I get *why* you chose it, and has its advantages, but it's a pretty annoying constraint, specially if one wants to have longer node names, or have more detailed description of the node in its label, like listing the responsibilities of a class, for instance. "No blocks" is something that can probably won't make much difference, but line continuations (i.e., some distinction between physical and logical lines) can make or break the user ex […]
- hhh
I use Excalidraw for this
- recroad
Seems a little buggy, I added this line:
edge parser -> renderer "test edge" from: left to: right
and it wasn't smart enough to make a curved arrow