HTMLGraph

Custom Edge Shape

A custom edge shape can be defined by providing a factory function in the setDefaults method of CanvasBuilder.

    
const element = document.getElementById('canvas');

const canvas = new CanvasBuilder()
  .setElement(canvas)
  .setDefaults({
    edges: {
      shape: () => new MyCustomEdgeShape(),
    },
  })
  .build();
Custom Edge with Label

You can also apply a custom shape to a specific edge using the addEdge and updateEdge methods.

    
canvas.addEdge({
  from: "port-1",
  to: "port-2",
  shape: new MyCustomEdgeShape(),
})

  
    
canvas.updateEdge("edge-1", {
  from: "port-3",
  to: "port-4",
  shape: new MyCustomEdgeShape(),
})