Detect Diagram Crossings

Detect Diagram Crossings

Purpose

Provide a rigorous, multi-method approach to detecting edge crossings and overlaps in SVG flowchart diagrams. This skill combines mathematical geometric analysis with visual inspection to ensure diagrams have clean, crossing-free layouts.

When to Use

• Validating Diagram Layouts: After creating or modifying workflow diagrams
• Quality Assurance: Before committing diagram changes to ensure no crossings
• Debugging Visual Issues: When users report crossing/overlap problems
• Comparative Analysis: Testing multiple layout versions to find the best one

Detection Methods

Method 1: Parametric Line Intersection (Mathematical)

The primary detection method uses parametric line equations to mathematically determine if two line segments intersect.

Algorithm:

1. Parse SVG paths into line segments (sequences of points connected by lines)
2. For each pair of line segments from different paths:
   • Calculate intersection using parametric equations:
     • Line 1: P = P1 + t(P2 - P1)
     • Line 2: P = P3 + u(P4 - P3)
   • Solve for parameters t and u
   • Intersection occurs if 0.01 < t < 0.99 AND 0.01 < u < 0.99
3. Exclude endpoint connections (valid node-to-node connections)
4. Report all internal segment intersections as crossings

Why This Works:

• Mathematically precise: detects exact intersection points
• Coordinate-based: doesn't rely on visual rendering
• Tolerance-aware: excludes near-endpoint intersections (within 1% of segment length)

Limitations:

• May not detect visual overlaps that aren't true mathematical intersections
• Doesn't account for stroke width or arrow markers
• Requires well-formed SVG path data

Method 2: Node-Path Proximity Analysis

Detects when paths pass through or very close to node bodies (not at connection points).

Algorithm:

1. Extract all node bounding boxes from <rect> elements: (x, y, width, height)
2. Parse each path's d attribute into individual line segments
3. For EACH segment of EACH path (not just waypoints):
   • Vertical segments (same x, different y): Check if x is within any node's x-range AND the y-range of the segment overlaps with the node's y-range
   • Horizontal segments (same y, different x): Check if y is within any node's y-range AND the x-range of the segment overlaps with the node's x-range
   • Diagonal segments: Check if the line passes through the node's bounding box
4. For each detected intersection:
   • Exclude segments that START or END at a node edge (valid connection points)
   • Report all segments that PASS THROUGH a node's interior

Critical: Segment-by-Segment Analysis A multi-segment path like M 890 1180 L 550 1180 L 550 820 L 890 820 has THREE segments:

1. Horizontal: (890,1180) → (550,1180) at y=1180
2. Vertical: (550,1180) → (550,820) at x=550
3. Horizontal: (550,820) → (890,820) at y=820

Each segment must be checked independently against ALL nodes. A single path can cross MULTIPLE nodes.

Why This Works:

• Catches paths that visually obscure nodes
• Identifies routing issues where paths don't avoid nodes
• Complements line intersection by checking path-node relationships
• Detects all nodes crossed by multi-segment paths, not just the first one

Method 3: Path Overlap and Shared Point Analysis

Detects paths that share segments or start/end points, causing visual confusion.

Algorithm:

1. Extract all path endpoints (start and end coordinates)
2. Extract all path segments with their coordinates
3. Check for:
   • Shared endpoints: Multiple paths starting or ending at exact same point
   • Overlapping segments: Two paths sharing the same line segment (same x or y and overlapping range)
   • Convergence points: Multiple paths arriving at the same node edge within close proximity

Why This Works:

• Identifies visual clutter where paths merge
• Catches paths that are hard to distinguish
• Highlights areas needing offset routing for clarity

Method 4: Routing Quality Analysis

Detects suboptimal path routing that could be improved for visual clarity.

Algorithm:

1. Shared Start Points: Check if multiple paths originate from the exact same coordinate

   • Example violation: UAT Tester → UAT PR and UAT Tester → Developer both starting at (890, 1180)
   • Fix: Offset one path to start from a different point on the same node edge

2. Off-Center Connections: For nodes with only one incoming/outgoing path on an edge, verify the connection is centered

   • Example violation: Path connecting to lower-left of a node instead of center-left
   • Fix: Adjust path endpoint to center of the edge

3. Unnecessary Segments: Check if paths use more segments than necessary

   • Example violation: 4-segment path when a 2-segment orthogonal path would work without crossings
   • Fix: Simplify the path to use the minimum number of segments

4. Suboptimal Routes: Check if shorter intersection-free routes exist

   • Example violation: UAT Tester → Developer going left-down-right instead of right-up-left
   • Fix: Reroute using the shorter valid alternative

Why This Works:

• Ensures visual consistency and professionalism
• Reduces clutter by minimizing unnecessary path complexity
• Improves readability by using the most direct valid routes

Method 5: Visual Screenshot Analysis

Uses actual rendered output to catch visual issues that math might miss.

Algorithm:

1. Capture high-resolution screenshot of rendered diagram
2. Visually inspect for:
   • Lines crossing over each other
   • Paths obscuring node labels
   • Arrow markers colliding with nodes/paths
   • Color overlaps making paths indistinguishable
3. Document specific coordinates of visual crossings

Why This Works:

• Catches rendering artifacts (antialiasing, stroke width effects)
• Validates user-perceived quality
• Identifies issues in arrow markers and decorations
• Accounts for font rendering and text overlaps

Systematic Detection Checklist

When detecting issues manually (without scripts), follow this checklist:

Step 1: Build Node Inventory

Create a table of ALL nodes with their bounding boxes:

| Node Name | x-min | x-max | y-min | y-max |
|-----------|-------|-------|-------|-------|
| Developer | 780   | 1000  | 780   | 820   |
| Tech Writer | 490 | 710   | 960   | 1000  |
...

Step 2: Parse Each Path into Segments

For each path, break down the d attribute into individual segments:

Path: "M 890 1180 L 550 1180 L 550 820 L 890 820"
Segments:
  1. Horizontal at y=1180: x from 890 to 550
  2. Vertical at x=550: y from 1180 to 820
  3. Horizontal at y=820: x from 550 to 890

Step 3: Check EVERY Segment Against EVERY Node

For each segment, systematically check against all nodes:

• Vertical segment at x=X, y from Y1 to Y2:

  • Does X fall within [node.x-min, node.x-max]?
  • Does [Y1, Y2] overlap with [node.y-min, node.y-max]?
  • If BOTH yes → CROSSING DETECTED

• Horizontal segment at y=Y, x from X1 to X2:

  • Does Y fall within [node.y-min, node.y-max]?
  • Does [X1, X2] overlap with [node.x-min, node.x-max]?
  • If BOTH yes → CROSSING DETECTED

Step 4: Check Path Start/End Points

For each path, check if its start or end point is shared with other paths:

• Same exact coordinates = SHARED ENDPOINT
• Different paths arriving at same node edge within 5px = CONVERGENCE

Step 5: Check Path-Path Intersections

For each pair of paths, check if their segments intersect:

• Two horizontal segments at same y with overlapping x-range = OVERLAP
• Two vertical segments at same x with overlapping y-range = OVERLAP
• Horizontal and vertical segments that cross = CROSSING

Hard Rules

Must

• Build a complete node inventory FIRST before analyzing any paths
• Parse each path into individual line segments - never analyze paths as single entities
• Check EVERY segment against EVERY node - a single path can cross multiple nodes
• Run all detection methods for thorough validation
• Report exact coordinates of intersection points
• Identify which paths AND which specific segments are involved in each crossing
• Calculate parametric intersection parameters (t, u values) for path-path crossings
• Test with actual SVG data from the diagram file
• Create visual annotations showing crossing locations
• Report shared endpoints and overlapping path segments as separate issues

Must Not

• Rely on only one detection method
• Report endpoint connections as crossings
• Skip proximity analysis
• Ignore visual rendering validation
• Treat a multi-segment path as a single line - always decompose into segments
• Stop after finding one crossing on a path - continue checking remaining segments
• Assume segment routing based on comments - verify actual coordinates

Testing Approach

Test 1: Node Inventory Verification

Build the complete node inventory table and verify all nodes are captured.

Test 2: Path Segment Decomposition

Decompose ALL paths into segments and verify segment count matches expected.

Test 3: Systematic Segment-Node Checking

For each segment, check against ALL nodes (not just visually nearby ones).