Make edges between grid cells orthogonal

[meanderix]

grid-rows: 3
grid-columns: 3
grid-gap: 20
1
2
3
4
5
6
7
8
9
1 -> 3 -> 9 -> 7 -> 1
1 -> 9
3 -> 7

Looks like the edges internal to a grid structure do not respect orthogonality rules.

[alixander]

@meanderix can you draw your ideal pathing? I think going around the outside will look weird too. I think internal grid edges is a case where most of the time you want just the straight line. If you have many internal grid edges, it quickly ends up like a maze of overlapping routes otherwise.

[meanderix]

@alixander Here's another example where I want to achieve a specific grid layout (4x2). Here it would have been super useful with orthogonal edges. Perhaps this could be set optionally through a directive?

(The previous example was a bit hypothetical and I understand that there are also use cases for non-orthogonal edges.)

[alixander]

@meanderix Thank you for the example. I suppose grid was cleaner than if you had run this without grid?

Because I feel like the grid is just a suboptimal placement for this use case. This is the best route I can come up with and it doesn't look great.

I suppose you could increase the gap size so that the routes go in between, but there's still no way to avoid overlap.

[meanderix]

@alixander Here's what you get without the grid. The grid layout is so much better for this use case. Also, coming from Mermaid and its flowcharts, I find the grid feature really one of the selling points of D2. Especially when you need to visually express some kind of ordering.

[meanderix]

This is also interesting. If you wrap the upper and lower row in its own box, then you will have mixed results with the edges ...

[alixander]

In this case it wasn't able to find a route for Monitor -> Plan.

You gave my last comment a thumbs up, does that mean the route I proposed is one you'd be satisfied with?

[meanderix]

@alixander Well, I would be happy with orthogonal edges. I guess the optimal path depends. Maybe a "dynamic gap" between rows/columns could also be an option in order to allow a connection in between grid cells. (But I can understand that it adds complexity to the implementation.)

[alixander]

Idk, even if there's gap, it still overlaps weirdly. I feel like the construction just doesn't allow for good pathing. I believe this is a case where user design goes further than any edge routing can compensate for. Like this seems to me like a better way to do this (direction: left on the bottom container)

[meanderix]

@alixander Some architect diagram tools, such as Archimate, will have these nifty bends when two edges are crossing. I don't know if that would be useful also for D2. (I'm just thinking out loud about possible ways to still support orthogonal edges...)

[alixander]

Right, crossing bridges is a feature request: https://github.com/terrastruct/d2/issues/1932