Custom Styles Tutorial

Custom Styles Demo

This demo shows how to create custom styles for nodes, edges, labels, ports, and edge arrows. Styles can use all the powerful visualisation features of Scalable Vector Graphics (SVG).

Things to Try

  • Create new nodes in the canvas and inspect their styles in code.
  • Create edges between nodes and inspect the custom style of the edge and the arrows in code.
  • Click "Modify Colors" to change the color of the nodes and indirectly the color of the outgoing edges.
  • Note that the labels look like nodes connected via an edge, however they are ordinary labels that reuse the edge style for drawing a node to label connection. Select and drag a label to move them to different locations.
  • Also note that the label style depends on the current zoom. Zooming closer to the label reveals an edit label button that, when clicked, starts label text editing.
  • Selecting an edge changes its color - the traditional selection indicator is not rendered.