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
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