OuestWare's Graphology Experiments - Layout Graphviz

A graphology connector to the Graphviz layout engine, running the @hpcc-js/wasm-graphviz WebAssembly build.

It serializes a graphology graph to the DOT language, runs a Graphviz engine (dot by default), and returns a LayoutMapping of each node to its position and box size.

Usage

import Graph from "graphology";

import { graphvizLayout } from "@ouestware/graphology-layout-graphviz";
import { applyLayout } from "@ouestware/graphology-layout-utils";

const graph = new Graph();
// ...populate the graph...

const layout = await graphvizLayout(graph, {
  // The layout engine to run:
  engine: "dot",
  // Graph-level DOT attributes, forwarded as-is:
  graphAttributes: { rankdir: "LR" },
  // How to read each node's box size (in points) from the graph:
  attributes: {
    width: "width", // read from the "width" node attribute
    height: (node, attributes) => attributes.size * 2, // or extract it
  },
});

// Write x / y back as node attributes, and the box size as "w" / "h":
applyLayout(graph, layout, { width: "w", height: "h" });

Engines

engine accepts any of Graphviz's placement engines: dot (hierarchical), neato / fdp / sfdp (force-directed), twopi (radial), circo (circular), osage and patchwork (clustered). See the Graphviz layouts reference.

Notes

• graphvizLayout is asynchronous (it returns a Promise); the WASM module is loaded on first call and cached.
• Positions are node centers, in points, with y growing upward (the graphology convention) — so, unlike the ELK connector, no coordinate flip is applied.
• Node sizes are read and returned in points (Graphviz works in inches internally; the conversion is handled for you). Setting a size pins the box (fixedsize), so Graphviz honors it exactly.
• Per-node DOT attributes can be set via nodeAttributes.
• rank constraints can be set via rankGroups.
• A mixed graph is laid out as a digraph, and a purely undirected graph as a graph.