From semantic graph
to SVG artifact.

Install

Orbweaver supports ESM projects on Node.js 20 or newer and runs in modern browsers through your bundler.

npm install @semanticintent/orbweaver

Create and render

Nodes and edges describe the system. They contain no coordinates, SVG paths, or renderer styles.

import { createGraph, renderGraph, validateGraph } from
  '@semanticintent/orbweaver'

const graph = createGraph({
  id: 'checkout',
  title: 'Checkout flow',
  nodes: [
    { id: 'cart', type: 'process', label: 'Cart' },
    { id: 'payment', type: 'decision', label: 'Payment accepted?' },
    { id: 'fulfillment', type: 'process', label: 'Fulfillment' },
  ],
  edges: [
    { from: 'cart', to: 'payment', type: 'flow' },
    { from: 'payment', to: 'fulfillment', label: 'Yes' },
  ],
})

const validation = validateGraph(graph)
if (!validation.valid) throw new Error('Invalid semantic graph')

const svg = await renderGraph(graph, {
  layout: { direction: 'LR' },
})

Put the SVG on the page

const container = document.querySelector('#diagram')
if (container) container.innerHTML = svg

Add inspection and navigation

const normalized = normalizeGraph(graph)
const svgElement = container.querySelector('svg')

const interaction = mountSvgInteraction(svgElement, normalized, {
  onSelectionChange: renderInspector,
})
const viewport = mountSvgViewport(svgElement)

// Before removing the diagram
interaction.destroy()
viewport.destroy()

Selection exposes semantic inspection data. Viewport navigation adds bounded zoom and pan without changing the graph or exported artifact.