jpwalsh234

Thanks for making that! Just a heads up, reladraw is changing super fast - I think the rendering/highlighting will work smoothly with syntax changes, the more annoying thing would be any JS API breaking changes.

Themes in the playground examples are fixed!

Yep, thanks for noticing. Definitely a bug with the themes. Now fixed. And, Vesper theme added in version 0.9.0 in npm and also in the playground :)

That's something I'm trying to keep in mind for sure. If someone said something that couldn't be rendered, instead of surprising you with the tool deciding for you, that might be where the error comes in rather than a warning. The trivial example would be you said B is both "left of A" and "right of A".

But, I could see the other extreme where if you said "I want an edge going from the left side of A to the right side of B", you wouldn't want the tool to say "well, you didn't specify if I should go above A or below A, so I refuse to do anything". That could be super annoying. A sensible default that you can override would probably be more ergonomic there.

Is that sorta the way you'd think about it too? Or would you be more in favor of greater permissiveness, where the tool prefers warning even in contradictory scenarios?

Oh interesting! I plan to add custom attributes, functions, variables. I was also thinking about macros and will add your parameters for object labels in as another idea. Thanks :)

Great question, I had to noodle that one over a bit, but I think it helped me clarify that difference between pikchr and reladraw. My container example was a poor one, and you are right that pikchr can handle adding elements to a container without fiddling.

My main objection to pikchr is that it is turtle graphics plus coordinate offsets, which to me feels like the wrong tool when I want to say "I have A to the left, and B, C, and D all right of A". I don't want to have to translate that to turtle graphic movements like saying "there's a group, draw B, move down some amount, place C, move down again, place D".

Similarly, if I'm thinking at the level of abstraction of nodes and edges and relative positions, it feels awkward to say something like this in pikchr (where the 0.2 is a guess to fiddle with):

  arrow from Web.s down 0.2 then right until even with DB.s then to DB.s

Rather than saying in reladraw:

  edge web -> db   from: bottom  to: bottom

I think it's less a matter of "reladraw can do it, but pikchr cannot". It's more like, "both can get to the same destination, but how you get there is a matter of taste and how you express your intent".

For example in pikchr:

  A: box "A" fit
  G: [
    down
    B: box "B" fit
    move 0.1
    C: box "C" fit
    move 0.1
    D: box "D" fit
    move 0.1
    E: box "E" fit
  ] with .w at A.e+(0.5,0)
  arrow from A to G.B chop
  arrow from A to G.C chop
  arrow from A to G.D chop
  arrow from A to G.E chop

To me, it's not as clear that your intent is that you want several nodes right of A. However, in reladraw, it's clearer to me that the intent is "these things are right of A":

  node a "A"
  node b "B"  right of a
  node c "C"  right of a
  node d "D"  right of a
  node e "E"  right of a
  edge a -> b
  edge a -> c
  edge a -> d
  edge a -> e

However, that's a subjective taste thing and I could see some people liking the pikchr approach.

There's a similarity, but they differ in how you say what you want. pic is turtle graphics with explicit placement with coords and offsets as needed. reladraw is all about relationships (and not having to specify coordinates/offsets/distances).

That's an interesting idea. I already have planned for some programmer-like features (functions, custom attributes, variables). However, what you're talking about seems like maybe it would want to take in an outside file (e.g., CSV, JSON) and say "loop over every entity in add as a child in this container", that sort of thing?

Am I getting that right? Super curious, because that sounds cool.

Thanks, I think I see what the issue is!

Thanks for mentioning TALA. I feel like TALA does add more control than Mermaid, but in spirit sits closer to Mermaid than Reladraw. It keeps the auto layout, but with extra ways to coax the diagram into a different shape, by saying things like "keep this node pinned over here" or "keep these nodes close to one another".

For the diagrams I usually want to create, that's still not enough control to create what I envision.

Thanks! Some serious food for thought. Next up, I'm planning on custom attributes, functions, etc. that a user doesn't have to use, but a more programmer-oriented user would probably enjoy having access to. But, I think I see what you're saying about a sequence diagram and that would only be a partial answer. I'll have to give that more thought!

And, I'm not wedded to the "no multi-line statements". That's more a philosophy of the super early versions of keeping it simple. I noticed some of the playground examples could already benefit from even simple line continuation. The philosophy there would be, if people don't like line continuation, they don't have to use it, but for those who want it, give them a convenient way to do it. Good point about the forward slash char... so much food for thought. Really appreciate the thoughtful comment.

Thanks :) A great question. So, I believe Github simply built in support for Mermaid as just something they natively support. That means getting reladraw to "just work" in Github markdown files is sorta not possible. The workaround is rendering to SVG and linking to the SVG (obviously not nearly as convenient).

For tools like IntelliJ, VSCode, Obsidian, they would be easier to get working I think, as they all support plugins/extensions. That way, they'd know what to do when they encounter a fenced-in area starting with ```reladraw.

Thanks very much. And, I totally agree. The workflow at present without these quality of life features is a bit rough around the edges :)

Appreciate the feedback. I gave the README a rewrite.

That's a cool idea. I'll add it to my todo list. Going from reladraw -> drawio is probably the easier direction. drawio -> reladraw is probably the more challenging piece, because it would have to convert absolute positions into the relative positions it thinks you intended. It could just make a best effort along with some simplifying assumptions.

Not by itself, but an agent using Reladraw could. The real smarts would be the agent, and Reladraw just gives it a language and tool to express itself clearly and efficiently.

You could take someone's explanation of their architecture, give it to an agent, and ask it to render it as a diagram using Graphviz, Mermaid, Draw.io, etc. The problem is that some of those don't give the agent control over what the diagram looks like (Graphviz, Mermaid) and others are inefficient and fiddly for an agent to manipulate (Draw.io). Reladraw aims to be easy for an agent (or human) to edit (like Mermaid) but have the expressiveness and positioning like you'd be able to achieve with a carefully crafted Draw.io diagram.

Yea, I felt the same. I started with Graphviz (dot language) and had fun playing with it, but ended up always back to something like Draw.io, because I couldn't get things positioned how I wanted.

Thanks very much! If you have ideas or feature requests, let me know!

I tried scriptc. Unfortunately, it doesn't work with this code at present (e.g., maps keyed by object and a number of various things). However, thanks for suggesting it. I have a note to revisit at some point.

Another option that appears to work well is to use Deno. I tried on my machine and it worked great. Only downside is the executable size is beefy. Could be about 70-105MB, or roughly 30MB compressed.

I don't know if that still sounds attractive? A 30MB download from Github, and then uncompressed to 100MB, and no other dependencies? (Most of it would be the Deno runtime, with only about 300KB being Reladraw)

Updated! Edges can now have right angles (sharp or rounded). And, I added in more edge customization, like solid/dashed/dotted and thickness.

Thanks :) It is fun to play with!

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

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

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)

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!

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

Oh wow. Let me give that a try. I was going to try bun or Deno, but your suggestion might result in much smaller binaries.

That sounds very cool :)

Thanks!

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.