PCUI Graph - Node-based Graphs for PCUI

| User Guide | API Reference | React Examples | Discord | Blog | Forum |

Create node-based visual graphs in the browser. Supports undirected / directed graphs as well as visual scripting graphs containing nodes with input / output ports. Your graphs can be saved to a JSON file and loaded back into a new graph view at any time.

Getting Started

To install PCUI Graph, run:

npm install @playcanvas/pcui-graph

Then import the library and its styles into your project:

import Graph from '@playcanvas/pcui-graph';
import '@playcanvas/pcui/styles';
import '@playcanvas/pcui-graph/styles';

const schema = {
    nodes: {
        0: {
            name: 'Hello',
            fill: 'red'
        },
        1: {
            name: 'World',
            fill: 'green'
        }
    },
    edges: {
        0: {
            from: [0], // this edge can connect nodes of type 0
            to: [1], // to nodes of type 1
            stroke: 'blue'
        }
    }
};

const graph = new Graph(schema);
document.body.appendChild(graph.dom);

Storybook

Examples of graphs created using PCUI Graph are available in the Storybook. You can also run it locally as a development environment:

npm install
npm run storybook

This will automatically open the Storybook in a new browser tab.

Development

The source lives in src/ and is organized as follows:

| File | Purpose | |------|---------| | index.ts | Main Graph class and exports | | graph-view.ts | Core graph view (wraps JointJS) | | graph-view-node.ts | Node element | | graph-view-edge.ts | Edge / connection element | | joint-graph.ts | Base JointJS paper, pan, zoom and resize | | joint-shape-node.ts | Custom JointJS HTML element shape | | constants.ts | Default configuration and event constants | | selected-item.ts | Selection handling | | util.ts | Utility functions | | lib/vec2.ts | 2D vector math | | styles/style.scss | SCSS styles |

To build and lint:

npm run build    # Production build (UMD + ESM + types + styles)
npm run lint     # Run ESLint and Stylelint
npm run watch    # Watch mode with incremental rebuilds

TypeScript declarations are generated into types/ during the build and are included in the published package.

API Documentation

To build the API reference to the docs folder:

npm run docs