TL;DR: Connector lines overlapping all over your diagram? This guide shows how to clean them up using Syncfusion React Diagram’s AvoidLineOverlapping with LineRouting. Learn how to keep connectors smart, readable, and neatly routed, complete with a copy-ready example you can plug into workflow, flowchart, or circuit-style diagrams.
Readable diagrams are essential when working on workflow designers, circuit editors, process maps, or architecture visualizations. Without clarity, even the best UI becomes frustrating to use. As the number of connections grows, connectors often stack on the same route, creating visual noise.
This guide shows how to prevent overlapping connector lines in React diagrams using the AvoidLineOverlapping API in Syncfusion® React Diagram.
What is line overlapping (and why it hurts UX)?
Line overlapping happens when multiple connectors take the same (or nearly the same) route between nodes. When lines sit directly on top of each other, users can’t tell which connector goes where.
You’ll see this often in:
- Repetitive data flows (many nodes sharing the same upstream/downstream path).
- Multi-bit circuit diagrams (parallel signals).
- Dense process maps.
- Diagrams with lots of “fan-in / fan-out” connections.
How Syncfusion avoids connector overlap
AvoidLineOverlapping reduces clutter by:
- Detecting when orthogonal connector segments overlap.
- Applying small offsets/detours so each connector gets a distinct visible path.
It typically re-runs when:
- You add new connectors.
- You move nodes.
- Multiple connectors share the same corridor.
- Layout updates occur.
Result: Cleaner diagrams with less manual connector nudging.
Prerequisites
Before you start:
- Install Node.js and NPM packages.
- Install Syncfusion React Diagram Library (@syncfusion/ej2-react-diagrams).
Note: New to Syncfusion React Diagram? Start with the official getting-started guide.
Configuration checklist (required)
Before implementing the Avoid Line Overlapping feature, ensure:
-
Enable routing in diagram constraints
You need routing enabled via constraints (
LineRouting), as shown in the code snippet below:
C#
DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.LineRouting
-
Use orthogonal connectors
AvoidLineOverlappingis designed for orthogonal routing. Ensure your connectors are set to use orthogonal paths.
How to prevent connector overlap in React Diagram
Add DiagramConstraints.AvoidLineOverlapping to your DiagramComponent and inject the required services. This configuration ensures that your diagrams automatically manage connector paths to prevent overlapping without manual intervention.
Here’s how you can do it in code:
JavaScript
import * as React from "react";
import {
AvoidLineOverlapping,
ConnectorModel,
DiagramComponent,
DiagramConstraints,
Inject, LineRouting,
NodeModel,
PointPortModel,
PortVisibility,
ShapeAnnotationModel
} from "@syncfusion/ej2-react-diagrams";
<DiagramComponent id="diagram"
ref={diagramRef}
width={"100%"}
height={"580"}
constraints={DiagramConstraints.Default | DiagramConstraints.LineRouting | DiagramConstraints.AvoidLineOverlapping}
nodes={nodes}
connectors={connectors}>
<Inject services={[LineRouting, AvoidLineOverlapping, Snapping]}></Inject>
</DiagramComponent>
What this does:
-
DiagramConstraints.LineRoutingturns on routing logic for connectors. -
DiagramConstraints.AvoidLineOverlappingoffsets connectors when overlaps are detected. - Inject registers the runtime services needed for routing and overlap avoidance.
Complete example: custom nodes, ports, and orthogonal connectors
The code example below shows a practical setup where ports and orthogonal connectors are defined explicitly, common in circuit-style or workflow-style diagrams.
JavaScript
import * as React from "react";
import {
AvoidLineOverlapping,
type ConnectorModel
DiagramComponent,
DiagramConstraints,
Inject,
LineRouting,
type NodeModel,
type PointPortModel,
PortVisibility,
Snapping
} from "@syncfusion/ej2-react-diagrams";
function createPort(id: string, offsetX: number, offsetY: number): PointPortModel {
return {
id,
offset: { x: offsetX, y: offsetY },
visibility: PortVisibility.Visible
};
}
export default function AvoidOverlapDiagram() {
const nodes: NodeModel[] = [
{
id: "A",
offsetX: 150,
offsetY: 150,
width: 120,
height: 60,
annotations: [{ content: "Node A" }],
ports: [
createPort("A_out1", 1, 0.35),
createPort("A_out2", 1, 0.65)
]
},
{
id: "B",
offsetX: 350,
offsetY: 200,
width: 120,
height: 60,
annotations: [{ content: "Node B" }],
ports: [
createPort("B_in1", 0, 0.35),
createPort("B_in2", 0, 0.65)
]
}
];
const connectors: ConnectorModel[] = [
{
id: "c1",
sourceID: "A",
sourcePortID: "A_out1",
targetID: "B",
targetPortID: "B_in1",
type:"Orthogonal",
},
{
id: "c2",
sourceID: "A",
sourcePortID: "A_out2",
targetID: "B",
targetPortID: "B_in2",
type:"Orthogonal"
}
];
return (
<DiagramComponent
id="diagram"
width={"700px"}
height={"580px"}
nodes={nodes}
connectors={connectors}
constraints={
DiagramConstraints.Default |
DiagramConstraints.LineRouting |
DiagramConstraints.AvoidLineOverlapping
}
>
<Inject services={[LineRouting, AvoidLineOverlapping, Snapping]} />
</DiagramComponent>
);
}
What to notice:
- Both connectors would naturally try to share a similar route between Node A and Node B.
- With
AvoidLineOverlapping, the component offsets them so both paths remain visible.
Why this feature matters (practical wins)
- Better readability: Users can trace each connection without guessing.
- Less manual cleanup: Connectors adjust when nodes move, or new links appear.
- Scales to dense diagrams: Helpful for fan-in/fan-out patterns and multi-connector corridors.
GitHub reference
For a complete working sample, refer to the GitHub demo to avoid line overlapping.
Frequently Asked Questions
1. Does AvoidLineOverlapping work with all connector types?
A: No. AvoidLineOverlapping is designed specifically for Orthogonal connectors. If your connectors use Straight or Bezier routing, the overlap‑avoidance logic will not apply.
2. Will enabling AvoidLineOverlapping affect diagram performance?
A: In large diagrams with many connectors, enabling AvoidLineOverlapping may introduce slight routing overhead because the algorithm recalculates and offsets connectors dynamically. However, in typical workflow and process diagram scenarios, the performance impact is minimal and optimized to run efficiently with LineRouting.
3. Do connectors automatically re-adjust when nodes move?
A: Yes. When a node is moved, resized, or new connectors are added, the AvoidLineOverlapping logic re-runs. This ensures connectors continuously avoid overlapping without requiring manual adjustments from the user.
Conclusion
Thank you for reading! To prevent connector overlapping in React Diagram, enable LineRouting, use orthogonal connectors, and turn on AvoidLineOverlapping. You’ll get cleaner visuals with far less manual connector work, especially as your diagrams scale in complexity.
For deeper configuration options, see the official Syncfusion React Diagram documentation.
If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.
You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!
Related Blogs
- Build AI-Powered Text-to-Flowchart Converter Using OpenAI and React Diagram Library
- Easily Create UML Activity Diagrams with React Diagram Library
- Create AI-Assisted Mind Maps Using OpenAI and React Diagram Library
- Build Interactive UML Class Diagrams in React
This article was originally published at Syncfusion.com
Top comments (0)