@sylang/web-diagrams

Sylang diagram webview — renders all 12 Sylang diagram types (internal-block, feature-model, variant-model, FMEA, FTA, sequence, state-machine, use-case, graph-traversal, etc.) from a single React + D3 + Konva + Sigma app.

Ships as two builds:

• dist/lib.{js,cjs,d.ts} — focused React library entry exposing SigmaGraphTraversal + ImpactAnalysis for inline mount. ~72 KB ESM, excludes konva / sigma / graphology — just d3 + React.
• dist-web/main.{html,js,css} — full iframe bundle with every renderer (~2 MB). Loaded by hosts via <iframe src="…/main.html">.

Install

pnpm add @sylang/web-diagrams

Usage — inline React (graph traversal only)

import { SigmaGraphTraversal } from '@sylang/web-diagrams'

<SigmaGraphTraversal data={graphData} theme="dark" />

Usage — iframe (all 12 diagram types)

Copy node_modules/@sylang/web-diagrams/dist-web/* into your host's static-files folder, then:

<iframe src="/sylang-diagrams/main.html" />

The iframe accepts diagram data via postMessage; see the Sylang Studio integration for the message protocol.

Part of @sylang-core. Apache-2.0.