- ×
JS tool for making node graphs. Inspired by dependency graph
Filed under application tools › utilitiesShow AllGraphsource
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. 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