Skip to main content

05.26Interfaces

Node-graph and infinite-canvas tools for a human and AI agent task graph

Which node-graph libraries and infinite-canvas tools suit a shared human and AI agent view of a task dependency graph? React Flow and beads_viewer fit best.

Plate: a node graph on an infinite grid; a violet viewport picks out one region and opens it into readable detail.A graph of small dark nodes spreads over an infinite grid; a violet viewport frame selects one region and opens it, enlarged, into a detail panel of readable cards on the right.R-25INTERFACESMOTIF: GRIDS2026 · 03 · PLATE 25 / 30FINDINGONE ZOOMABLE VIEW FOR PEOPLE AND AGENTS
On this page
  1. Summary
  2. Category 1: node graph visualisation libraries (React)
  3. Category 2: layout engines for dependency graphs
  4. Category 3: infinite canvas tools (applications and SDKs)
  5. Category 4: issue tracking with graph visualisation
  6. Category 5: the semantic zoom (zoom-to-detail) pattern
  7. Summary comparison table
  8. Implications
  9. Sources

Which node-graph libraries and infinite-canvas tools could give a person and AI agents one shared visual view of a task dependency graph, with zoom-to-detail? AR Labs researched this question in March 2026 as groundwork for Vox Canvas, our browser viewer for the task graph. The report compares React Flow, Sigma.js, AntV G6, Cytoscape.js, tldraw, Excalidraw, Heptabase, Flowith, Linear, Jira and beads_viewer on project activity, licence, dependency-graph support, zoom-to-detail and how easily an AI agent can read and write the graph.

Method: nine parallel research threads plus direct web research.

Summary

The landscape divides into three clear tiers for this use case:

  1. Strongest fit for building a custom visual layer: React Flow (@xyflow/react): the most widely used React node graph library, with 35.6k stars, an MIT licence and a built-in "contextual zoom" feature that provides zoom-to-detail.

  2. Already built for beads specifically: bv (beads_viewer) - a TUI tool that already exports --export-graph <file.html> for self-contained interactive HTML visualization, and has a full --robot-* JSON API designed for AI agent consumption.

  3. Infinite canvas for knowledge/whiteboarding: tldraw (SDK for building canvas apps, 30k stars), Excalidraw (103k stars whiteboard), Heptabase (visual PKM, not open source) - useful reference points but not purpose-built for task dependency graphs.

Bottom line: The two most direct routes to a human-agent shared visual interface are (a) extending bv --export-graph output, or (b) building a React Flow web app that reads from bv --robot-graph JSON output.

Category 1: node graph visualisation libraries (React)

React Flow / @xyflow/react

What it is: The most widely used open-source React library for building node-based UIs - flow charts, workflow editors, dependency graphs, visual editors. Used as the foundation for commercial tools like Retool, Stripe Terminal, and hundreds of SaaS apps.

GitHub: https://github.com/xyflow/xyflow

  • Stars: 35.6k (as of March 2026)
  • Licence: MIT (fully open source, no commercial restrictions)
  • Forks: 2.3k
  • Issues: 95 open (very well maintained)
  • Last commit: Active - last playground update February 4, 2026
  • Package: @xyflow/react on npm

Key features:

  • Infinite pan/zoom canvas
  • Custom node types (React components as nodes - show anything)
  • Custom edge types with labels
  • Directed graph support with arrow markers
  • MiniMap component
  • Background grid
  • Built-in controls panel
  • Auto-layout via elkjs or dagre integration (examples at reactflow.dev)
  • Real-time collaboration support via yjs (open source guide published May 2025)

Zoom-to-detail (confirmed): React Flow has a documented Contextual Zoom example at reactflow.dev/examples/interaction/contextual-zoom. Quote from docs (last updated Feb 4, 2026): "This example shows how the current zoom level can be used by a node to decide which content to show."

The useViewport() hook exposes the current zoom level. Nodes can conditionally render different content (e.g., just title at zoom 0.3, full details at zoom 1.0). This is exactly semantic zoom / progressive disclosure on canvas.

Dependency graph support:

  • Natively supports directed edges with source/target
  • Edge labels can show relationship type ("blocks", "parent-child", "related")
  • @dagrejs/dagre integration for hierarchical layout (top-to-bottom dependency trees)
  • elkjs integration for more advanced layouts

Human-agent interface potential:

  • HIGH. React components as nodes = AI can compute graph data (nodes + edges from bv --robot-graph) and render it in a web interface
  • The nodes and edges arrays are plain JSON - trivially serialisable
  • AI can read the graph structure, modify it, and it re-renders
  • No MCP server exists yet, but building one would be straightforward

Pricing: Fully MIT. "Pro" subscription gives access to advanced examples and priority support - no locked features.

Verdict: Best choice for building a custom beads graph visualiser.

Sigma.js + react-sigma

What it is: A WebGL-based graph library optimised for rendering thousands of nodes. Used for large-scale network visualisation (social networks, knowledge graphs).

GitHub: https://github.com/jacomyal/sigma.js

  • Stars: ~11k
  • Licence: MIT
  • React wrapper: react-sigma (https://github.com/sim51/react-sigma) - last updated Dec 4, 2025
  • Active development: FOSDEM 2025 presentation; actively maintained

Key features:

  • WebGL rendering = handles 10,000+ nodes smoothly
  • Works with graphology graph data structure
  • Camera/viewport API for zoom
  • Interactive (click, hover, drag)

For dependency graphs:

  • Strong. Handles complex DAGs. Supports custom node/edge rendering.

Zoom-to-detail: Not built-in like React Flow's contextual zoom. Would need manual implementation via camera zoom events.

Verdict: Better choice if the graph has hundreds of beads issues. React Flow can struggle with 500+ nodes. Sigma scales better but requires more configuration.

AntV G6

What it is: Alibaba's graph visualisation framework. Very feature-rich, enterprise-grade, TypeScript, with React support via Graphin.

GitHub: https://github.com/antvis/G6

Key features:

  • Built-in layouts including Dagre (hierarchical) and force-directed
  • Rich interaction plugins (zoom, pan, select, hover tooltips)
  • Custom node and edge shapes
  • Plugins (minimap, toolbar, context menu)
  • Graph analysis (PageRank, community detection)

For dependency graphs:

  • Excellent. The Dagre layout is specifically designed for dependency/DAG visualisation.

Zoom-to-detail: Camera zoom events available; can conditionally render node detail.

Verdict: More capable than React Flow for analysis-heavy use cases. More complex API. Chinese documentation can be a barrier. Good choice if you want built-in graph analysis alongside visualisation.

Cytoscape.js

What it is: Mature graph theory library (13 years old, 2024 release). Both visualisation and analysis. Used heavily in bioinformatics and network analysis.

GitHub stats (from npmtrends):

  • Stars: 10,886
  • Issues: 29 open
  • Last update: 7 months ago (moderate maintenance pace)
  • Licence: MIT

Key features:

  • Comprehensive layout engine (including dagre, elk, breadthfirst, concentric)
  • Full graph analysis API
  • React wrappers exist (react-cytoscapejs)
  • Supports compound/hierarchical nodes (parent-child grouping)

Zoom-to-detail: Zoom events available. No built-in contextual zoom, but implementable.

Verdict: Solid but aging. React Flow has overtaken it for new projects. Worth considering if you need the graph analysis built-in.

vis.js (visjs-network)

What it is: Popular network visualisation library.

Status: The original vis.js is largely abandoned. The visjs-network community fork has only 60 GitHub stars and was last updated 6 years ago. The vis-network package is more maintained.

Verdict: Avoid. React Flow, Sigma, or G6 are better maintained options.

D3 Force Graph

Note: The npm package d3.js is actually a security holder (0.0.2-security, 9 years old). The real package is d3 (164k stars, actively maintained).

For node graphs specifically:

  • react-force-graph / 3d-force-graph by Vasco Asturiano - 5,850 stars, updated a month ago. Good for force-directed layouts.
  • D3 itself requires significant boilerplate for node graphs - usually better to use React Flow on top.

Verdict: Use react-force-graph for force-directed, organic layouts. Not ideal for structured dependency DAGs (use dagre/elk for those).

Category 2: layout engines for dependency graphs

These are not renderers - they calculate positions for nodes in a graph. Use alongside React Flow.

Dagre (@dagrejs/dagre)

  • Purpose: Hierarchical DAG layout (top-to-bottom or left-to-right)
  • GitHub: ~3.5k stars
  • React Flow integration: Official example at reactflow.dev/examples/layout/auto-layout
  • Perfect for beads dependency graphs - shows blocking chains flowing downward

ELK.js (Eclipse Layout Kernel)

  • Purpose: Advanced hierarchical and other layouts
  • React Flow integration: Official example at reactflow.dev/examples/layout/elkjs
  • More layout options than dagre but a heavier dependency

Category 3: infinite canvas tools (applications and SDKs)

tldraw

What it is: An open-source SDK for building infinite canvas applications in React. Not a finished product - a building block.

GitHub: https://github.com/tldraw/tldraw

  • Stars: 30k+ (was mentioned as 30k in Dec 2024)
  • Licence: Apache 2.0 (previously a tldraw-specific licence; check current terms)
  • Last SDK release: v4.2 (November 19, 2025); v4.0 October 2025
  • Active: very actively maintained, 25 repos in the org

Key features:

  • Feature-complete infinite canvas engine
  • Custom shapes, tools, bindings
  • Real-time collaboration built-in
  • React-based SDK
  • Whiteboard/freeform drawing focus

For dependency graphs: Not purpose-built for this. Would require building node-edge graph rendering on top. React Flow is better for structured graphs.

Zoom-to-detail: Camera API available; implementable.

As a shared human-agent interface: Could work. An AI could read/write the canvas state (JSON-serialised shapes). No existing MCP server.

Verdict: Best if you want the full infinite canvas experience (freeform + structured). Higher implementation effort than React Flow for graphs specifically.

Excalidraw

What it is: Open-source collaborative infinite canvas whiteboard with hand-drawn aesthetic.

GitHub: https://github.com/excalidraw/excalidraw

  • Stars: 103k (as of July 2025; crossed 89k in January 2025)
  • Licence: MIT
  • Very actively maintained (v0.18.0 released March 11, 2025)
  • npm package embeddable in React apps

For dependency graphs: Not purpose-built. Has arrows/connectors but no graph layout engine. You'd be manually positioning nodes.

AI interface potential: The JSON scene format is well-documented. An AI could generate or modify scenes programmatically. Some Claude-Excalidraw integrations exist in the community.

Verdict: Wrong tool for structured dependency graphs. Right tool for freeform brainstorming diagrams. Huge community.

Heptabase

What it is: Visual PKM (Personal Knowledge Management) app with infinite whiteboard. Cards on canvases. AI features.

Open source: No. Commercial product with free tier.

GitHub: No public repo for the main app. Has an MCP server (added December 2025, v1.81.2).

For dependency graphs: Can connect cards with lines/arrows on whiteboard. Not purpose-built for structured dependency graph layouts.

For task management: Has basic task functionality. Not a full issue tracker. Works better for research/knowledge than engineering PM.

Verdict: Interesting for knowledge visualisation but not the right fit for beads dependency graphs.

Kinopio

What it is: Lightweight spatial thinking / brainstorming tool. Cards and connections on canvas.

Open source: Partially. The client is open source.

For dependency graphs: Can draw connections between cards. No automatic graph layout.

Verdict: Too lightweight for engineering dependency tracking.

Flowith

What it is: An AI-native infinite canvas where AI agents work as nodes. "Agentic AI workspace."

URL: https://flowith.io

Key features (2025-2026):

  • Infinite 2D canvas for AI conversations
  • Multiple AI agents working in parallel branches on the canvas
  • "Neo Infinite Agent" - executes 1,000+ step tasks
  • Multithread canvas: parallel AI conversations visible simultaneously
  • Canvas 2.0 launched September 24, 2025

For project management: This is the closest thing to a "human-AI shared canvas" for project work. The AI agents ARE the nodes on the canvas.

Open source: No. Commercial product.

Verdict: Useful reference for the AI-native canvas pattern. Not directly usable as a beads visualiser, but represents the design direction.

Category 4: issue tracking with graph visualisation

Linear

Dependency visualisation status:

  • Project dependencies added August 8, 2024 (Changelog)
  • Shows blocking relationships on timeline/Gantt views
  • Issue relations (blocks/blocked-by, duplicate, relates-to)
  • Project graph shows project progress and timeline

What it lacks: No infinite canvas view where all issues float as nodes with dependency edges. The dependency view is a timeline/Gantt, not a graph.

API: Full REST + GraphQL API. Could theoretically feed a React Flow visualisation.

Jira

Dependency graph: Available via third-party Marketplace apps (e.g., "Dependency Graph" plugin). Not built-in natively. Complex setup.

beads_viewer (bv)

This is the most directly relevant existing tool.

GitHub: https://github.com/Dicklesworthstone/beads_viewer

What it is: A TUI (Terminal UI) companion for the beads issue tracker. Built in Go with the Bubble Tea framework. 60fps terminal rendering.

Key views:

  • l - List view
  • b - Kanban board
  • g - Graph view: navigate the dependency DAG
  • t - Tree view
  • Insights panel: PageRank, critical path, cycles

Graph engine:

  • Custom 2D ASCII/Unicode rendering engine
  • Manhattan routing (orthogonal edges with proper Unicode corner chars)
  • Topological layering (dependencies flow downward)
  • PageRank, HITS, betweenness centrality, eigenvector centrality
  • Cycle detection
  • Critical path analysis

Robot or AI mode: The --robot-* JSON API is explicitly designed for AI agent consumption:

Command Output
--robot-plan Execution plan with parallel tracks and unblocks lists
--robot-insights Full metrics: PageRank, betweenness, HITS, critical path, cycles
--robot-priority Priority misalignment detection
--robot-graph --graph-format=json|dot|mermaid Dependency graph export
--export-graph <file.html> Self-contained interactive HTML visualisation

The --export-graph command is directly relevant: it produces a standalone HTML file with an interactive dependency graph visualisation.

Zoom-to-detail in bv: The TUI has adaptive layout (mobile/split/ultra-wide modes) but not zoom-to-detail in the canvas sense.

Verdict: bv already has the robot mode and HTML export. The gap is a web-native, infinite canvas version with zoom-to-detail. This is the foundation to build on.

Category 5: the semantic zoom (zoom-to-detail) pattern

React Flow contextual zoom (confirmed):

  • Official example: reactflow.dev/examples/interaction/contextual-zoom
  • Implementation: Use useViewport() hook to get current zoom level
  • Pattern: Nodes render different content at different zoom levels
    • Zoom < 0.4: Just show issue ID and coloured status dot
    • Zoom 0.4-0.7: Show title + status
    • Zoom > 0.7: Show full details (description, labels, blockers count)
  • This is exactly "zoom out to see all issues, zoom in to see details"

Reference from Synergycodes blog (React Flow):

"At a high zoom level – Show full labels, detailed descriptions, and extra icons. At a low zoom level – Show simplified labels to avoid clutter."

Figma-style approach: Figma handles this by simply scaling content - text becomes unreadable below a threshold and gets replaced with coloured blocks. React Flow's approach is smarter: conditionally render entirely different React components.

Summary comparison table

Tool Type Stars Licence Dep Graph Zoom-to-Detail AI Interface
React Flow (@xyflow/react) React library 35.6k MIT Excellent (dagre/elk) Built-in contextual zoom JSON nodes/edges, easy to wire
tldraw Canvas SDK 30k+ Apache 2.0 Manual only Camera API JSON scene state
Excalidraw Whiteboard app 103k MIT Manual only No JSON scene format
Sigma.js React graph lib ~11k MIT Good Manual JSON graphology format
AntV G6 Graph framework ~11k MIT Excellent Manual JSON
Cytoscape.js Graph library 10.9k MIT Good Manual JSON
bv (beads_viewer) TUI for beads Small MIT+OpenAI Built-in TUI adaptive layout Full robot JSON API + HTML export
Flowith AI canvas app N/A Proprietary No Yes Native AI
Heptabase Visual PKM N/A Proprietary Partial Yes MCP server (Dec 2025)
Linear Issue tracker N/A Proprietary Gantt/timeline No REST/GraphQL API

Implications

The comparison points to three ways to build a shared human and AI-agent view of a Beads dependency graph.

Option A: Extend bv's HTML export

bv --export-graph already produces interactive HTML. Extending it means finding which graph library the export uses internally, then customising its template or building a wrapper around it. This is the lowest-friction path.

Option B: React Flow web app reading from bv JSON

A React app would take its graph data from bv --robot-graph --graph-format=json, transform it into React Flow nodes and edges, lay it out with dagre as a hierarchical dependency view, and implement contextual zoom (zoom-to-detail). It would serve as a local web interface for both human and agent inspection: the AI agent reads the same JSON via bv --robot-graph and the human uses the web UI.

Option C: MCP server for a canvas tool

An MCP server could expose Beads data to any MCP-compatible canvas tool. Heptabase added MCP in December 2025, so this would allow viewing Beads issues in Heptabase's canvas.

Sources