A curated drawer of DAG/graph algorithm libraries and the flow/diagram UI components I reach for when building node-graph editors and dependency visualizations.
Building, sequencing, and analyzing directed acyclic graphs.
| Resource | Why it is useful |
|---|---|
| task-graph-runner | Run async tasks ordered by a dependency graph. |
| graph-sequencer | Topologically sequence graph items into parallel-safe groups. |
| toposort | Minimal topological sort of a directed graph. |
| madge | Generate dependency graphs and find circular deps in JS/TS. |
| jsona-openapi-deref deref logic | Reference impl for detecting circular references during deref. |
| dag-map | Map-like structure that maintains DAG ordering. |
| graphology | Robust graph data structure + algorithm ecosystem. |
| serverless/compose ComponentsService | Real-world DAG used to order serverless component deploys. |
Tools that derive a graph from existing source code.
| Resource | Why it is useful |
|---|---|
| express-router-dependency-graph | Build a graph of Express routes from source. |
| workspace-dependency-graph | Graph dependencies across a monorepo workspace. |
Interactive node-graph editors for building diagrams in the browser.
| Resource | Why it is useful |
|---|---|
| react-diagrams | Flexible diagramming engine; see drag-and-drop demo. |
| React Flow edge examples | Edge styling/behavior examples for the React Flow library. |
| rete | Visual programming / node-editor framework; see basic example. |
| butterfly | Alibaba node-graph diagramming library. |
| react-visual-modeling | React visual modeling components built on butterfly. |
| react-monitor-dag canvas | DAG monitor canvas reference implementation. |
| flowy | Lightweight library for building flowchart UIs. |
| pipeline-editor-s5 | Pipeline/flow editor component. |
Rendering graphs, trees, and infra diagrams.
| Resource | Why it is useful |
|---|---|
| rediagram | Compose infrastructure diagrams with React. |
| react-topology | Topology/graph viz for React; see demo. |
| vis-tree demo | Tree visualization demo. |
| react-d3-bubblechart | D3 bubble chart in React. |
| Resource | Why it is useful |
|---|---|
| text-to-diagram | Survey/comparison of many text-to-diagram tools. |