← All examples

Tree

The org-chart look comes from pinning the sides: every edge leaves the parent's south and enters a child's north. Left free, an orthogonal edge leaves whichever side faces the child, so the outer two would come out the parent's flanks and into the children's sides. Pinning s→n makes them share one drop from the parent and fan out along a level — the T-junction bus every org chart is drawn with.

Diagrams 423 × 188 <column><connect><rect><row><style>

Result

Source examples/tree.svgn

<diagram padding="30" theme="light">
  <style>
    .root { fill: #f6e7ec; stroke: #7c2c43; }
  </style>

  <column gap="52" align="center">
    <rect id="root" class="root" label="CEO"/>
    <row gap="40">
      <rect id="eng"   label="Engineering"/>
      <rect id="sales" label="Sales"/>
      <rect id="ops"   label="Operations"/>
    </row>
  </column>

  <!-- The org-chart look comes from pinning the sides: every edge leaves the
       parent's south and enters a child's north. Left free, an orthogonal edge
       leaves whichever side faces the child, so the outer two would come out the
       parent's flanks and into the children's sides. Pinning s→n makes them
       share one drop from the parent and fan out along a level — the T-junction
       bus every org chart is drawn with. -->
  <connect from="root" to="eng"   routing="orthogonal" from-anchor="s" to-anchor="n"/>
  <connect from="root" to="sales" routing="orthogonal" from-anchor="s" to-anchor="n"/>
  <connect from="root" to="ops"   routing="orthogonal" from-anchor="s" to-anchor="n"/>
</diagram>

Open the SVG →