Detour
Obstacle avoidance. A connector used to plough straight through whatever happened to sit between its two ends. Now the engine grows every other shape by a clearance margin, builds a visibility graph over the corners, and takes the shortest path across it, so a route turns only where it must. client to store has the cache in the way and goes around it; log to sink has clear air and stays perfectly straight. Pinning from-anchor or to-anchor opts out, for the cases where a line is meant to pass through what it crosses. The log pair also shows nudging: two connectors between the same two shapes would land on exactly the same line, so only the top one would be visible and the labels would stack. Routes that run along each other are fanned apart, and their ends put back on the shapes.
Result
Source examples/detour.svgn
<diagram padding="20" theme="light">
<!-- Obstacle avoidance. A connector used to plough straight through whatever
happened to sit between its two ends. Now the engine grows every other
shape by a clearance margin, builds a visibility graph over the corners,
and takes the shortest path across it, so a route turns only where it
must. `client` to `store` has the cache in the way and goes around it;
`log` to `sink` has clear air and stays perfectly straight. Pinning
`from-anchor` or `to-anchor` opts out, for the cases where a line is
meant to pass through what it crosses.
The `log` pair also shows nudging: two connectors between the same two
shapes would land on exactly the same line, so only the top one would be
visible and the labels would stack. Routes that run along each other are
fanned apart, and their ends put back on the shapes. -->
<column gap="36" align="center">
<row gap="44" align="center">
<rect id="client">Client</rect>
<rect id="cache" width="140" height="92" fill="#eef2f7" stroke="#b8c4d4">Cache</rect>
<rect id="store">Store</rect>
</row>
<row gap="110">
<rect id="log">Log</rect>
<rect id="sink">Sink</rect>
</row>
</column>
<connect from="client" to="store" label="read"/>
<connect from="log" to="sink" label="append"/>
<connect from="sink" to="log" label="ack"/>
</diagram>