This is the minimal code that’s needed to display a graph on a web page
using yFiles for HTML.
First we make sure that there is a
div element on the HTML page in
the document. It will host the graph component visualization.
We also need to make sure that the
div actually has a positive size.
We can do this via CSS, but any technique that assigns a positive size to the
element would work:
Now, in the code we can initialize the GraphComponent and wire it
up with the existing
const graphComponent = new GraphComponent('#graphComponent')
And just to make this a little less boring and so that we can see something in the
view, we add a node with a label and center it in the view. This, of course, is
const node = graphComponent.graph.createNode()
The yFiles demo and tutorial applications use additional scripts and CSS
(demo-ui) to reduce the amount of boilerplate code that is needed to get a
good-looking demo app that shows the relevant features. All code samples
included in this distribution can be implemented using plain HTML and
For a minimal example of using yFiles for HTML to display a graph on a web page, please
take a look at the Basic Module Loading Demo.