D3

import { toD3Graph, fromD3Graph, d3Converter } from '@statelyai/graph/d3';
import { createGraph } from '@statelyai/graph';

// Export
const graph = createGraph({
  id: 'deps',
  nodes: [
    { id: 'react', label: 'React' },
    { id: 'react-dom', label: 'ReactDOM' },
    { id: 'scheduler', label: 'Scheduler' },
  ],
  edges: [
    { id: 'e0', sourceId: 'react-dom', targetId: 'react' },
    { id: 'e1', sourceId: 'react-dom', targetId: 'scheduler' },
    { id: 'e2', sourceId: 'react', targetId: 'scheduler' },
  ],
});

const d3 = toD3Graph(graph);
// {
//   nodes: [{ id: 'react', label: 'React' }, ...],
//   links: [{ source: 'react-dom', target: 'react' }, ...]
// }

// Import
const imported = fromD3Graph({
  nodes: [
    { id: 'app', label: 'App' },
    { id: 'auth', label: 'Auth Service' },
    { id: 'store', label: 'Data Store' },
  ],
  links: [
    { source: 'app', target: 'auth' },
    { source: 'app', target: 'store' },
    { source: 'auth', target: 'store' },
  ],
});
// a graph containing:
// nodes: - app - auth - store
// edges: - (app -> auth) - (app -> store) - (auth -> store)

const d3 = d3Converter.to(graph);
const graph = d3Converter.from(d3);