Restormel Graph — free & open source

Stop rebuilding graph UIs for every AI reasoning feature

Graph ships two npm packages: a frozen contract (GraphData DTOs, layout helpers) and a Svelte 5 canvas. Your domain logic stays in your app. Your renderer stays portable. The contract stays stable.

Your stack

Data

Models

Restormel

Control layer

Route · ingest · verify

Your product

Grounded agents

Cited answers, your keys

No rip-and-replace — keep Neon, SurrealDB, and your providers.

What kind of product needs this?

Reasoning visualisers

Show users how an AI reached a conclusion. Nodes are claims. Edges are inferences. Ghost layers show discarded paths.

Knowledge graph explorers

Render entity relationships from RAG pipelines and retrieval graphs — one contract from your indexer to the canvas, without a bespoke SVG stack each time.

Agent workflow UIs

Visualise multi-step agent runs as they happen: tools, branches, and hand-offs as a living graph instead of a log dump.

Argument maps

Built for SOPHIA-style philosophical reasoning: typed arcs, contested claims, and synthesis paths — all expressible in Contract v0.

Contract-first, not library-lock-in

Most graph libraries couple your data model to their renderer. Change the library, rewrite your adapters. Restormel Graph separates the contract (GraphData) from the canvas (@restormel/graph-elements). Legacy @restormel/ui-graph-svelte is deprecated — use Web Components for new apps. Swap the renderer without touching your domain.

Your app produces

import type { GraphData } from "@restormel/graph-core/viewModel";

/** Your app maps domain state → portable GraphData (no UI imports). */
export function toGraphData(snapshot: YourDomainSnapshot): GraphData {
  return {
    nodes: snapshot.vertices.map((v) => ({
      id: v.id,
      type: v.role === "premise" ? "claim" : "source",
      label: v.text,
    })),
    edges: snapshot.links.map((e) => ({
      from: e.sourceId,
      to: e.targetId,
      type: "supports",
    })),
    ghostNodes: snapshot.pruned.map(/* … */),
    ghostEdges: [],
  };
}

Canvas consumes

svelte

<script lang="ts">
  import { GraphCanvas } from "@restormel/ui-graph-svelte";
  import type { GraphData } from "@restormel/graph-core/viewModel";

  export let graphData: GraphData;
</script>

<GraphCanvas
  nodes={graphData.nodes}
  edges={graphData.edges}
  ghostNodes={graphData.ghostNodes}
  ghostEdges={graphData.ghostEdges}
  width={720}
  height={420}
  showGhostLayer={true}
/>

Hello world

Install

bash

pnpm add @restormel/graph-core @restormel/graph-elements

Import GraphCanvas and pass a minimal GraphData (two nodes, one edge):

svelte

<script type="module">
  import "@restormel/graph-elements";
  const el = document.querySelector("rg-graph-canvas");
  el.nodes = [
    { id: "a", type: "claim", label: "Node A" },
    { id: "b", type: "claim", label: "Node B" },
  ];
  el.edges = [{ from: "a", to: "b", type: "supports" }];
</script>
<rg-graph-canvas width="560" height="320"></rg-graph-canvas>

Svelte 5 — and what’s next

Graph currently ships a first-class Svelte 5 canvas: zoom, pan, selection, ghost layers, and orbital layout helpers — the same surface we exercise in CI. Other frameworks are on the roadmap; we’re not pretending parity before it ships.

React adapter — Coming, vote on GitHub →