Demos

Here are a few demos with different configurations to showcase uses of diagram maker. Read more about diagram maker configurations here.

  • Left Right Rectangular : Uses a LeftRight connector placement with rectangular shape nodes by default.
  • Top Bottom Rectangular : Uses a TopBottom connector placement with rectangular shape nodes by default.
  • Boundary Circular : Uses a Boundary connector placement with circular shape nodes by default.
  • Layout : Uses an initial graph that is setup to test the layout APIs.
  • Action Interceptor : Uses an action interceptor to add every new node that is dragged in with an extra attribute. The extra attribute is a boolean indicating whether the node that was dragged is an odd numbered new node or not. For rectangular nodes, the odd numbered nodes have a Red colored outline and the even numbered ones have a blue outline. Furthermore, when new edges are created, it creates the reverse edge 1 second later.

The code for these demos can be found here.