Top
Best
New

Posted by jpwalsh234 4 hours ago

Show HN: Reladraw – A diagram language where you decide where to place things(github.com)
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.

106 points | 29 comments
threecheese 17 minutes ago|
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.

recroad 56 minutes ago||
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

jpwalsh234 47 minutes ago|
Genuine bug! Good find. I'll look into a fix.
HeavyStorm 56 minutes ago||
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.

jpwalsh234 46 minutes ago|
Yea, it's hard to beat absolute positioning if you want something ultra-custom, but I'm hoping for most flowcharts, mind maps, etc. the relative positioning is enough to get what you want without fiddling too much!
zikohh 45 minutes ago||
https://d2lang.com/ works well?
Footprint0521 41 minutes ago|
That’s what I have been using, but from glancing through this repository, it looks like the win here is that you can define where you want things and yet still have diagram as code
jpwalsh234 37 minutes ago||
Yep, exactly! D2 is in the same family as Mermaid, i.e., automatic layout, with some escape hatches like grid placement or absolute positioning. Reladraw sits in a gap between automatic layout and absolute positioning.
aktenlage 1 hour ago||
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.
jpwalsh234 1 hour ago|
Thanks very much! Yea, with .dot, the layout engine decides where things go. So, the agent doesn't know what the result looks like, leading to render, look, fiddle loops. And, depending on how much you care about layout, .dot might not give you enough knobs to turn to make it look like what you want.

The idea with Reladraw is that a human or agent could just state "I want this node to the right of this other one", rather than have a layout engine decide. Hopefully less fiddling for agents!

kinduff 1 hour ago||
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
jpwalsh234 1 hour ago|
Thanks! Mermaid is so cool, but I wanted this relative placement, too. I've played with having Claude make me infographics in HTML and also using SVG. They can be surprisingly decent, until you want something complicated, then it gets messy! I figure, let the agents just say what they want, and let the tool (Reladraw) worry about the arithmetic. No use having an agent burning tokens to recompute coordinates with dubious results! >.<'
v9v 2 hours ago||
Great! Reminds me of Pikchr a bit https://pikchr.org/home/doc/trunk/homepage.md
jpwalsh234 2 hours ago|
[dead]
patriciobcs 2 hours ago||
I was looking for something like this. I wish it had different themes, the will prob be the best improvement.
jpwalsh234 1 hour ago|
Great idea! So, right now it defaults to this sorta "dark" theme, and the only option you'd have is to change the diagram background color or define styles. I'll make defining some preset themes a priority!
jpwalsh234 31 minutes ago||
Just pushed an update to add a basket of themes, including light and dark themes.
ciefa 58 minutes ago||
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.

jpwalsh234 55 minutes ago|
Glad to hear it! I'm a big fan of diagrams for understanding, mapping out architecture, etc!
tetris11 2 hours ago|
I like it. I have too many issues with Mermaid
jpwalsh234 2 hours ago|
Thanks! I really like Mermaid, but if the diagram gets too complicated, it draws it how it wants and I end up reaching for Draw.io, which is also awesome, but can take a lot of time.
More comments...