Relations

Two independently-stacked columns, joined by a relation the layout tree cannot express: <align> centres the side column's first node on "validate", and a connector wires them together. Neither column knows about the other; the cross-cutting constraint does.

Diagrams 394 × 218 <align><column><connect><hexagon><rect><row>

Result

Source examples/relations.svgn

<diagram padding="30" background="#ffffff">
  <!-- Two independently-stacked columns, joined by a relation the layout tree
       cannot express: <align> centres the side column's first node on "validate",
       and a connector wires them together. Neither column knows about the other;
       the cross-cutting constraint does. -->
  <row gap="150" align="top">
    <column id="pipeline" gap="22">
      <rect id="load"     label="Load"/>
      <rect id="validate" label="Validate"/>
      <rect id="store"    label="Store"/>
    </column>
    <column id="side" gap="22">
      <hexagon id="audit"  label="Audit"/>
      <hexagon id="notify" label="Notify"/>
    </column>
  </row>

  <!-- A cross-cutting relation the layout tree cannot express: center the
       side column's first node on "validate". The side column moves as a unit,
       overriding the row's default top-alignment for it. Then wire it in. -->
  <align of="validate audit" edge="center-y"/>
  <connect from="validate" to="audit"/>
  <connect from="audit"    to="notify"/>
</diagram>

Open the SVG →