It's funny, you articulated it very similar to how I feel! Seems like we need ways to maintain mental models at a high enough level of abstraction when working with agents.

There's a skill in the repo that you can install using `npx skills` to get started with. I'm sure the integration of Reladraw with agents can be made way better, though. It's just a bit... basic/rudimentary right now!

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!

Agreed. Next diagram I make I’m taking a photo of a whiteboard and letting AI figure out relative positioning

Thanks :) It is fun to play with!

Bug is fixed in the playground. Thanks again for catching it!

It gave me some ideas to make routing better, too. For example, maybe you don't want the edge to curve above, but rather below. Or, in more complex examples, maybe you want the edge to curve above one thing and to the right of another.

(will update npm shortly too)

Genuine bug! Good find. I'll look into a fix.

Super interesting. So, you'd have something like "use architecture.dsl" (to "load" the C4 model definitions), and then begin to specify layout?

Great idea! Yep, the layout instructions are translated into absolute positions. The one gap right now is just that the CLI doesn't give you a way to say "just calculate the positions, stop there, and give me JSON". The logic basically exists to do that, with a minor tweak to the CLI to allow that.

I'll add that to my Reladraw todo list!

I suspect the subject line to this "Where you decide where to place things" is a step away from D2; I find that fussy in D2!

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

That's cool! I'm curious to see how it goes if you try making some super complex :)

Definitely! Capability vs convenience is tough! Hope you find it useful.

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!

Thanks! The big difference is that Pikchr uses "turtle" graphics (where a cursor walks along and draws shapes). Reladraw lets you state relationships and relative positions.

So, if you have a container with children, or multiple nodes off to the right of another, with links between them, adding or resizing one adjusts the rest, without re-specifying positions the way turtle graphics would require.

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! >.<'

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!

Glad to hear it! I'm a big fan of diagrams for understanding, mapping out architecture, etc!

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.

That's a very thought-provoking question. Adding placement constraints on top of an automatic layout engine sounds like a challenging problem. You'd have the engine deciding where to place things, but you'd also be nudging things or constraining things.

This might not be what you have in mind, but Graphviz has a `rank` which can be used as a coarse way to influence the shape of the diagram. (I'm assuming you had something more sophisticated in mind though)

Probably easier would be if the relative drawing were its own distinct Mermaid diagram type, but then it would be largely a new language anyway.

Reladraw has no runtime dependencies and Typescript is only needed to build it. If you mean Node, though, that's fair!

tikz looks super powerful. Reladraw is opting for a narrower job - making diagrams with boxes, groups, arrows, where you can say relative positions and let Reladraw save you extra work.

Glad to hear it :) If you find that you want Reladraw to do something that it can't, let me know! I keep uncovering features by looking at actual Draw.io diagrams I've made and seeing if Reladraw can do it.

Appreciate the comment and questions!

Does the resolver do any routing? It doesn't auto-route around obstacles. But, if nodes A, B, and C all have edges going to the left side of D, they share that side and space themselves apart so they don't cross. If the side is too short, they'll bow out to make space for each other, so you don't have to manually fiddle. You can also give routing instructions like "these edges pass between these two nodes on their way to D".

Conflicting statements? Statements that can all hold will all apply. Right of one node and below another is okay. Or, "right of A and B and C" will clear whichever sticks out furthest. If they all can't hold, you'll get an error naming the clashing statements (e.g., something both left and right of A). Nothing silently wins.