Documentation/Installation

Installation

Get started with Diagrammatic-UI by installing it in your React project. Follow the steps below to set up the library.

Requirements

Diagrammatic-UI is designed to work with React applications. Make sure you have the following prerequisites:

  • React 19+ (Hooks support required)
  • Node.js 20+ and npm

Installation

You can install Diagrammatic-UI using npm or yarn:

Using npm

npm install diagrammatic-ui

Using yarn

yarn add diagrammatic-ui

Quick Start

After installing the package, you can import and use the components in your React application:

import { Graph } from 'diagrammatic-ui';

function MyDiagram() {
  // Define your graph data
  const graphData = {
    nodes: [
      { id: 'node1', name: 'Node 1', type: 'component' },
      { id: 'node2', name: 'Node 2', type: 'service' },
      { id: 'node3', name: 'Node 3', type: 'model' },
      { id: 'node4', name: 'Node 4', type: 'component' },
      { id: 'node5', name: 'Node 5', type: 'context' },
    ],
    edges: [
      { id: 'edge1', source: 'node1', target: 'node2' },
      { id: 'edge2', source: 'node2', target: 'node3' },
      { id: 'edge3', source: 'node3', target: 'node4' },
      { id: 'edge4', source: 'node4', target: 'node5' },
      { id: 'edge5', source: 'node5', target: 'node1' },
    ]
  };

  return (
    <Graph 
      data={graphData}
      height={500}
      theme="light"
      onNodeClick={(nodeId) => console.log('Clicked:', nodeId)}
    />
  );
}

Tip

Check out the interactive playground to experiment with Diagrammatic-UI components without setting up a project.

Next Steps

Now that you've installed Diagrammatic-UI, you can:

Back to DocumentationNext: Basic Concepts