Graph

Helix

Building

Interactive graphs in your brand’s colors

Knowledge graphs, service maps, and live networks in 2D or 3D, styled with your theme.

Get started Build your theme

Customize the graph

Brand

Site

Light

Dark

Passing

Paused

Why Helix

What Helix adds

Your brand

Colored by your theme.

A color for each group.
Light and dark from one theme.
Labels in your typeface.
Tones for meaning, such as danger.

The frame

Every note in a searchable list.

Search notes by name.
Select in the list or the drawing.
See the selected note’s links first.
Zoom and pan with buttons or keys.

Your renderer

Sigma.js, cosmos.gl, or three.js.

Sigma.js for thousands of notes.
cosmos.gl for tens of thousands.
three.js for 3D and models.
Any other with a small driver.

Live data

Updates as your data changes

New notes arrive and messages travel the links, drawn by Sigma.js.

const frame = document.querySelector('helix-graph') frame.nodes = notes frame.links = links const sigma = new Sigma(new Graph(), box) connectGraph(frame, sigmaDriver(sigma, { layout })) // A note arrives, and is drawn beside its neighbors. frame.nodes = [...frame.nodes, call] frame.links = [...frame.links, { source: call.id, target: 'Pricing' }] // A message passes from one note to another. frame.signal(call.id, 'Pricing')

Press a note to see its links, or a group in the legend to hide its notes. New calls appear in the list as they arrive.

Features

Styles, signals, and live updates

Set each on a note or on the frame.

Note styles

Circles, squares, diamonds, or rings. Filled, outlined, or glass. A tone colors a note by meaning.

shapeemphasismaterialtone

Signals

A comet along a link for each message, request, or payment.

frame.signal(from, to)

Live updates

New notes grow in beside their neighbors. The rest hold still.

frame.nodesframe.links

Fewer notes at once

Show only the notes near the selected one, or turn groups on and off in a legend.

<helix-graph depth="2"><helix-graph legend>

Graphs on 3D models

Three thousand services on a knot, drawn by three.js. Drag to turn it.

import { shapeFromModel } from '@fusion.dev/helix-graph/model' import { threeDriver } from '@fusion.dev/helix-graph/three' const knot = await shapeFromModel('/models/knot.glb') connectGraph(frame, threeDriver(box), { stencil: { ...knot, place: 'surface' }, })

Press a note to see its links. The Notes button opens the list.

Shapes

Models, outlines, and solids

Notes take the shape from the first frame, with no layout to wait for.

3D models

Notes on any glTF model. Send each group to a named part.

shapeFromModel(url)

SVGs and images

Notes inside a logo, an outline, or a map. Send each group to a named shape.

shapeFromSvg(svg)shapeFromImage(image)

Flat shapes in 3D

Puff an outline into a solid, or wrap a map around a globe.

inflate(field, { depth })onSphere(field)

Solids

Spheres, rings, and rounded boxes.

sphere()torus()cuboid()

Scale

Twenty thousand notes

Laid out and drawn on the GPU by cosmos.gl.

import { Graph } from '@cosmos.gl/graph' import { cosmosDriver } from '@fusion.dev/helix-graph/cosmos' const graph = new Graph(box, { enableSimulation: true }) connectGraph(frame, cosmosDriver(graph, box))

Pinch, or hold Ctrl or ⌘ and scroll, to zoom. The Notes button opens the list.

Get started

Add a graph to your site

Install Helix, the connector, and a renderer. The Graphs guide covers the rest.

bun add @fusion.dev/helix @fusion.dev/helix-graph sigma graphology graphology-layout-forceatlas2

Read the Graphs guide

Under the hood

How it is built

Four parts, from the element you write to the renderer.

Interface
The frame
The box around the drawing: a searchable list of notes, zoom and pan buttons, and keyboard controls.Building
Integration
The connector
Draws your notes and links with the renderer, colored by your theme. Redraws only what changed.Building
Layout
Shapes
Places notes in a 3D model, an SVG, an image, or a solid.Building
Rendering
The renderer
Draws the graph. Use Sigma.js, cosmos.gl, three.js, or your own driver.Sigma.js, cosmos.gl, or three.js

Updates as your data changes

New notes arrive and messages travel the links, drawn by Sigma.js.

Graphs on 3D models

Three thousand services on a knot, drawn by three.js. Drag to turn it.

Helix. The DNA

Cortex. The mind

What Helix adds

Updates as your data changes

Styles, signals, and live updates

Graphs on 3D models

Models, outlines, and solids

Twenty thousand notes

Add a graph to your site

How it is built

Helix. The DNA

Cortex. The mind

What Helix adds

Updates as your data changes

Styles, signals, and live updates

Graphs on 3D models

Models, outlines, and solids

Twenty thousand notes

Add a graph to your site

How it is built