← All examples

Linkedlist

a list node: a two-cell box [ data | next ], with both cells exposed

Diagrams 528 × 112 <cell><circle><connect><define><rect><row><style>

Result

Source examples/linkedlist.svgn

<diagram padding="34" theme="light">
  <style>
    .val { fill: #eff6ff; }
    .ptr { fill: #f8fafc; }
    .nil { fill: #f1f5f9; stroke: #94a3b8; }
  </style>

  <!-- a list node: a two-cell box [ data | next ], with both cells exposed -->
  <define name="cell">
    <row gap="0" align="center">
      <rect id="data" class="val" label="${val}" width="48" height="44"/>
      <rect id="next" class="ptr"                width="30" height="44"/>
    </row>
  </define>

  <row gap="64" align="center">
    <cell id="n1" val="3"/>
    <cell id="n2" val="7"/>
    <cell id="n3" val="9"/>
    <circle id="nil" class="nil" label="∅" width="34" height="34"/>
  </row>

  <!-- each node's `next` cell points at the following node -->
  <connect from="n1.next" to="n2"/>
  <connect from="n2.next" to="n3"/>
  <connect from="n3.next" to="nil"/>
</diagram>

Open the SVG →