Diagram primitives

These are topo's own SVG primitives, rendered by topo at build time and styled by the diagram layer of ds.css. Anything that outputs the same markup gets the same look, in both themes, including exports.

Kinds

A component's kind is what it is, and it sets the outline. Compute is ink, storage is amber with a lip, control planes are dashed on a sunk fill, workloads are hatched, externals sit on the page colour.

Shapes

Links

Data flows in the accent. Control is dashed and does not move. Fallback and physical links are dotted. Streams are thicker and carry packets.

Zones

Zones are real boundaries: a cluster, a VPC, a tenant. The label sits above the top-left corner, in its own layer so links never cover it.

Details

Markup

<svg class="tp" viewBox="…">
  <g class="l-zones"><g class="zone tint tone-purple"><rect class="zr" …/></g></g>
  <g class="l-edges">
    <g class="edge data" data-from="api" data-to="db">
      <path class="base" marker-end="url(#arr)"/><path class="flow"/>
      <text class="elabel">writes</text>
    </g>
  </g>
  <g class="l-nodes">
    <g class="node store" data-node="db">
      <rect class="body" …/><line class="lip" …/>
      <g class="ico">…</g><text class="nl">PostgreSQL</text><text class="ns">primary</text>
      <circle class="status ok" …/>
    </g>
  </g>
</svg>