100 pointsby jpwalsh2345 hours ago13 comments
  • threecheese8 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.

  • recroadan hour 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

    • jpwalsh23439 minutes ago
      Genuine bug! Good find. I'll look into a fix.
  • HeavyStorman hour 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.

    • jpwalsh23437 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!
  • zikohh37 minutes ago
    • Footprint052133 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
      • jpwalsh23429 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.
  • aktenlage2 hours 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.
    • jpwalsh234an 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!

  • kinduffan 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
    • jpwalsh234an 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! >.<'
  • v9v3 hours ago
    Great! Reminds me of Pikchr a bit https://pikchr.org/home/doc/trunk/homepage.md
  • ciefaan hour 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.

    • jpwalsh234an hour ago
      Glad to hear it! I'm a big fan of diagrams for understanding, mapping out architecture, etc!
  • patriciobcs2 hours ago
    I was looking for something like this. I wish it had different themes, the will prob be the best improvement.
    • jpwalsh2342 hours 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!
      • jpwalsh23422 minutes ago
        Just pushed an update to add a basket of themes, including light and dark themes.
  • tetris112 hours ago
    I like it. I have too many issues with Mermaid
    • jpwalsh2342 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.
  • light_hue_1an hour ago
    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.
  • monster_truck2 hours ago
    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

    • jpwalsh2342 hours ago
      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.
  • lastscattering2 hours ago
    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?
    • jpwalsh2342 hours ago
      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.

      • drfloyd512 hours ago
        >nothing silently wins.

        Fantastic! Never change this.

        People will complain. These people also prefer type unsafe languages. Hold fast.

        • jpwalsh2342 hours ago
          Thanks! My concern was that a resolver making decisions "to be helpful" could become surprising or frustrating.

          For example, if you ask for edges to pass "between C and D", but those two nodes sit diagonally, the gap you are asking for might be the vertical channel or horizontal channel between them. So instead of guessing for you, it will tell you of the ambiguity and let you spell out what you want.