Components

A reusable component: a titled box with an "in" and "out" port. Parameterized by ${name} and ${accent} (accent has a default).

Diagrams 614 × 149 <connect><contains><define><rect><row><service>

Result

Source examples/components.svgn

<diagram padding="28" background="#ffffff">
  <!-- A reusable component: a titled box with an "in" and "out" port.
       Parameterized by ${name} and ${accent} (accent has a default). -->
  <define name="service" accent="#1d4ed8">
    <contains label="${name}" layout="row" gap="12">
      <rect id="in"  label="in"/>
      <rect id="out" label="out" fill="${accent}" stroke="${accent}" color="#ffffff"/>
    </contains>
  </define>

  <!-- Instantiate it three times, each a different colour... -->
  <row gap="80" align="center">
    <service id="api"    name="API"    accent="#1d4ed8"/>
    <service id="worker" name="Worker" accent="#6d28d9"/>
    <service id="store"  name="Store"  accent="#047857"/>
  </row>

  <!-- ...and wire them by their exposed ports (id scoping makes this safe). -->
  <connect from="api.out"    to="worker.in"/>
  <connect from="worker.out" to="store.in"/>
</diagram>

Open the SVG →