Arrow Demo

The Arrow class provides several properties to customize arrows. It can render ArrowTypes and visualize different arrow shapes. This demo demonstrates edges with all arrow types specified in the edge labels.

Besides shapes, arrows can also be customized by changing its fill, stroke and length. The widthScale and lengthScale of arrows can also be adjusted to change its aspect ratio.

One can also create custom arrows by implementing a visualization based on the IArrow interface. See Step 12: Custom Arrow in Tutorial: Edge Style Implementation for an example implementation.

Things to Try

• Drag the Edge Thickness slider in the toolbar to observe the change of edge thickness and arrow sizes.
• Switch between "filled" and "outlined" using the Arrow Style dropdown menu in the toolbar to observe the arrow style with or without fill.
• Create new edges between nodes in the graph to observe the random arrows on the newly created edges.