@dforge-core/diagram

Entity-relationship and workspace diagram components for dForge models. A standalone Svelte 5 library — it has no dForge runtime dependencies (no SDK, no UI kit), so it can be embedded anywhere, including editor extensions.

Install

npm install @dforge-core/diagram

Svelte 5 is a peer dependency:

npm install svelte@^5

Styling (soft dependency)

Components render Bootstrap Icons glyphs (bi-*) and theme via Bootstrap CSS variables (--bs-body-color, --bs-tertiary-bg, etc.). To match the dForge look, load Bootstrap Icons and a Bootstrap-compatible CSS-variable theme in the host app, or define those variables yourself.

Usage

<script>
	import { SimpleDiagram, buildGraph } from '@dforge-core/diagram';

	// `model` is a metadata.getModel response (ModelGetResponse)
	const graph = buildGraph(model);
</script>

<SimpleDiagram {graph} />

Exports

• Components: SimpleDiagram, ModelDiagram, EntityNode, DiagramDebug, WorkspaceMap, ModuleCard
• Graph building: buildGraph, buildEntityMap, buildWorkspaceGraph, getModuleColor, MODULE_COLORS
• Layout & routing: simpleLayout, moduleLayout, routeEdge, routeAllEdges, computeEdgePath, geometry helpers
• Pan/zoom: createPanZoom, createLocalStorageSync
• i18n: setDiagramTranslations, getDiagramTranslations, DIAGRAM_TRANSLATIONS_EN
• Types: diagram types plus the metadata model contract (ModelGetResponse, ModelModule, ModelEntity, ModelConstraint, ModelColumn) — structurally compatible with the dForge API response shape

License

MIT