JavaScript流程圖還是靜態流程圖？

Question

假設我們有以下圖像：

我正在考慮使用所有可能的連接方式繪制此圖像，然后將一些標簽放置在其對應的箭頭上……但這可能不是最好的方法，因為每個標簽的位置會根據屏幕分辨率而有所不同。 您如何看待這種方法？

我的問題是：有人知道任何JavaScript庫，能夠繪制類似上圖所示內容的jQuery插件嗎？ 我的意思是，能夠執行多個連接，並且可以使用AngularJS實現？

以下是一些新的詳細信息：

在我對JointJS進行了一些測試之后，我認為這是我所需要的，但是...以下鏈接是JointJS的示例，其中演示了此項目中源與目標之間的連接/鏈接示例。事實是：在此演示中您可以看到，該演示具有很多鏈接，並且很難解釋。 誰能幫我改善外觀？ 有更好的方法來表示嗎？ （在此示例中，鏈接是靜態的，但是可以動態方式完成）。

Answer 1

您可以在以下網址中查看：

JSPlumb為開發人員提供了一種可視化方式連接其網頁上的元素的方法

http://jsplumbtoolkit.com/demo/flowchart/jquery.html

http://jsplumbtoolkit.com/demo/home/jquery.html

Wirekit看起來很適合創建自定義有線流：

http://neyric.github.com/wireit/

JointJS是一個現代HTML 5 JavaScript庫，用於可視化以及與圖和圖的交互。

http://www.jointjs.com/

Answer 2

這是一個不錯的角度庫

https://github.com/codecapers/AngularJS-FlowChart

以及一個實際的例子

https://dl.dropboxusercontent.com/u/16408368/WebUI_FlowChart/index.html