Есть ли библиотека для рендеринга основных блок-схем в Javascript/CSS?

Должен ли рендеринг быть на стороне клиента?

Если да, то вы можете попробовать обработку:

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

Если вы можете сделать это на стороне сервера, то Graphviz-хороший выбор.

http://www.graphviz.org/

Лучшее и самое простое, что я нашел, - это js-graph.it .

Он также имеет эту полезную функцию: определение ориентации потока . Например, в моем случае у меня есть документооборот, поэтому мне нужно, чтобы он тек в правую сторону.

Еще более простой альтернативой является 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(); 

Этот вид блок-схемы может быть выполнен с помощью CSS, прибегая к JavaScript graphing библиотекам (canvas) может быть излишним. Вы можете проверить, как некоторые сайты генеалогии делают это, чтобы получить генеалогическое древо.