Dedicated visualization component



I need to embed GRAKN graphs into a web application (Meteor or NodeJS). I have working visualizations for Neo4J (sigma-, d3- and vis-based), but could also / would prefer to use a widget like the one you have on your webpage, i.e. similar to the visualizer, but without the controls. What is the best way to accomplish that? Is there a way to have a layer on TinkerPop that can in a generic way visualize any underlying graph with a JS library? Or if I have to fork the visualizer and rip out all unnecessary components - do you have some pointers for me?

Thank you in advance.

Best wishes,


I join the issue: is any methods exists to customize web interface goes with grakn to adapt elements look to my needs ? Or just some external visualization tool able to plot elements traditionally used in computer science: UML diagrams, flowcharts, GUI shemes, deploy charts and so on.

This style description can be done using graph db itself: describe styles as part of db, and link styles with elements via visualization properties, so web interface subsystem can synthesize visual representation using grakn itself.


Hi @fpollok,

thanks for asking.

Our visualisation tool is vis-based.
We don’t have a modular widget yet, in future we are definitely going to make a pluggable visualiser available, but for now you would need to fork our grakn-dashboard and take out the parts you need.

Here are some pointers in case you want to dig in our code:

  • In src/components/graphPage you will find the graphPage.vue. In the graphPage we initialise a new Vis graph and we instantiate the CanvasHandler, which is in charge of sending queries to Grakn Engine and handling events happening on the canvas.
  • The Vis network element is wrapper in our Visualiser class, which is located in src/js/visualiser/Visualiser,
    here you can find useful methods.
  • All the responses from Grakn Engine to the Dashboard are formatted in HAL format, and you can see how the CanvasHandler parses the responses using the HALParser (located in src/js/HAL) module before adding new data to the Visualiser.

The code still needs quite some refactoring and cleaning, but it should be fairly understandable, feel free to DM me in our GRAKN community Slack channel if you need more information about this part of the project.

And the same for @dponyatov, we still don’t have anything pluggable and customisable, but our UI is in VueJS, so feel free to fork and change whatever you need, you will find CSS code in every .vue file.
But please also free to DM in the Slack community channel.