☊ Tool for making node graphs. Inspired by dependency graph. Used mainly for automation services 📈
Diagram is the tool for displaying node based systems.
This package contains one dependency.
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()
import { Diagram, NodeDefinition, AcceptedNodeDefinition } from 'graphsource'
this.diagram = new Diagram(document.getElementById("root"));
this.diagram.setNodes
]);
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
});
$ git clone https://github.com/graphql-editor/diagram
$ npm install
$ npm run start
$ npm install graphsource
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:
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
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
To generate docs simply type:
npm run docs
Feel free to contact us and contribute in graphql editor project. [email protected]
Here is Live Demo of diagram used to create node based graphql system