Understanding DAG Basics and the Dagre Layout Algorithm with Perfect-Process

Directed acyclic graphs (DAGs) are defined as directed graphs without cycles; basic elements include vertices and edges, with concepts such as out‑degree and in‑degree.

Two common graph representations are adjacency matrices, which use an n×n matrix to indicate edge existence, and adjacency lists, which store for each vertex a list of its neighboring vertices; the latter is preferred for sparse graphs.

The Dagre algorithm provides a packaged solution for DAG layout, introducing concepts like rank direction (rankDir), rank, and level, and imposing layout constraints such as preventing edges within the same rank and minimizing edge crossings.

Its computation proceeds in four steps: removing cycles, assigning nodes to ranks, ordering nodes within each rank, and finally calculating coordinates for drawing. Cycle removal uses DFS and greedy edge reversal; node ranking can use longest‑path, tight‑tree, or network‑simplex methods.

Perfect‑Process is a front‑end library that implements these ideas, consisting of a Layout object for coordinate calculation, a Process component for rendering, and a State system for interaction. Layout receives source data, builds an adjacency list, creates a Dagre layout, and derives node and edge positions.

The view layer renders nodes and edges using divs for nodes and SVG for edges, supporting features such as configuration, editing, and state‑driven interactions. Editing actions modify the adjacency list, triggering re‑computation of the layout.

Configuration can be global or local, with local settings overriding globals. The library also includes a TODO roadmap for scaling, drag‑and‑drop editing, and additional diagram types.

Example usage demonstrates defining nodeList and edgeList in JavaScript and rendering the Process component with custom styles and configuration.

const demoData = { 
  nodeList: [
    { id: 'a', title: 'A' },
    { id: 'b', title: 'B' },
    { id: 'c', title: 'C' },
    { id: 'd', title: 'D' },
  ],
  edgeList: [
    { from: 'a', to: 'b' },
    { from: 'a', to: 'c' },
    { from: 'a', to: 'd' },
  ],
};

<Process
  style={{ boxShadow: '0 0 8px 0 #ddd', marginTop: 24 }}
  source={demoData}
  config={{
    node: {
      deltaX: 50,
      deltaY: 50,
    },
  }}
/>