Documentation/Basic Concepts

Basic Concepts

Understanding the core concepts of Diagrammatic-UI will help you create effective graph visualizations. This guide covers the fundamental building blocks and principles behind the library.

Graphs

The main container component that renders nodes and edges. It manages the layout, interactions, and visual appearance of the visualization.

Nodes

Represent entities in your data. Nodes can have different types, styles, and behaviors based on your configuration.

Edges

Connect nodes to represent relationships. Edges can be styled, labeled, and can have different types (straight, curved, etc.).

Layouts

Algorithms that determine how nodes are positioned. Diagrammatic-UI supports various layouts like force, circular, tree, and more.

Graph Data Structure

The core of Diagrammatic-UI is the graph data structure, which consists of nodes and edges. Here's how you define a basic graph:

const graphData = {
  nodes: [
    { id: 'node1', name: 'Node 1', type: 'component' },
    { id: 'node2', name: 'Node 2', type: 'service' },
    // More nodes...
  ],
  edges: [
    { id: 'edge1', source: 'node1', target: 'node2' },
    // More edges...
  ],
  // Optional metadata
  name: 'My Graph',
  category: 'example'
};

Node Properties

Nodes represent entities in your graph and have the following key properties:

  • id: Unique identifier for the node
  • name: Display name for the node
  • type: Category of the node (e.g., 'component', 'service')
  • description (optional): Additional information about the node
  • sections (optional): Structured data for document-style nodes

Edge Properties

Edges represent relationships between nodes and have these key properties:

  • id: Unique identifier for the edge
  • source: ID of the source node
  • target: ID of the target node
  • label (optional): Text to display on the edge
  • type (optional): Style of the edge (e.g., 'solid', 'dashed')

Node Types

Diagrammatic-UI supports various node types to represent different kinds of entities:

Standard Nodes

Basic nodes with customizable shapes and colors

Document Nodes

Rich nodes with collapsible sections and detailed content

Interface Nodes

Specialized for representing programming interfaces

Custom Nodes

Create your own node types with custom rendering

Document-Style Nodes

Document nodes are particularly useful for displaying structured information:

const documentNode = {
  id: 'doc1', 
  name: 'RowingBoat', 
  type: 'interface',
  path: 'RowingBoat.java',
  description: 'Java interface for rowing boats',
  sections: [
    {
      id: 'methods',
      name: 'Methods',
      items: [
        { id: 'method1', value: 'public abstract void row(int speed, Direction direction)' }
      ]
    },
    {
      id: 'imports',
      name: 'Imports',
      items: [
        { id: 'import1', value: 'java.lang' }
      ]
    }
  ]
};

Document nodes can display code, methods, properties, and other structured information

Document Node

Layouts

Diagrammatic-UI offers multiple layout algorithms to arrange your nodes:

  • Force: Physics-based layout where nodes repel each other
  • Circular: Nodes arranged in a circle
  • Tree: Hierarchical layout for parent-child relationships
  • Spiral: Nodes arranged in a spiral pattern
  • Donut: Circular layout with a hole in the center
  • Grid: Nodes arranged in a grid pattern
<Graph 
  data={graphData}
  autoLayout="circular" // or "force", "tree", "spiral", "donut", "grid"
/>

Themes

Diagrammatic-UI supports both light and dark themes out of the box:

<Graph 
  data={graphData}
  theme="dark" // or "light"
/>

Light Theme

Light Theme

Dark Theme

Dark Theme

Interactivity

Diagrammatic-UI provides rich interaction options:

<Graph 
  data={graphData}
  interactionOptions={{
    selectionEnabled: true,
    draggingEnabled: true,
    zoomEnabled: true,
    panningEnabled: true
  }}
  onNodeClick={(nodeId) => console.log('Node clicked:', nodeId)}
  onNodeHover={(nodeId) => console.log('Node hovered:', nodeId)}
/>
Previous: InstallationNext: Examples