Need help with diagram?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

graphql-editor
501 Stars 42 Forks MIT License 401 Commits 10 Opened issues

Description

☊ Tool for making node graphs. Inspired by dependency graph. Used mainly for automation services 📈

Services available

!
?

Need anything else?

Contributors list

No Data

Graphsource

npm Commitizen friendly npm downloads

Diagram is the tool for displaying node based systems.

This package contains one dependency.

Getting started

Javascript

import { Diagram } from 'graphsource'
class App {
  constructor() {
    const root = document.getElementById("root");
    if (!root) {
      throw new Error("No root html element");
    }
    this.diagram = new Diagram(root, {});
    this.diagram.setNodes([
        {
            "name": "Query",
            "type": "type",
            "id": "1",
            "description": "",
            "inputs": [
                "2"
            ],
            "outputs": [],
            "options": [
                "query"
            ]
        },
        {
            "name": "pizzas",
            "type": "Pizza",
            "id": "2",
            "inputs": [],
            "outputs": [
                "2"
            ],
            "description":"get all pizzas a a a from the database",
            "options": [
                "array",
                "required"
            ]
        },
        {
            "name": "Pizza",
            "type": "type",
            "id": "3",
            "description": "Main type of the schema",
            "inputs": [
                "4",
            ],
            "outputs": [],
            "options": []
        },
        {
            "name": "name",
            "type": "String",
            "id": "4",
            "inputs": [],
            "outputs": [
                "3"
            ],
            "options": [
                "required"
            ]
        }
    ])
  }
}
new App()

TypeScript

import { Diagram, NodeDefinition, AcceptedNodeDefinition } from 'graphsource'
this.diagram = new Diagram(document.getElementById("root"));
this.diagram.setNodes
]);

Light mode

Diagram is in dark mode by defult, but You can easily change the theme to light one. Just add the options while creating Diagram.

import { Diagram, DefaultDiagramThemeLight } from 'graphsource'
this.diagram = new Diagram(document.getElementById("root"),
{
  theme: DefaultDiagramThemeLight
});

Develop & Contribute

$ git clone https://github.com/graphql-editor/diagram
$ npm install
$ npm run start

Add to your project

$ npm install graphsource

Listening to diagram events

It's possible to attach to certain events that occur inside the diagram. You can do it by using familiar

.on()
syntax, e.g.:
this.diagram = new Diagram(/* ... */);
/* ... */
this.diagram.on(EVENT_NAME, () => {
  // callback
});

Here is the list of all subscribable events: * ViewModelChanged - fires when a view model (pan, zoom) was changed * NodeMoving - fires when node is being moved * NodeMoved - fires when node stops being moved * NodeSelected - fires when node(s) was selected * UndoRequested - fires when undo was requested * RedoRequested - fires when redo was requested

You can unsubscribe your listener either by using

.off()
, or by invoking unsubscriber function that is being returned from
.on()
:
this.diagram = new Diagram(/* ... */);
const callback = (nodeList) => {
  console.log('Nodes are moving!', nodeList);
};
this.diagram.on('NodeMoving', callback); // callback will be fired
// ...
this.diagram.off('NodeMoving', callback); // callback will not be fired anymore
this.diagram = new Diagram(/* ... */);
const callback = () => {
  console.log('node moving!');
};
const unsubscriber = this.diagram.on('NodeMoving', callback); // callback will be fired
// ...
unsubscriber(); // callback will not be fired anymore

Serialisation of data

const diagram = new Diagram(/* ... */);
const callback = ({nodes, links}) => {
  // Here you receive nodes and links after Serialisation
};
this.diagram.on('DataModelChanged', callback); // callback will be fired

Docs

To generate docs simply type:

npm run docs

Controls

  • Pan - press and hold Left Mouse Button and move mouse
  • Move - press and hold Left Mouse Button on node
  • CLICK ON NODE TYPE - if node is a children of other node it centers view on parent node
  • SHIFT + Left Mouse Button Click - select multiple nodes

Contribute

Feel free to contact us and contribute in graphql editor project. [email protected]

  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

Used by

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.