Skip to content
ireko

ireko

Mix layout algorithms per group. A small, deterministic layout engine for nested diagrams, with renderers for SVG, Canvas, the DOM and React Flow.
Open the playgroundTake the tour
npm install ireko
app nested {
  web { home cart search }
  api { auth orders }
  data { users events }
}
A nested layout of the example appappwebhomecartsearchapiauthordersdatausersevents
A nested container holds three linked trees.1/6Edit ↗
0overlaps in 20000 random trees
70 to 190×faster than the first version
0runtime dependencies
4renderers from one layout

What it does

Section titled “What it does”

ireko (入れ子) is the Japanese word for a set of boxes that fit inside each other. A diagram is a tree of nodes. Each node selects two things for its children:

  • The strategy: how to arrange the children. The built-in strategies are grid, radial, tree (a tidy tree) and layers (a flowchart), and you can add your own.
  • The mode: where the children go. In the nested mode, the children are inside the box of the node. In the linked mode, they are around it, and edges connect them.

One layout gives plain data: boxes, routed edges and findings. Any renderer can draw it.

Two passes, no overlaps

The engine measures each subtree before it places it. A large subtree gets a large cell.

A strategy for each container

A grid of rings of grids: each container selects its own layout and its own mode.

A small text language

Type a layout, and the playground draws it at once. The builder gives the same data in TypeScript.

React Flow sub-flows

Give layoutFlow your nodes and edges. Groups get a size, and children get positions inside them.

Watch it work

Section titled “Watch it work”
Why two passesThe first version beside ireko, and 2000 random trees laid out in your browser.
The pipeline, step by stepWatch the engine measure from the leaves up, then place from the root down.
Try each strategySliders for each option of each strategy, with the text and the TypeScript code.
The galleryOrg charts, mind maps, architectures, rings of rings and fractals. Each one is live.

Use it in your code

Section titled “Use it in your code”
import { grid, layout, radial } from "ireko";
import { toSVG } from "ireko/svg";


const root = grid.nested("system", radial.nested("web", "home", "cart", "search"), grid("api", "auth", "orders"));


const result = layout({ root });
result.nodes; // { id, x, y, width, height, container, ... } for each box
result.issues; // the findings of the audit: an empty list
document.body.innerHTML = toSVG(result);

The quick start has the steps for React, React Flow and the server.