@argobox/tendril-graph

Interactive knowledge graph visualization with live physics simulation. Show relationships between concepts, documents, or entities with a beautiful, animated graph.

Framework-agnostic. Works in any browser.

What You Get

• Live physics — nodes repel, links attract, graph self-organizes
• Interactive — drag nodes, zoom, pan, click to select
• Configurable — physics, colors, sizes, link styles, layout — all through a single config object
• Lightweight — built on Cytoscape.js, ships as a single bundled ESM/CJS module
• Two builds — full bundle (includes Cytoscape) or lite (bring your own)

Install

npm install @argobox/tendril-graph

Quick Start

<div id="graph" style="width: 100%; height: 500px;"></div>

<script type="module">
  import { TendrilGraph } from '@argobox/tendril-graph'

  const graph = new TendrilGraph('#graph', {
    physics: { centerForce: 0.12, repelForce: 2000 }
  })

  graph.addNodes([
    { id: 'ai', label: 'AI', group: 'core' },
    { id: 'rag', label: 'RAG', group: 'core' },
    { id: 'llm', label: 'LLM', group: 'provider' },
    { id: 'vector', label: 'Vector DB', group: 'storage' },
  ])

  graph.addEdges([
    { source: 'ai', target: 'rag', label: 'uses' },
    { source: 'rag', target: 'vector', label: 'queries' },
    { source: 'ai', target: 'llm', label: 'routes to' },
  ])
</script>

Use Cases

• Visualize RAG knowledge bases and document relationships
• Dependency graphs for packages, services, or infrastructure
• Org charts and team structures
• Concept maps and mind maps
• Network topology diagrams

Configuration

const graph = new TendrilGraph('#container', {
  physics: {
    centerForce: 0.12,      // Pull toward center
    repelForce: 2000,        // Push nodes apart
    linkForce: 0.2,          // Link spring strength
    linkDistance: 160,        // Ideal link length
    damping: 0.82,           // Velocity decay
    enabled: true,           // Toggle physics
  },
  container: {
    maxWidth: 1056,
    aspectRatio: '1 / 1',
  }
})

Lite Build

If you already have Cytoscape in your project:

import { TendrilGraph } from '@argobox/tendril-graph/lite'

This skips the bundled Cytoscape and uses your existing installation.

License

MIT