Reasoning visualisers
Show users how an AI reached a conclusion. Nodes are claims. Edges are inferences. Ghost layers show discarded paths.
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.
Same suite, shared foundations
Graph ships standalone — and sits next to Keys, Testing, and the integrations you already run in production.
What kind of product needs this?
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/ui-graph-svelte). 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
<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
pnpm add @restormel/graph-core @restormel/ui-graph-svelteImport GraphCanvas and pass a minimal GraphData (two nodes, one edge):
<script lang="ts">
import { GraphCanvas } from "@restormel/ui-graph-svelte";
import type { GraphData } from "@restormel/graph-core/viewModel";
const graphData: GraphData = {
nodes: [
{ id: "a", type: "claim", label: "Node A" },
{ id: "b", type: "claim", label: "Node B" },
],
edges: [{ from: "a", to: "b", type: "supports" }],
ghostNodes: [],
ghostEdges: [],
};
</script>
<GraphCanvas
nodes={graphData.nodes}
edges={graphData.edges}
ghostNodes={graphData.ghostNodes}
ghostEdges={graphData.ghostEdges}
width={560}
height={320}
/>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.
Pricing
Both @restormel/graph-core and @restormel/ui-graph-svelte are MIT — free forever for build and ship.
Graph Pro extensions (reasoning integrations, premium layouts, and suite support) are included in the Restormel Platform plan.
See Keys & Platform pricing →Join the Founders Circle
50 founding member slots. 12 months Pro free. Direct access to the roadmap.