# Node Diagram

> An animated node diagram with glowing data pulses flowing through connections.

<demo-node-diagram>



</demo-node-diagram>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/node-diagram.json"
```

## Usage

```vue
<script setup lang="ts">
  import NodeDiagram from '~/components/ui/node-diagram/NodeDiagram.vue';
  import type {
    NodeDiagramNodeData,
    NodeDiagramConnectionData,
  } from '~/types/components';

  const nodes: NodeDiagramNodeData[] = [
    {
      id: 'server',
      x: 180,
      y: 80,
      label: 'Server',
      icon: 'lucide:server',
      status: 'active',
    },
    {
      id: 'cloud',
      x: 50,
      y: 150,
      label: 'Cloud',
      icon: 'lucide:cloud',
      status: 'active',
    },
    {
      id: 'database',
      x: 310,
      y: 150,
      label: 'Database',
      icon: 'lucide:database',
      status: 'active',
    },
    {
      id: 'validate',
      x: 180,
      y: 220,
      label: 'Validate',
      icon: 'lucide:shield-check',
      status: 'processing',
    },
  ];

  const connections: NodeDiagramConnectionData[] = [
    { from: 'server', to: 'cloud', animated: true },
    { from: 'server', to: 'database', animated: true },
    { from: 'cloud', to: 'validate', animated: true },
    { from: 'database', to: 'validate', animated: true },
  ];
</script>

<template>
  <NodeDiagram
    :nodes="nodes"
    :connections="connections"
    class="mx-auto h-87.5 w-full"
  />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        nodes
      </code>
    </td>
    
    <td>
      <code>
        NodeDiagramNodeData[]
      </code>
    </td>
    
    <td>
      <code>
        []
      </code>
    </td>
    
    <td>
      Array of nodes to render
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        connections
      </code>
    </td>
    
    <td>
      <code>
        NodeDiagramConnectionData[]
      </code>
    </td>
    
    <td>
      <code>
        []
      </code>
    </td>
    
    <td>
      Array of connections between nodes
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pattern
      </code>
    </td>
    
    <td>
      <code>
        NodeDiagramPattern
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Pre-built layout: <code>
        data-flow
      </code>
      
      , <code>
        network
      </code>
      
      , <code>
        processor
      </code>
      
      , <code>
        tree
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        show-grid
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Show dot-grid background
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        grid-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        20
      </code>
    </td>
    
    <td>
      Grid dot spacing in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        trace-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Color of the connection traces
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pulse-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Color of the animated pulses
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        node-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Default color for inactive nodes
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        trace-width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      Width of the connection lines
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pulse-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      Speed of the pulse animation (seconds)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        variant
      </code>
    </td>
    
    <td>
      <code>
        'light' | 'dark' | 'auto'
      </code>
    </td>
    
    <td>
      <code>
        'auto'
      </code>
    </td>
    
    <td>
      Force light/dark theme or auto-detect
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Additional CSS classes
    </td>
  </tr>
</tbody>
</table>

## Pre-built Patterns

Use the `pattern` prop for quick layouts without defining nodes and connections manually:

```vue
<NodeDiagram pattern="data-flow" class="h-[400px] w-full" />
<NodeDiagram pattern="network" class="h-[400px] w-full" />
<NodeDiagram pattern="processor" class="h-[400px] w-full" />
<NodeDiagram pattern="tree" class="h-[350px] w-full" />
```