मुझे मिला सबसे अच्छा और सरल 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();