<p>On a web page I want to dynamically render very basic flow diagrams, i.e. a few boxes joined by lines. Ideally the user could then click on one of these boxes (<code>DIVs</code>?) and be taken to a different page. Resorting to Flash seems like an overkill. Is anyone aware of any client-side (i.e. <code>server agnostic</code>) Javascript or <code>CSS library/technique</code> that may help achieve this?</p>

[{'answer_id': 27668, 'author': 'Sergio Acosta', 'author_id': 2954, 'author_profile': 'https://Stackoverflow.com/users/2954', 'pm_score': 2, 'selected': False, 'text': '<p>Does the rendering have to be client side?</p>\n\n<p>If yes, you could try Processing:</p>\n\n<p><a href="http://ejohn.org/blog/processingjs/" rel="nofollow noreferrer">http://ejohn.org/blog/processingjs/</a></p>\n\n<p>If you can do it server side, then Graphviz is a good choice.</p>\n\n<p><a href="http://www.graphviz.org/" rel="nofollow noreferrer">http://www.graphviz.org/</a></p>\n'}, {'answer_id': 27752, 'author': 'Ravi Chhabra', 'author_id': 370899, 'author_profile': 'https://Stackoverflow.com/users/370899', 'pm_score': 1, 'selected': False, 'text': '<p>This kind of flowchart can be accomplished using CSS, resorting to JavaScript graphing libraries (canvas) might be overkill. You may wish to checkout how some Genealogy sites do this to get a family tree.</p>\n'}, {'answer_id': 16935309, 'author': 'bluish', 'author_id': 505893, 'author_profile': 'https://Stackoverflow.com/users/505893', 'pm_score': 2, 'selected': False, 'text': '<p>The best and simplest I found is <a href="http://js-graph-it.sourceforge.net" rel="nofollow"><strong>js-graph.it</strong></a>.</p>\n\n<p>It has also this useful feature: <a href="http://js-graph-it.sourceforge.net/gettingstarted_8.html" rel="nofollow">deciding the orientation of the flow</a>. For example, in my case I have a document workflow, so I need it to flow towards the right side.</p>\n\n<p>An even simpler alternative is <a href="http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm" rel="nofollow"><strong>wz_jsGraphics</strong></a>. In my case I draw the arrows like this:</p>\n\n<pre><code>/**Draw an arrow made of 3 lines. \n * Requires wz_jsGraphics (http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm).\n * @canvas a jsGraphics object used as canvas\n * @blockFrom id of the object from which the arrow starts\n * @blockTo id of the object where the arrow ends with a arrowhead \n */\nfunction drawArrow(canvas, blockFrom, blockTo){\n\n    //blocks\n    var f = $("#" + blockFrom);\n    var t = $("#" + blockTo);\n\n    //lines positions and measures\n    var p1 = { left: f.position().left + f.outerWidth(),    top: f.position().top + f.outerHeight()/2 };\n    var p4 = { left: t.position().left,                     top: t.position().top + t.outerHeight()/2 };\n    var mediumX = Math.abs(p4.left - p1.left)/2;\n    var p2 = { left: p1.left + mediumX,                 top: p1.top };\n    var p3 = { left: p1.left + mediumX,                 top: p4.top };\n\n    //line A\n    canvas.drawLine(p1.left, p1.top,    p2.left, p2.top);\n    //line B\n    canvas.drawLine(p2.left, p2.top,    p3.left, p3.top);\n    //line C\n    canvas.drawLine(p3.left, p3.top,    p4.left, p4.top);\n    //arrowhead\n    canvas.drawLine(p4.left - 7, p4.top - 4,        p4.left, p4.top);\n    canvas.drawLine(p4.left - 7, p4.top + 4,        p4.left, p4.top);\n}\n\nvar jg = new jsGraphics(\'myCanvasDiv\');\ndrawArrow(jg, \'myFirstBlock\', \'mySecondBlock\');\njg.paint(); \n</code></pre>\n'}]
['https://Stackoverflow.com/questions/27643', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2966/']