Javascript/CSSで基本的なフロー図を描画するためのライブラリはありますか？

Question

Webページでは、非常に基本的なフロー図、つまり線で結合されたいくつかのボックスを動的に描画したいと考えています。理想的には、ユーザーはこれらのボックス（DIV？）の1つをクリックし、別のページに移動することができます。 Flashへのリゾートは過度のようだ。これを達成するのに役立つ可能性のあるクライアント側（つまり、サーバーに依存しない）JavascriptやCSSライブラリ/テクニックについて誰もが知っていますか？

Answer 1

クライアント側でレンダリングする必要がありますか？あなたはそれをサーバー側を行うことができる場合

http://ejohn.org/blog/processingjs/

、その後、Graphvizのは良い選択です：

はい場合は、処理は試みることができます。

http://www.graphviz.org/

Answer 2

フローチャートのこの種は、JavaScriptのグラフライブラリ（キャンバス）に頼ることはやり過ぎかもしれないが、CSSを使用して達成することができます。家系図を得るためにいくつかの系譜サイトがこれを行う方法をチェックアウトすることができます。

Answer 3

私が見つけた最も簡単で簡単なのはjs-graph.itです。

この便利な機能もあります：deciding the orientation of the flow。たとえば、私の場合、私はドキュメントのワークフローを持っているので、私はそれが右側に向かって流れる必要があります。

さらに簡単な方法はwz_jsGraphicsです。私の場合、私はこのような矢印を描きます：

/**Draw an arrow made of 3 lines. 
* Requires wz_jsGraphics (http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm). 
* @canvas a jsGraphics object used as canvas 
* @blockFrom id of the object from which the arrow starts 
* @blockTo id of the object where the arrow ends with a arrowhead 
*/ 
function drawArrow(canvas, blockFrom, blockTo){ 

    //blocks 
    var f = $("#" + blockFrom); 
    var t = $("#" + blockTo); 

    //lines positions and measures 
    var p1 = { left: f.position().left + f.outerWidth(), top: f.position().top + f.outerHeight()/2 }; 
    var p4 = { left: t.position().left,      top: t.position().top + t.outerHeight()/2 }; 
    var mediumX = Math.abs(p4.left - p1.left)/2; 
    var p2 = { left: p1.left + mediumX,     top: p1.top }; 
    var p3 = { left: p1.left + mediumX,     top: p4.top }; 

    //line A 
    canvas.drawLine(p1.left, p1.top, p2.left, p2.top); 
    //line B 
    canvas.drawLine(p2.left, p2.top, p3.left, p3.top); 
    //line C 
    canvas.drawLine(p3.left, p3.top, p4.left, p4.top); 
    //arrowhead 
    canvas.drawLine(p4.left - 7, p4.top - 4,  p4.left, p4.top); 
    canvas.drawLine(p4.left - 7, p4.top + 4,  p4.left, p4.top); 
} 

var jg = new jsGraphics('myCanvasDiv'); 
drawArrow(jg, 'myFirstBlock', 'mySecondBlock'); 
jg.paint();