Network

A <network> has no flow and no centre: it places the nodes so the distance between every pair on the page is as close as it can get to the number of edges between them. Drawn as a <graph> this would grow a hierarchy out of whichever service happened to be written first.

Diagrams 320 × 450 <connect><cylinder><network><rect><style>

Result

Source examples/network.svgn

<diagram padding="26" background="#ffffff" theme="light">
  <!-- A <network> has no flow and no centre: it places the nodes so the distance
       between every pair on the page is as close as it can get to the number of
       edges between them. Drawn as a <graph> this would grow a hierarchy out of
       whichever service happened to be written first. -->
  <style>
    .svc  { fill: #eef4ff; stroke: #93b4e8; }
    .edge { fill: #fdf2f8; stroke: #e9a8c9; }
    .wire { stroke: #64748b; stroke-width: 1.4; }
  </style>

  <network gap="38">
    <rect id="gateway" class="edge">gateway</rect>
    <rect id="auth"    class="svc">auth</rect>
    <rect id="orders"  class="svc">orders</rect>
    <rect id="billing" class="svc">billing</rect>
    <rect id="search"  class="svc">search</rect>
    <rect id="catalog" class="svc">catalog</rect>
    <cylinder id="store" class="edge">store</cylinder>
  </network>

  <connect from="gateway" to="auth"    arrow="none" class="wire"/>
  <connect from="gateway" to="orders"  arrow="none" class="wire"/>
  <connect from="gateway" to="search"  arrow="none" class="wire"/>
  <connect from="orders"  to="auth"    arrow="none" class="wire"/>
  <connect from="orders"  to="billing" arrow="none" class="wire"/>
  <connect from="orders"  to="catalog" arrow="none" class="wire"/>
  <connect from="search"  to="catalog" arrow="none" class="wire"/>
  <connect from="billing" to="store"   arrow="none" class="wire"/>
  <connect from="catalog" to="store"   arrow="none" class="wire"/>
</diagram>

Open the SVG →