是否存在用於在Javascript/CSS中呈現基本流程圖的庫？

Question

在網頁上，我想動態渲染非常基本的流程圖，即通過線連接的幾個框。理想情況下，用戶可以點擊其中一個框（DIV？），然後轉到其他頁面。訴諸Flash似乎是一種矯枉過正。有沒有人知道任何客戶端（即服務器不可知）的Javascript或CSS庫/技術可能有助於實現這一目標？

Answer 1

渲染必須是客戶端嗎？

如果是的話，你可以嘗試處理：

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

如果你能做到這一點的服務器端，然後Graphviz的是一個不錯的選擇。

http://www.graphviz.org/

Answer 2

這種流程圖可以使用CSS，訴諸JavaScript的圖形庫（畫布）可能是矯枉過正來完成。你可能希望檢查一些家譜網站是如何做到這一點的，以獲得家譜。

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();