Paths and colors

Sigma v4 gives you full control over edge appearance through the primitives and styles system. You can combine different path geometries and fill layers.

import Graph from "graphology";
import Sigma from "sigma";
import {
  extremityArrow,
  layerDashed,
  layerFill,
  layerPlain,
  pathCurved,
  pathCurvedS,
  pathLine,
  pathStepCurved,
  sdfDiamond,
  sdfTriangle,
} from "sigma/rendering";
import { DEFAULT_STYLES } from "sigma/types";

const container = document.getElementById("sigma-container") as HTMLElement;

const graph = new Graph();

const COL_SPACING = 120;
const ROW_SPACING = 80;
const NODE_SPACING = 60;
const EDGE_SIZE = 6;

const ROW_COLORS = ["#5B8FF9", "#61DDAA", "#F6903D", "#E8684A"];

const PATH_NAMES = ["straight", "curved", "stepCurved", "curvedS"] as const;

const COLUMN_CONFIGS = [
  {},
  { head: "arrow" },
  { head: "arrow", tail: "arrow" },
  { dashSize: 5, backgroundColor: "white" },
  { head: "arrow", dashSize: 10, dashColor: "blue" },
];

for (let rowIdx = 0; rowIdx < PATH_NAMES.length; rowIdx++) {
  const pathName = PATH_NAMES[rowIdx];
  const rowColor = ROW_COLORS[rowIdx];

  for (let colIdx = 0; colIdx < COLUMN_CONFIGS.length; colIdx++) {
    const colConfig = COLUMN_CONFIGS[colIdx];
    const cellX = colIdx * COL_SPACING;
    const cellY = -rowIdx * ROW_SPACING;

    const sourceId = `${pathName}-${colIdx}-source`;
    graph.addNode(sourceId, {
      x: cellX - NODE_SPACING / 2,
      y: cellY,
    });

    const targetId = `${pathName}-${colIdx}-target`;
    graph.addNode(targetId, {
      x: cellX + NODE_SPACING / 2,
      y: cellY + NODE_SPACING / 2,
    });

    graph.addEdge(sourceId, targetId, {
      size: EDGE_SIZE,
      color: colConfig.backgroundColor || rowColor,
      dashColor: colConfig.dashColor || rowColor,
      dashSize: colConfig.dashSize || 0,
      curvature: pathName === "curved" ? 0.3 : 0,
      path: pathName,
      head: colConfig.head,
      tail: colConfig.tail,
    });
  }
}

new Sigma(graph, container, {
  primitives: {
    edges: {
      variables: {
        dashColor: { type: "color", default: "#000" },
        dashSize: { type: "number", default: 0 },
      },
      paths: [pathLine(), pathCurved(), pathStepCurved(), pathCurvedS()],
      extremities: [extremityArrow()],
      layers: [
        layerPlain(),
        layerDashed({
          dashColor: { attribute: "dashColor" },
          dashSize: { attribute: "dashSize", default: 0, mode: "pixels" },
          gapColor: 0,
          gapSize: { value: 10, mode: "pixels" },
        }),
      ],
    },
  },
  styles: {
    nodes: [DEFAULT_STYLES.nodes, { size: 12, color: "darkgrey" }],
    edges: [
      DEFAULT_STYLES.edges,
      { path: { attribute: "path" }, head: { attribute: "head" }, tail: { attribute: "tail" } },
    ],
  },
  settings: {
    renderEdgeLabels: true,
    itemSizesReference: "positions",
    autoRescale: true,
  },
});

Edge paths

Sigma ships with five built-in path types:

Path	Description
`pathLine()`	Direct line between source and target
`pathCurved()`	Quadratic Bezier curve (configurable curvature)
`pathStep()`	Right-angle step (horizontal then vertical)
`pathStepCurved()`	Step with rounded corners
`pathCurvedS()`	S-shaped cubic curve

Declare which paths your graph uses in primitives.edges.paths, then assign them per-edge via styles.

For arrowheads and other endpoint shapes, see the Extremities documentation.

Edge colors

Edge colors work like node colors. Set them in the graph data and read them via styles:

graph.addEdge("a", "b", { color: "#e63946" });

new Sigma(graph, container, {
  styles: {
    edges: [{ color: { attribute: "color" } }],
  },
});

Dashed edges

The layerDashed() function from sigma/rendering adds a dashed overlay on top of the plain edge body. The dashSize and gapSize options accept either a fixed { value, mode } object or an { attribute } reference to read per-edge values from graph data. Set mode: "pixels" for screen-space sizing.

For more on the styles and primitives system, see Styles and primitives.