jatui
Dark
  • Theme

GraphCanvas

Svelte Flow wrapper with DaisyUI theme bridge — node graphs, dependency trees, org/flow charts

Dependency Tree

A jatui-x2hyv epic broken down into blocking tasks. Nodes are draggable; click any node to inspect it. Colors follow the active DaisyUI theme.

Svelte Flow
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Editor · custom types, events, viewport API

Custom nodeTypes (two-port node) and edgeTypes (tinted edge with a run badge). Drag from an output port to an input to connect; select and press Delete or Backspace to remove; right-click a node for its menu; double-click opens config. The status bar is a Panel passed as children; zoom buttons call the bind:this API.

Svelte Flow
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
100%
  • Events appear here.

With MiniMap · Read-only

Pass readonly to lock pan/zoom and disable node dragging. minimap shows the bird's-eye panel.

Svelte Flow
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Status Tints

Every node accepts a status property that tints its surface with the DaisyUI semantic color.

Svelte Flow
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.