Case

16 examples

Practices

16 examples

Agent Flow

Flow Chart

DAG for AI Model

DAG for Data Processing

ER

MindMap

BPMN

ELK

Organizational Charts

Organizational Charts

UML Class

Expand/Collapse the Tree

Virtual Rendering for Multiple Nodes

Batch Dragging Multiple Nodes with Selection

timeline

complexTimeline

Node

40 examples

Native Node

8 examples

Rectangle

Ellipse

Circle

Path

Polygon

Polyline

Image

Text Block

Custom Node

5 examples

Custom Node with SVG

Cylinder

Custom Node with SVG

Custom Node with React

Custom Switch Node

Port

16 examples

Default Port

Use Group to Custom Port Style

Add or Remove Port Dynamically

Connect to Port

Render Port with React

Label of Port

Absolute Position of Ports

Uniform Distributed Ports Along the Rectangle

Uniform Distributed Ports Along the Line

Uniform Distributed Ports Along the Ellipse

Ports Along the Ellipse

Auto Rotate Ports Along the Arc

Custom the Position of Ports

Place Label On the Side of Port

Place Label Inside/Outside of Node

Place Label Outside of Ellipse

Group

6 examples

Embedding Nodes

Auto Update Edge's Parent

Embedding by Drag and Drop

Restrict the Movement of Child Nodes

Auto Expand/Shrink the Parent Node

Collapse/Expand the Parent Node

Node Tools

5 examples

Custom Button

Delete Button

Boundary Box

Text Editor

ToolTip For Port

Edge

39 examples

Style

5 examples

Default Edge

Gradient Edge

Cross Filled Edge

Custom Shape On the Edge

Custom Click Event

Marker

5 examples

Native Markers

Custom Marker with Path

Custom Marker with Base Shapes

Custom Marker with Image

Custom Marker with Complexity Path

Label

5 examples

Use SVG to Render Label

Use HTML to Render Label

Use React to Render Label

Render Multiple Labels

Label Along Path

Router

9 examples

Normal Router

Orth Router

Orth Router With Vertices

ER Router

ER Center Router

Manhattan Router

Metro Router

OneSide Router

Custom Random Router

Connector

7 examples

Normal Connector

Rounded Connector

Smooth Connector

Jumpover Connector

Quadratic Bessel Curve

Custom Wobble Connector

Multiple Smooth Edges

Edge Tools

8 examples

Vertices

Segments

Button

Remove Button

Arrowheads

Boundary

ContextMenu

Tooltip

Animation

11 examples

Usage

8 examples

Basic usage

Composition animation

Control animation playback

Edge animation

Custom attribute animation

Breathing effect

ripple effect

CSS animation

Case

3 examples

OSCP activity

Cool scatter Animation

Route planning graph

Layout

7 examples

General Layout

6 examples

Grid

Circular

Dagre

Ellipse

Concentric Circles

Force

Tree Layout

1 examples

Mindmap