Stack

Shapes carry meaning here without a word: a cylinder is a datastore, a parallelogram is I/O, a diamond is a decision. <cylinder> (aliases <database>, <db>) is the one built-in shape a polygon cannot express - it draws as two paths, the silhouette and the front of its lid, which is what makes it read as a solid rather than a rounded box. A stadium needs no shape of its own: SVG clamps rx to half the height, so <rect rx="99"> already is one - see "Request" below.

Layout 957 × 234 <connect><cylinder><db><diamond><graph><io><rect>

Result

Source examples/stack.svgn

<diagram padding="26">
  <!-- Shapes carry meaning here without a word: a cylinder is a datastore, a
       parallelogram is I/O, a diamond is a decision. <cylinder> (aliases
       <database>, <db>) is the one built-in shape a polygon cannot express -
       it draws as two paths, the silhouette and the front of its lid, which is
       what makes it read as a solid rather than a rounded box.

       A stadium needs no shape of its own: SVG clamps rx to half the height,
       so <rect rx="99"> already is one - see "Request" below. -->
  <graph direction="lr" gap="30" row-gap="62">
    <rect     id="in"    label="Request" rx="99"/>
    <rect     id="api"   label="API"/>
    <diamond  id="cache" label="Cached?"/>
    <cylinder id="redis" label="Redis"/>
    <db       id="pg"    label="Postgres"/>
    <io       id="log"   label="Audit log"/>
    <rect     id="out"   label="Response" rx="99"/>
  </graph>

  <connect from="in"    to="api"/>
  <connect from="api"   to="cache"/>
  <connect from="cache" to="redis" label="yes"/>
  <connect from="cache" to="pg"    label="no"/>
  <connect from="pg"    to="log"   head="open" dash="4 3"/>
  <connect from="redis" to="out"/>
  <connect from="log"   to="out"/>
</diagram>

Open the SVG →