Algorithm for automatic placement of flowchart shapes
algorithm, canvas, d3.js, graph, javascript
Solution
Force-directed algorithm is not exactly optimal for this kind of problems. I'd rather suggest to use a Layered graph drawing (http://en.wikipedia.org/wiki/Layered_graph_drawing) algorithm. A nice JS implementation of such algorithm is Dagre (https://github.com/cpettitt/dagre). You can also take a look at my blog post about auto-layout and rendering of directed graphs: http://www.daviddurman.com/automatic-graph-layout-with-jointjs-and-dagre.html.
Problem
My team needs to build a flowchart generator in JavaScript, using either HTML5 Canvas or the D3 library (or anything else more suitable, suggestions welcome). The flowchart will be generated from a directed graph defined in a JSON document. My question is the following: which standard algorithm could we use to facilitate the automated placement of shapes in the flowchart (nodes in the graph) in order to minimize the number of overlapping connections and their lengths?