JS tool for making node graphs. Inspired by dependency graph
Switch branches/tags
Nothing to show
Clone or download
aexol merge
Merge branch 'hzub-feature/fixes-and-sandbox-mode'
Latest commit cc2fd2d Oct 27, 2018
Failed to load latest commit information.
assets readme changes Oct 25, 2018
sandbox Added sandbox mode Oct 27, 2018
src Render optimizations, fixed minimap bugs Oct 27, 2018
.gitignore bug commit Jul 6, 2018
.npmignore added npmignore file Oct 24, 2018
.prettierrc initial commit May 26, 2018
Gruntfile.js initial commit May 26, 2018
README.md Added sandbox mode Oct 27, 2018
package-lock.json merge Oct 27, 2018
package.json merge Oct 27, 2018
tsconfig.json Added sandbox mode Oct 27, 2018


Diagram is the tool for making node based systems. Define your own behaviour of this react based diagram system and create your tool. Visual programming is trending right now so this is a good basis.

Project Page

Live demo

Here is Live Demo of diagram used to create node based graphql system

Development using sandbox

$ npm run sandbox

Sandbox is a development mode that allows you to review live changes while modifying diagram's code in a hot-reload fashion. After running the command above, you can fool around with component's code in /src/ directory and see immediate results in the browser after navigating to http://localhost:8080.

Add to your project

$ npm install @slothking-online/diagram

Develop & Contribute

$ git clone https://github.com/slothking-online/diagram
$ npm install
$ npm run start

Define spacebar menu actions

import { Graph } from '@slothking-online/diagram';
import * as React from 'react';
let allCategories = [
    name: 'middlewares',
    items: [
        name: 'middleware',
        type: 'middleware',
        inputs: [
            name: ''
        outputs: [
            name: ''

export const MyGraphComponent = () => <Graph categories={allCategories} />;

Now if you press spacebar when mouse is on the graph you get this menu, which creates nodes.

Serialization of data

  serialize={(nodes, links) => {
    //here you receive nodes and links after every graph change
  validate={(node1, node2) => {
    // not necessary but you can add custom validation function between every node


  • Create - press and hold Spacebar and choose category -> node and Left Mouse Button click
  • Pan - press and hold Left Mouse Button and move mouse
  • Move - press and hold Left Mouse Button on node
  • Rename - To rename node simply start typing when one node is selected
  • Connect - Click and hold desired node output and move it to other node's output then release mouse button IMPORTANT: Every node is connectable only if it creates valid schema. Experiment to test
  • Node Properties - Click right mouse button on node
  • CMD/CTRL + Left Mouse Button Click - select multiple nodes
  • Delete - Click delete button when node/nodes are selected or right click -> delete

Keyboard shortcuts

  • CMD/CTRL + Mouse Click - Select multiple nodes
  • CMD/CTRL + L - Beautify diagram
  • CMD/CTRL + Z - Undo
  • CMD/CTRL + Y - Redo
  • CMD/CTRL + D - Duplicate Nodes
  • CMD/CTRL + F - Find nodes
  • ALT/OPTION + V - Find duplicate definitions(Validate)
  • ALT/OPTION + LMB on cloned node - navigate to definition
  • RIGHT MOUSE CLICK on node - node actions


Feel free to contact us and contribute in graphql editor project. aexol@aexol.com

  1. fork this repo
  2. Create your feature branch: git checkout -b feature-name
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request