Interactive Visualization

Tendril Graph Demo

Watch a knowledge graph self-organize with physics-driven simulation. Drag nodes, switch layouts, adjust parameters.

Layout

Physics

Repel Force 2000

How strongly nodes push apart

Center Force 0.12

Pull toward center

Damping 0.82

Motion energy decay (0=bouncy, 1=sticky)

Actions

💡 Drag nodes • Scroll to zoom • Click to highlight

Try This Code

Copy this snippet to use Tendril in your project

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

const graph = new TendrilGraph('#container', {
  nodes: [
    { id: 'ai', label: 'AI', type: 'concept' },
    { id: 'rag', label: 'RAG', type: 'concept' },
    { id: 'vector', label: 'Vector DB', type: 'tech' }
  ],
  edges: [
    { source: 'ai', target: 'rag' },
    { source: 'rag', target: 'vector' }
  ],
  physics: {
    repelForce: 2000,
    centerForce: 0.12,
    damping: 0.82
  }
})