Installation

1npm install react-cosmos-diagram

Core characteristics

• Easy zooming and panning, single and multiple selection of graph elements and keyboard shortcuts are supported natively
• Customizable support for nodes, ports, and edges
• Written in Typescript

demo

Quickstart

1import { useCallback, useRef } from 'react';
2
3import ReactDiagram, {
4   useNodesState,
5   useEdgesState,
6   addEdge,
7   updateEdge,
8   Connection,
9   Edge,
10   MarkerType,
11} from 'react-cosmos-diagram';
12
13import 'react-cosmos-diagram/styles/style.css';
14
15const initialNodes = [
16   {
17      id: '1',
18      width: 200,
19      height: 100,
20      data: { label: 'Node1' },
21      position: { x: 100, y: 100 },
22   },
23   {
24      id: '2',
25      data: { label: 'Node2' },
26      position: { x: 300, y: 50 },
27   },
28   {
29      id: '3',
30      data: { label: 'Node3' },
31      position: { x: 10, y: 10 },
32      parentNode: '1',
33   },
34   {
35      id: '4',
36      data: { label: 'Node4' },
37      position: { x: 650, y: 100 },
38   },
39];
40
41const initialEdges = [
42   {
43      id: 'e-1-2',
44      type: 'bezier',
45      source: '1',
46      target: '2',
47      markerStart: {
48         type: MarkerType.Arrow,
49      },
50   },
51   {
52      id: 'e-2-3',
53      source: '2',
54      target: '3',
55      markerEnd: {
56         type: MarkerType.Arrow,
57      },
58      type: 'step',
59      label: 'label',
60   },
61   {
62      id: 'e-3-4',
63      type: 'c',
64      source: '3',
65      target: '4',
66      markerEnd: {
67         type: MarkerType.Arrow,
68      },
69   },
70];
71
72function Diagram() {
73   const edgeConnected = useRef(true);
74
75   const [nodes, _setNodes, onNodesChange] = useNodesState(initialNodes);
76   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
77
78   const onConnect = useCallback(
79      (params: Connection) => setEdges((edges) => addEdge({ ...params }, edges)),
80      [],
81   );
82
83   const onEdgeUpdateStart = useCallback(() => {
84      edgeConnected.current = false;
85   }, []);
86
87   const onEdgeUpdateEnd = useCallback((_e: any, currentEdge: Edge) => {
88      if (!edgeConnected.current) {
89         setEdges((edges) => edges.filter((edge) => edge.id !== currentEdge.id));
90      }
91
92      edgeConnected.current = true;
93   }, []);
94
95   const onEdgeUpdate = useCallback(
96      (originEdge: Edge, newConnection: Connection) => {
97         edgeConnected.current = true;
98         setEdges((edges) => updateEdge(originEdge, newConnection, edges));
99      },
100      [],
101   );
102
103   return (
104      <ReactDiagram
105         nodes={nodes}
106         edges={edges}
107         onNodesChange={onNodesChange}
108         onEdgesChange={onEdgesChange}
109         onConnect={onConnect}
110         onEdgeUpdateStart={onEdgeUpdateStart}
111         onEdgeUpdateEnd={onEdgeUpdateEnd}
112         onEdgeUpdate={onEdgeUpdate}
113      />
114   );
115}
116
117export default Diagram;
118

Credits

Under the hood, React Cosmos Diagram depends on these great libraries:

• d3-zoom - used for zoom, pan and drag interactions with the graph canvas
• d3-drag - used for making the nodes draggable
• zustand - internal state management

License

React Cosmos Diagram is MIT licensed.