Gallery
Each example shows one idea of ireko. The tests of the library lay out each example and compare it with a golden file, so these pictures are the real output of the engine. Select an example to edit it.
The demo of Jqy
The default demo of Jqy 0.x, the first version of the project. The old engine put 55 overlapping pairs in it. The two-pass engine puts none.
Organization chart
Linked grids make a tree. Each team is as wide as its subtree, so no two teams overlap.
Tidy tree
The strategy tree packs each subtree by its shape. A small team fits under the edge of a large one, so the chart is narrower than with linked grids.
Flowchart
The strategy layers puts the children in layers in the direction of the edges between them. A cycle turns around, and a nested review stage has its own layers.
Mind map
A radial root with four fans. Each fan opens away from the root, and each ring is large enough for the subtrees on it.
System architecture
Nested containers hold services. Extra edges connect services in different containers.
Rings in rings
Radial containers inside a radial container. A container with one child puts it at the center.
Mixed strategies
Each container selects its own strategy and mode: a radial container of grids, with a linked tree inside one cell.
Boxes of different sizes
Each column is as wide as its widest box, and each row is as tall as its tallest box.
Children on each side
The grid strategy puts linked children below, above, left or right of their parent.
A fan
A radial strategy with a sweep of 120 degrees. Each child is at the middle of an equal part of the arc.
Fit: scale
A container with a fixed size. Its content becomes smaller to fit, and the labels become smaller too.
Fit: clip
A container with a fixed size and the fit clip. The content keeps its size, and the renderer cuts it at the edge.
Orthogonal edges
The orthogonal router draws horizontal and vertical segments, and turns at the middle of each gap.
A fractal
Three levels of nested containers. The strategy changes at each level: a grid of rings of grids.
A wide tree
Linked children make one row by default, so no edge crosses a sibling. The orthogonal router draws a comb.