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 startAdd to your project
$ npm install graphsourceListening 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 anymorethis.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 anymoreSerialisation 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 firedDocs
To generate docs simply type:
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. artur@graphqleditor.com
- fork this repo
- Create your feature branch: git checkout -b feature-name
- Commit your changes: git commit -am 'Add some feature'
- Push to the branch: git push origin my-new-feature
- Submit a pull request
Used by
Here is Live Demo of diagram used to create node based graphql system
