Graphics 网络流程图

我非常清楚，SO不是一个需要工具的地方，所以我自己搜索并找到了一些工具，但是，由于我需要一些特定的功能，我相信SO用户的专业知识和经验结合起来对我所寻找的东西非常有用。这是一个能够在网页上构建/显示类似以下流程图的库：

正如我所提到的，我已经看到了和其他一些例子，但是研究每一个例子的各自特点需要花费太多的时间，所以我希望有经验的人能够提出最佳选择。我正在寻找的功能：

浏览器支持IE8+、Chrome、FF 能够以可视或编程方式动态添加/编辑/删除图表项 能够使用图表数据更新后端ASP.NET/SQL Server 在上面的示例中，具有从按钮3到状态1的灵活连接器的能力 能够加载图表数据并将项目自动排列到默认/最佳布局中 图书馆可能有一个非免费/商业的选择这是一个愚蠢的选择，但这是商业方面的要求，他们对免费产品很警惕 我可能会在这个问题上获得很多反对票，但我愿意冒险，希望有人能推荐一个适合我需要的好的流程图库。

让我们看看比较：

浏览器支持IE9+、Chrome、FF、IE8是不可能的，因为HTML-5是必需的，而IE8根本不支持该级别，无论是在可视化还是Javascript级别。 有一个可用于以编程方式更改模型和视图的任何方面的。默认编辑功能允许所有标准编辑操作，可以轻松添加自定义编辑操作。 YfilesforHTML1.1是一个纯客户端应用程序，因此目前程序员需要添加服务器连接。由于该库与服务器无关，因此可以使其与任何服务器技术一起工作—包中包含的示例。 柔性连接器实际上是默认的：可以向连接到两个端口的连接器添加任意数量的折弯和标签。这两种类型的项目都可以在非常高的程度上进行配置和定制。 这座图书馆的一个突出特点是。一般来说，不可能得到最优布局，但启发式算法，至少其中大多数算法被认为是最佳的。 该图书馆仅为商业图书馆。 图书馆是否真正符合您的需要取决于许多因素。除非1是你的拦路虎，否则我认为yFiles可能是一个很好的候选人。您可以通过在主页上对其进行评估来尝试

我在联机编辑器中重新创建了您的示例，并使用以下简单的代码配置创建了自动布局：

var ihl = new yfiles.hierarchic.IncrementalHierarchicLayouter()
ihl.automaticEdgeGrouping = true
ihl.backloopRouting = true
ihl.layoutOrientation = yfiles.layout.LayoutOrientation.LEFT_TO_RIGHT
ihl.integratedEdgeLabeling = true

// animate and apply the layout
graphControl.morphLayout(ihl, yfiles.system.TimeSpan.fromSeconds(1), null)

这就是我得到的：

注意：你没有要求一个无插件的解决方案，但我回答了你的问题，就像你要求一样。如果Flash、Silverlight或applet等插件是可以接受的，那么相应平台的同级yFiles产品也可能是一个选项。它们适用于所有支持这些插件的浏览器，因此即使是最古老的IE版本也受支持

免责声明：我为创建该库的公司工作，但我在SO/SE不代表我的雇主。我的想法、评论和帖子都是我自己的。

让我们看看它们之间的比较：

浏览器支持IE9+、Chrome、FF、IE8是不可能的，因为HTML-5是必需的，而IE8根本不支持该级别，无论是在可视化还是Javascript级别。 有一个可用于以编程方式更改模型和视图的任何方面的。默认编辑功能允许所有标准编辑操作，可以轻松添加自定义编辑操作。 YfilesforHTML1.1是一个纯客户端应用程序，因此目前程序员需要添加服务器连接。由于该库与服务器无关，因此可以使其与任何服务器技术一起工作—包中包含的示例。 柔性连接器实际上是默认的：可以向连接到两个端口的连接器添加任意数量的折弯和标签。这两种类型的项目都可以在非常高的程度上进行配置和定制。 这座图书馆的一个突出特点是。一般来说，不可能得到最优布局，但启发式算法，至少其中大多数算法被认为是最佳的。 该图书馆仅为商业图书馆。 图书馆是否真正符合您的需要取决于许多因素。除非1是你的拦路虎，否则我认为yFiles可能是一个很好的候选人。您可以通过在主页上对其进行评估来尝试

我在联机编辑器中重新创建了您的示例，并使用以下简单的代码配置创建了自动布局：

var ihl = new yfiles.hierarchic.IncrementalHierarchicLayouter()
ihl.automaticEdgeGrouping = true
ihl.backloopRouting = true
ihl.layoutOrientation = yfiles.layout.LayoutOrientation.LEFT_TO_RIGHT
ihl.integratedEdgeLabeling = true

// animate and apply the layout
graphControl.morphLayout(ihl, yfiles.system.TimeSpan.fromSeconds(1), null)

这就是我得到的：

注意：你没有要求一个无插件的解决方案，但我回答了你的问题，就像你要求一样。如果Flash、Silverlight或applet等插件是可以接受的，那么相应平台的同级yFiles产品也可能是一个选项。它们适用于所有浏览器 支持这些插件，因此即使是最古老的IE版本也受支持

---

免责声明：我为创建该库的公司工作，但我在SO/SE不代表我的雇主。我的想法、评论和帖子都是我自己的。

尽管你的问题很顽皮，但它是唯一一个完全支持IE8的图形库，支持IE6。这是完整的功能，请尝试IE 8

1是的，还有Opera、Safari、iOS 5+、Android 4+、Windows 8 touch、ChromeOS。 2是的 3.我们在.NET的服务器上有一个完整的图形模型实现，它更容易集成一个纯JavaScript的解决方案。 4是的 5是的 6是的

---

是的，我在做这个产品。

尽管你的问题很顽皮，但它是唯一一个完全支持IE8的图形库，支持IE6。这是完整的功能，请尝试IE 8

1是的，还有Opera、Safari、iOS 5+、Android 4+、Windows 8 touch、ChromeOS。 2是的 3.我们在.NET的服务器上有一个完整的图形模型实现，它更容易集成一个纯JavaScript的解决方案。 4是的 5是的 6是的

---

是的，我正在开发该产品。

GenMyModel现在支持流程图绘制：

---

您可以查看并分叉此示例

GenMyModel现在支持流程图绘制：

---

您可以查看并分叉此示例

感谢您的及时回复，这看起来正是我们需要的。请帮助我们加快获得mxGraph的评估。感谢您的及时回复，这看起来正是我们所需要的。请帮助我们加快获得mxGraph的评估。这看起来很酷，感谢您的及时回复。但由于两个特定的需求，我们决定使用mxGraph。我们将来仍有可能使用yFiles，因此我会记住这个库。这看起来很酷，感谢您的及时回复。但由于两个特定的需求，我们决定使用mxGraph。我们将来仍然有可能使用yFile，所以我会记住这个库。