explaingit

dagrejs/dagre

★ 5,641TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

A JavaScript library that automatically calculates where to place nodes and how to route arrows in directed graphs, flowcharts, dependency trees, pipelines, entirely in the browser with no server needed.

Mindmap

mindmap
  root((repo))
    What it does
      Node placement
      Arrow routing
      Directed graph layout
    Use cases
      Flowcharts
      Dependency trees
      Pipelines
    Integration
      npm package
      Client-side only
      No server needed
    License
      MIT open source
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Render a software dependency tree as an auto-arranged visual diagram in a web app without manually placing nodes.

USE CASE 2

Build a flowchart editor where users define connections and dagre automatically positions nodes in a readable layout.

USE CASE 3

Visualize CI/CD pipeline steps as a directed graph in a browser-based dashboard.

USE CASE 4

Add automatic graph layout to a React or Vue app using the @dagrejs/dagre npm package.

Tech stack

TypeScriptJavaScriptnpm

Getting it running

Difficulty · easy Time to first run · 30min
Use freely for any purpose, including commercial, with no restrictions beyond keeping the copyright notice.

In plain English

Dagre is a JavaScript library for arranging directed graphs visually in a browser. A directed graph is a diagram where items (nodes) are connected by arrows pointing in a specific direction, like a flowchart or a dependency tree. The library handles the math of figuring out where to place each node and how to route the connecting lines so the result looks organized and readable. You describe what connects to what, and dagre figures out the layout. It runs entirely on the client side, meaning the layout calculation happens in the user's browser without needing a server. It is available as a package on npm under the @dagrejs/dagre name, and that is the version currently receiving active updates. The project is MIT-licensed and open source.

Copy-paste prompts

Prompt 1
Show me how to install @dagrejs/dagre and render a simple directed graph with 5 nodes and edges in a browser using plain JavaScript.
Prompt 2
I'm building a dependency tree visualizer with dagre. How do I define nodes and edges, run the layout, and extract the calculated x and y positions to draw them on a canvas?
Prompt 3
How do I integrate dagre with React Flow or Cytoscape.js to get automatic layout for a flowchart editor?
Prompt 4
Can dagre handle very large graphs with hundreds of nodes? What are the performance trade-offs and how do I configure edge routing for large layouts?
Prompt 5
How do I set the direction of the dagre layout to left-to-right instead of top-to-bottom, and how do I control the spacing between nodes?
Open on GitHub → Explain another repo

← dagrejs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.