Graphora

Theme

Product demo

Load your own data ​

Start from the JavaScript / TypeScript or React tutorial. Replace its sample graph with your nodes and edges; the renderer and layout can stay the same.

Open the data roundtrip demo to try mapping business records, editing saved JSON and reloading a graph.

Describe nodes and connections ​

Each node needs a unique string id. An edge's source and target must reference existing node IDs. Give edges explicit IDs when you will update or select them later. Labels are display text and can change independently of IDs.

ts
const graph = {
  nodes: [
    { id: 'gateway', label: 'Gateway' },
    { id: 'orders', label: 'Orders' },
    { id: 'database', label: 'Database' },
    { id: 'payments', label: 'Payments' }
  ],
  edges: [
    { id: 'go', source: 'gateway', target: 'orders', directed: true },
    { id: 'od', source: 'orders', target: 'database', directed: true },
    { id: 'op', source: 'orders', target: 'payments', directed: true }
  ]
}

In the vanilla tutorial, use this value as the engine's graph option. In React, replace the top-level graph constant. Save: the circular layout now shows four nodes and three connections, including Orders → Payments.

Map business records ​

Keep application field names in your data and map them at the boundary:

ts
import { createRawGraphFromRecords } from '@graphora/core'

const graph = createRawGraphFromRecords({
  nodes: [
    { key: 'orders', name: 'Orders', team: 'commerce' },
    { key: 'payments', name: 'Payments', team: 'billing' }
  ],
  edges: [{ from: 'orders', to: 'payments' }],
  node: {
    id: (service) => service.key,
    label: (service) => service.name,
    data: (service) => service
  },
  edge: {
    source: (dependency) => dependency.from,
    target: (dependency) => dependency.to
  }
})

This produces two nodes connected by one edge. data keeps your original record available for detail panels; it does not automatically style nodes. Use data-driven styles to show categories with color.

Load and validate saved JSON ​

ts
import { parseRawGraphJson } from '@graphora/core'

const graph = parseRawGraphJson(jsonText)

jsonText must contain Graphora's raw graph shape. Parse before replacing the current view, catch validation errors in your application, and show them near the input. The data roundtrip demo keeps the last valid graph when JSON is invalid. Fetching remote data, authentication and loading UI belong to your application.

Update an existing view ​

For React, keep graph identity stable until data changes and use graphUpdatePolicy="preserve" when filters should retain positions. For direct engine updates, see graph mutations and batches.

The core API reference documents RawGraph, createRawGraphFromRecords and parseRawGraphJson.