Architecture

contains is a relation: a boundary that groups children and is itself connectable. Note the arrow from input targets the whole api group, while handler -> db crosses the boundary from a node inside it.

Diagrams 509 × 282 <circle><connect><contains><hexagon><parallelogram><rect><row>

Result

Source examples/architecture.svgn

<diagram padding="28" background="#ffffff">
  <!-- `contains` is a *relation*: a boundary that groups children and is itself
       connectable. Note the arrow from `input` targets the whole `api` group,
       while `handler -> db` crosses the boundary from a node inside it. -->
  <row gap="72" align="center">
    <parallelogram id="input" label="Requests"/>

    <contains id="api" label="API service" gap="20">
      <rect    id="router"  label="Router"/>
      <rect    id="handler" label="Handler"/>
      <hexagon id="cache"   label="Cache"/>
    </contains>

    <circle id="db" label="DB"/>
  </row>

  <connect from="input"   to="api"/>
  <connect from="router"  to="handler"/>
  <connect from="handler" to="cache"/>
  <connect from="handler" to="db"/>
</diagram>

Open the SVG →