Improved Flowchart Routing in Visio 2010

When creating and maintaining flowcharts, a pain point users suffer from is ensuring that the connectors between shapes look good. Visio introduced the dynamic connector many releases ago to help simplify diagram maintenance. Dynamic connectors in combination with dynamic glue allow Visio to choose the sides of shapes to glue your connectors for the best looking results.

In Visio 2010 we made improvements to Visio’s routing engine to address some common flowcharting pain points. (For more on the dynamic connector and why you should use dynamic glue, see this previous post titled “Gluing It All Together“. )

Improving Flowchart Readability

Clarity is important in flowcharts. Overlapping connectors flowing in opposite directions can create ambiguity about the meaning of the diagram. It is easy to get into a situation where two connectors appear visually to be connected, but were not explicitly connected by the diagram author. Visio 2010’s routing engine detects such ambiguous situations and relocates connectors to actively avoid them.

Consider the example below where I draw two dynamic connectors: one from shape A to B and the other from B to C. In Visio 2007, this leads to an ambiguous drawing, where it appears as if shape A is connected to shape C. Visio 2010 moves the connector between A and B to an alternate side of shape B to resolve the ambiguity.

incoming conflict

We made this design change based on user feedback. It scales to handle more than just a few connectors, and allows connectors to overlap when they are flowing in the same direction.

A consequence of this change is that if you open a diagram that was created in older versions of Visio in Visio 2010, as you edit your diagram, you may see connectors relocate to different sides of shapes. Note that Visio doesn’t move glue points of connectors that are statically glued.

Relaxing Constraints on Flowchart Direction

Visio flowcharts that use the “Flowchart” routing style have a routing direction, like “Top to Bottom” or “Left to Right”. In flowchart routing, this controls what sides of shapes dynamic connectors (mostly) connect to. Strict adherence to this direction can easily lead to situations where a dynamic connector takes a path around a shape with 5 segments.

Using “Top to Bottom” as my routing direction, routes generally exit from the bottom of a shape and connect to the top of the shape, except in cases where shapes line up exactly.

In Visio 2010, we enable dynamic connectors to connect to alternate sides of shapes when the shapes are close to each other.

virtual overlap

To strike a balance between having simple looking connectors and still adhering to the flowchart direction, Visio connects to non-standard sides of shapes when two shapes are close to each other in the axis of the routing direction.

As always, we’re interested in your feedback on routing, so use the Send a Smile feedback tool or comment on this post to let us know what you think.

Comments (5)

  1. Doug says:

    Do you have a way to turn automatic routing off for a given connector?

    As good as you can make an algorithm, it will not meet all situations and the user will want to take control.

    My experience with older Visio was that I could adjust the connectors for a while and then moving something, either a connector or a shape, would make it all go KABOOM and the diagram would be a mess.

    If I could freeze or turn off the automatic for the connectors that are in a perfect state, that would help.

  2. Visio Team says:

    Hi Doug,

    Thanks for your feedback. If you manually adjust one of the segments of the connector, Visio tries to preserve the routing of that connector.

    We call these manually routed connectors. If you nudge a shape near a manually routed connector, the connector won’t move, the shape will simply cover the connector. You can then right click the connector, and click "Reset Connector" to get back to the normal, dynamically routed state.

    I think this is the behavior that you’re looking for.

    There are some scenarios where this manually routed connector will still be routed. For example, if the connector is glued to a shape, and you move the shape significantly, Visio reroutes the connector, but it tries to keep the same number of segments. Sometimes, Visio is forced to "reset" the connector to preserve connections.

    Does this help you?

    Suneet Shah – Visio Product Team

  3. Visio Guy says:

    One thing I’ve noticed over the years with flowchart layout is that the Decision shape is not understood.

    The reason it is diamond shape (I assume) is that branches should come off of it perpendicular. The diamond is like four arrows re-directing traffic.

    Often the "No" branch will go to the right, and "Yes" will go down. But auto-layout frequently arranges shapes connected to a Decision shape in a "Y".

    So "Yes" and "No" both come off the same point on a Decision. I think most people would judge this as wrong. It seems to defeat the graphical purpose of the diamond too.

    Looking at the improvements in Visio 2010, it looks like the Visio engine is capable of handling this properly. Even if it only works with Microsoft-supplied shapes (ala: Decision and the multi-flowchart shape if it still exists)

    Heck, you could look at User.visVersion and Master.NameU and handle even shapes from a few versions ago!

    - Chris

  4. Pete says:

    On our diagrams, we use long box shapes that contain several small shapes, and then try to connect specific small shapes within different long box shapes to each other.  It appears that the long boxes between the two small shapes we want to connect prevent the automatic connections from going from one shape to the other in the most direct path; the connector is routed "around" the intermediate long box shapes.  I can manually adjust the connector to go directly between the two desired shapes, but is there a way to turn off the automatic routing when connecting shapes?

  5. Matt Barker says:

    Need to allow users to control connector routing. This automatic is cool at first, but if we need to change the behavior. Visio 2010 makes it impossible to route the connectors the way we want them. I'm trying to force the connector to be in the center of the object on the top and bottom only. I do not want any connectors going side to side or have connectors jumping over each other because the objects are close to each other. The objects I'm using are Servers(US)objects.  Behavior I want is object A is virtically above object B. The Connector should connect on the bottom of object A in the center and connect to the top of object B no matter how far apart they are or how close they are.