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

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.js	Main Graph class and exports
graph-view.js	Core graph view (wraps JointJS)
graph-view-node.js	Node element
graph-view-edge.js	Edge / connection element
constants.js	Default configuration and event constants
selected-item.js	Selection handling
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