@exellix/diagrams-toolkit

Reusable React UI primitives for graph and diagram authoring: library tables, tabs, inspector shell, JSON panels, and an interactive GraphCanvas (pan/zoom, drag, SVG edges).

Install

npm install @exellix/diagrams-toolkit react react-dom lucide-react

Peer dependencies: react, react-dom (^18 or ^19).

Tailwind CSS (required)

Components use Tailwind utility classes. Configure your app to scan the package source.

Tailwind v4 (src/index.css):

@import "tailwindcss";
@source "../node_modules/@exellix/diagrams-toolkit/src";

Tailwind v3 (tailwind.config.js):

content: ['src/**/*.{js,jsx}', 'node_modules/@exellix/diagrams-toolkit/src/**/*.{js,jsx}'],

Optional base font helper:

import '@exellix/diagrams-toolkit/styles.css';

GraphCanvas example

import { useState } from 'react';
import { GraphCanvas } from '@exellix/diagrams-toolkit';

export function Demo() {
  const [nodes, setNodes] = useState([
    { id: 'a', label: 'Task A', x: 80, y: 80 },
    { id: 'b', label: 'Task B', x: 400, y: 160 },
  ]);
  const [selectedItem, setSelectedItem] = useState(null);

  return (
    <div className="h-[480px] flex flex-col">
      <GraphCanvas
        nodes={nodes}
        edges={[{ from: 'a', to: 'b' }]}
        onNodesChange={setNodes}
        selectedItem={selectedItem}
        onSelectItem={setSelectedItem}
        renderNode={(node, { selected, onPointerDown }) => (
          <button
            type="button"
            onPointerDown={onPointerDown}
            className={`absolute p-3 rounded-lg border ${selected ? 'border-indigo-500' : 'border-slate-200'}`}
            style={{ left: node.x, top: node.y }}
          >
            {node.label}
          </button>
        )}
      />
    </div>
  );
}

Exports

| Export | Purpose | |--------|---------| | GraphCanvas | Full topology canvas (pan, zoom, drag, edges) | | GraphCanvasZoomControl | Zoom slider + fit view | | DefaultGraphEdge | Simple SVG edge renderer | | layoutGraphNodesFromTopology | Auto-layout + in/out edge counts | | computeEdgeBezierPath | Edge geometry helper | | FlowCanvas | Legacy simple flow view (deprecated; use GraphCanvas) | | ViewTabStrip, ResourceDataTable, InspectorShell, … | Shell UI primitives |

Monorepo demo

From the workspace root:

npm run demo:toolkit

Publish

This package ships raw ESM from src/ (same pattern as other @exellix/* libs in the monorepo).