Gibt es eine Bibliothek zum Rendern von grundlegenden Ablaufdiagrammen in Javascript/CSS?

Question

Auf einer Webseite möchte ich sehr grundlegende Flussdiagramme, d. H. Ein paar durch Linien verbundene Felder, dynamisch darstellen. Im Idealfall könnte der Benutzer dann auf eines dieser Felder (DIVs?) Klicken und auf eine andere Seite gelangen. Der Rückgriff auf Flash scheint ein Overkill zu sein. Kennt jemand eine clientseitige (d. H. Serverunabhängige) Javascript- oder CSS-Bibliothek/Technik, die dabei helfen kann?

Answer 1

Muss das Rendering clientseitig sein?

Wenn ja, könnten Sie versuchen, Verarbeitung:

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

Wenn Sie es Server-Seite tun können, dann Graphviz ist eine gute Wahl.

http://www.graphviz.org/

Answer 2

Diese Art von Flussdiagramm erreicht werden kann mit Hilfe von CSS, den Rückgriff auf JavaScript Grafikbibliotheken (Leinwand) könnte zu viel des Guten. Vielleicht möchten Sie überprüfen, wie einige Genealogie-Websites dies tun, um einen Stammbaum zu erhalten.

Answer 3

Das beste und einfachste, das ich fand, ist js-graph.it.

Es hat auch dieses nützliche Feature: deciding the orientation of the flow. In meinem Fall habe ich zum Beispiel einen Dokumenten-Workflow, also muss ich ihn zur rechten Seite fließen lassen. Eine weitere einfachere Alternative ist wz_jsGraphics. In meinem Fall zeichne ich die Pfeile so:

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