¿Hay una biblioteca para representar diagramas de flujo básicos en Javascript/CSS?

Question

En una página web quiero representar dinámicamente diagramas de flujo muy básicos, es decir, unos pocos cuadros unidos por líneas. Idealmente, el usuario podría hacer clic en uno de estos cuadros (DIVs?) Y ser llevado a una página diferente. Recurrir a Flash parece una exageración. ¿Alguien sabe de alguna biblioteca/técnica de JavaScript o de CSS del lado del cliente (es decir, servidor independiente) que pueda ayudar a lograr esto?

Answer 1

¿El renderizado tiene que ser del lado del cliente?

Si es así, usted podría intentar procesamiento:

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

Si puede hacerlo del lado del servidor, a continuación, Graphviz es una buena opción.

http://www.graphviz.org/

Answer 2

Este tipo de diagrama de flujo se puede lograr usando CSS, recurrir a las bibliotecas de gráficos de JavaScript (lienzo) podría ser una exageración. Es posible que desee verificar cómo algunos sitios de Genealogía hacen esto para obtener un árbol genealógico.

Answer 3

Lo mejor y más simple que encontré es js-graph.it.

También tiene esta característica útil: deciding the orientation of the flow. Por ejemplo, en mi caso tengo un flujo de trabajo de documentos, por lo que necesito que fluya hacia el lado derecho.

Una alternativa incluso más simple es wz_jsGraphics. En mi caso, dibujo las flechas de esta manera:

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