Show HN: Reladraw – A diagram language where you decide where to place things
I love making diagrams to help understand, plan, etc. However, the options are (A) auto-placement languages like Mermaid or Graphviz (which don't let me decide how the diagram looks), or (B) software like Draw.io which are powerful but are very time consuming (and inefficient for agents to manipulate). I wanted to have the benefits of both, where you can define a diagram in a diagram language, but also retain a high degree of control over what the diagram looks like. I also wanted this to work well for humans and agents. On the Github link, there's a playground where you can try it out without installation. There's also instructions for a simple npm install and for installing a skill you can use with Claude or other agents.
Discussion Highlights (20 comments)
v9v
Great! Reminds me of Pikchr a bit https://pikchr.org/home/doc/trunk/homepage.md
tetris11
I like it. I have too many issues with Mermaid
monster_truck
This genuinely fucks. Thank you Fighting with mermaid is so frustraiting, especially when it comes to normal vs github formatting. This is going to replace several ad-hoc half impls I have laying around
lastscattering
This is basically tikz's positioning library (right=of, below left=of) without having to touch LaTeX. With tikz it was never the nodes that hurt me, it was the edges. Once two edges want the same side of a box it gets ugly fast. Does the resolver do any routing, or is from:/to: all you get? And what happens with conflicting statements, does the first one win or do you get an error?
patriciobcs
I was looking for something like this. I wish it had different themes, the will prob be the best improvement.
aktenlage
That is damn interesting. When I made copilot write a script that creates a .dot diagram, I found it funny that it had the same problems with placement that I have when doing it manually.
kinduff
I love it, and I wish it was part of Mermaid. I've always struggled with the presentation and agents tend to hack or just straight use SVG lol
light_hue_1
I wish this just implement tikz without latex. I've yet to see a better drawing library that is both simple and has the depth to build the most complicated things.
ciefa
Huh, can you read my mind?! :D This is super cool. I love diagrams, charts, etc. and use them a lot. Both privately and for work. Definitely going to make use of this, I didn't know how much I wanted something like this until right now hahaha.
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
HeavyStorm
Mermaid works great for fixed layouts like sequence diagrams and Gantts. For flowcharts, where position is king, it's bad. I've tried using svg in my MD files but they get unwieldy quite fast. This is a great idea. My first reaction was - but what's if I need something more exact. But reflecting on it, I've realized that this relative positioning is probably enough.
zikohh
https://d2lang.com/ works well?
threecheese
Does this need to be shipped with a renderer? A better question is, are the node layout instructions ultimately being translated into absolute positions? If so, you could target any number of render backends, keeping the same simple interface for your agent, avoiding the bazillion problems rendering engines face to work well across the ecosystem.
wrs
Mermaid is open source, no? Can we just add these placement constraints to Mermaid instead of making a whole new language?
einpoklum
If this were implemented in a language with fewer dependencies, it'd be great.
tnspacetime
This seems nice but I’ll need to read the syntax more carefully to see how capable and convenient it is.
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!
rodmena
interesting. wonder how agents themselves can create something complex. I'll use it for sure. I direct my agents to [Graphviz provider]( https://graphviz.rodmena.co.uk/ )s these days.
Garlef
1. awesome ~ this seems to be in a sweet spot! (yes, mermaid is fine; but often looks bad - esp when visualizing large diagrams) 2. it would be great to have this as a layouting layer for C4 3. which brings me to a suggestion: i think it would make sense to allow for decoupling the topological parts of the language (arrows, groupings, etc) from the layouting concerns (left of, right of, etc)
altcognito
This is an area I think I've really enjoyed AI coding: DSLs are pretty fun to make and you can get pretty creative. Bravo on this