When users drag shapes around a diagram, they expect connector lines to automatically reroute themselves intelligently. What seems like simple line-drawing is actually one of the most complex algorithmic challenges in building a diagramming platform.
While developing Modeldraw, I spent weeks perfecting the auto-layout system for connector routing. Here’s how I solved the problem of making diagrams look professional automatically, without user intervention.
The Challenge: Making Connections Look Natural
Every time a user moves a shape, the system must instantly recalculate optimal paths for all connected lines. This happens in real-time, often dozens of times per second during drag operations. The algorithm needs to be both fast and visually intelligent.
Poor auto-layout creates messy diagrams with overlapping lines and awkward angles. Good auto-layout produces clean, professional-looking diagrams that communicate clearly.
Types of Connector Patterns
The auto-layout system needs to handle different connector styles, each with specific use cases:
Straight Connectors
Direct lines between shapes with no bends. Simple but only works when shapes align well and no obstacles exist between them.
One-Bend Connectors
Single corner connecting two shapes. Useful when shapes are offset horizontally or vertically but close enough for a clean corner connection.
Two-Bend Connectors
The most complex category, subdivided into:
- Zig-zag connectors — Sharp angles that navigate between shapes efficiently
- U-shape connectors — Loop around obstacles with smooth curves
Each type serves different spatial relationships between connected elements.
The Algorithm: A Multi-Stage Approach
Rather than trying to solve everything at once, I developed a staged algorithm that handles connectors by complexity:
Stage 1: Straight Lines
Evaluate direct connections first. If no obstacles exist and the visual result looks clean, use the simplest solution.
Stage 2: One-Bend and Zig-Zag
When straight lines won’t work, calculate both one-bend and zig-zag options. A scoring function determines which produces the better visual result.
Stage 3: U-Shape Fallback
For complex scenarios where other options fail, use U-shape connectors that loop around obstacles.
This prioritization ensures the algorithm always chooses the simplest effective solution.
The Scoring System: Teaching Algorithms Visual Aesthetics
The most challenging aspect was creating a scoring function that mimics human aesthetic judgment. The system awards bonuses and penalties based on visual principles:
Bonus Points:
- Connectors that maintain consistent directions (all entering from the same side)
- Connections that follow diagram flow patterns
- Zig-zag patterns for certain shape types that expect them
Penalty Points:
- Intersections with other connectors
- Overcrowded connection sides (too many lines entering one edge)
- Unnecessary bends that could be avoided
Each potential connector path gets scored, and the system selects the highest-scoring option. This mathematical approach to aesthetics produces consistently clean results.
Domain-Specific Requirements
Different diagram types impose unique constraints that the algorithm must respect:
UML Diagrams
Generalization relationships must always use straight lines with specific arrow styles. The algorithm can’t optimize these for visual appeal — semantic correctness takes precedence.
Flowcharts
Decision shapes require connectors to exit from specific sides based on true/false logic. Some connectors anchor to other connectors rather than shapes, creating complex branching patterns.
Activity Diagrams
Fork and join elements only accept connections from particular edges, limiting routing options.
The auto-layout system needed to understand these domain rules while still producing visually optimal results within the constraints.
Post-Processing: The Finishing Touches
After the main algorithm completes, “fixer” algorithms handle refinements:
Anchor Distribution
When multiple connectors attach to one shape side, spread them evenly rather than clustering them together.
Parallel Line Separation
Multiple U-shape connectors between the same shapes get different arc distances to avoid overlap.
Intersection Resolution
Post-process to eliminate any remaining connector intersections that the main algorithm missed.
These refinements transform algorithmically-correct layouts into polished, professional diagrams.
Lessons Learned
Building auto-layout taught me that algorithmic aesthetics require careful balance between mathematical optimization and domain expertise. The scoring system needed constant tuning based on real user diagrams to match human expectations.
The biggest insight: users don’t want perfect mathematical solutions — they want results that “feel right” for their specific diagram type. Context matters more than pure optimization.
Conclusion
Auto-layout algorithms sit at the intersection of computer graphics, user experience, and domain knowledge. The system now running in Modeldraw handles thousands of connector calculations seamlessly, letting users focus on their ideas rather than line positioning.
Building this system reinforced why specialized diagramming tools matter — the complexity hidden behind “simple” automatic layout represents months of engineering work that general-purpose drawing tools simply can’t match.
You can see the auto-layout system in action at modeldraw.com, where it handles everything from UML class diagrams to agile workflow maps.
Top comments (0)