Graph Settings

Shape Fill Effect

Stroke

Fill ContentArea Effect

Stroke

Color Thickness

Position Background Fill Height Width Slope Padding Corner Radius

Icon Foreground Fill Icon Background Background Fill

Style Source arrow Target arrow Effect Bend Smoothing Height

Stroke

Color Thickness

Shape Text Color Fill Color Effect Render Type Oversampling Horizontal Padding Vertical Padding

Stroke

Demo

WebGL Styles

This demo shows the available styles for nodes, edges and labels in WebGL rendering.

The initial graph displays the various node shapes in the columns and the node effects, edge and arrow types in the rows.

The side panel shows the various configuration options for the graph items.

Click on a node, edge, or label to open the corresponding configuration options in the sidebar. Change the settings and observe how the selected graph items change.
Create new nodes, edges, or labels. New items will use the current values from the corresponding configuration options in the sidebar.