Create Diagrams with Shapes and Connectors

React Diagram shapes and connectors provide the core visual elements for creating interactive diagrams. Shapes represent items, actions, or concepts, while connectors show relationships and process flow between them. Ports, routing, connector decorators such as arrowheads, and grouping provide additional control over how these elements are presented.

React Diagram supports straight, right-angled orthogonal, and curved Bezier connectors for different relationship patterns. Orthogonal connectors can use line routing to avoid diagram elements, while line bridges, overlap avoidance, and decorators such as arrowheads help keep complex connection paths understandable.

Yes. Orthogonal connectors can use line routing to find paths around diagram nodes. Bridges and overlap avoidance can also help distinguish crossing or overlapping connector segments in dense diagrams.

Yes. React Diagram provides predefined shapes for common visual models, such as flowcharts, and supports custom nodes for specialized requirements. Custom nodes can use visual content and reusable templates, allowing built-in and application-specific elements to appear in the same diagram.

Ports let connectors attach to predefined points on a shape or node instead of choosing an attachment point automatically. This keeps connections in predictable locations and makes diagrams with several connectors easier to organize and understand.

Yes. Related nodes and connectors can be combined into a group and managed as one diagram element. Grouping helps organize composite components and keeps connected elements together within larger diagrams.