Overview

Snake Layout is a special type of graph layout that can more efficiently display long chain structures in a limited space. Note that the graph data must ensure that nodes are linearly arranged from the source node to the sink node, forming a clear path.

Nodes are arranged in an S-shape: the first node is at the start of the first row, subsequent nodes are arranged to the right in the first row until the end. At the end of the row, the next row's nodes are arranged from right to left. This process repeats until all nodes are placed.

Use Cases

Suitable for scenarios that require compact presentation of linear relationships:

• Long process visualization

  Perfect for scenarios with many process steps, such as approval flows, production line procedures, logistics routes, etc.

• Hierarchical structures in limited space

  When the hierarchy is too long but the canvas is limited, rows can be folded to save space. For example, API call dependencies (client → gateway → serviceA → serviceB → database, snake layout compresses 5 layers into 2 rows), or file directory trees (deeply nested folder structures, e.g., src/components/utils/helpers/..., using snake layout to fold subdirectories horizontally).

Online Demo

createGraph(
  {
    autoFit: 'center',
    data: {
      nodes: new Array(16).fill(0).map((_, i) => ({ id: `${i}` })),
      edges: new Array(15).fill(0).map((_, i) => ({ source: `${i}`, target: `${i + 1}` })),
    },
    node: {
      style: {
        labelFill: '#fff',
        labelPlacement: 'center',
        labelText: (d) => d.id,
      },
    },
    behaviors: ['drag-canvas'],
    layout: {
      type: 'snake',
      clockwise: true,
      cols: 4,
      colGap: 30,
      rowGap: 30,
      padding: 15,
      nodeSize: 30,
    },
  },
  { width: 600, height: 400 },
  (gui, graph) => {
    const options = {
      type: 'snake',
      clockwise: true,
      cols: 4,
      colGap: 30,
      rowGap: 30,
      padding: 15,
      nodeSize: 30,
    };

    const optionFolder = gui.addFolder('Grid Layout Options');
    optionFolder.add(options, 'type').disable(true);
    optionFolder.add(options, 'cols', 2, 10, 1);
    optionFolder.add(options, 'colGap', 10, 150, 1);
    optionFolder.add(options, 'rowGap', 10, 150, 1);
    optionFolder.add(options, 'padding', 5, 100, 1);
    optionFolder.add(options, 'nodeSize', 10, 50, 30);
    optionFolder.add(options, 'clockwise');

    optionFolder.onChange(({ property, value }) => {
      graph.setLayout({
        type: 'snake',
        [property]: value,
      });
      graph.layout();
    });
  },
);

Options

If the layout has specific properties, they are listed below. For common layout options, see Base Layout Options

clockwise

• When arranged clockwise, nodes start from the top left, the first row is arranged left to right, the second row right to left, and so on, forming an S-shaped path.
• When arranged counterclockwise, nodes start from the top right, the first row is arranged right to left, the second row left to right, and so on, forming a reversed S-shaped path.

Real Cases

• Snake Layout