HTML5 JavaScript 工作流程图生成器

Question

13

我正在寻找一个基于HTML5和JavaScript的工作流程生成器。

我的系统有多个状态，这些状态遵循特定的工作流程，可以由用户修改。

我正在寻找一个简单的框架，可以生成工作流程的可视化表示。

例如：

- Pascal

我建议您查看以下内容：https://dev.joget.org/community/display/KBv6/Installation+on+Windows - willyMon

此外，您还可以在Github上查找此强大的免费工具：https://demo.bpmn.io/new - willyMon

我找到了一个工具，可以让你生成惊人的图表，并将其导出为HTML页面。https://gojs.net/latest/samples/IVRtree.html - Astm

4个回答

4

如果您正在寻找更复杂的解决方案，商业场景下，您可能需要考虑yFiles for HTML。但是，如果您的系统非常简单，则可能会过度设计，因此像jsPlumb这样的简单解决方案可能已经足够了。

前者库支持各种用户交互和自定义，还提供支持易于集成自己的形状和视觉表示的功能。

对于工作流程可视化，Sugiyama Layout的自动布局算法实现在需要自动排列更多工作流程项时非常有用。

Sugiyama example rendering created by yFiles

在上面的图像中，添加了泳道，这在更复杂的工作流程图中非常常见。该算法可以自动排列形状、它们之间的连接和泳道。您可以在此实时示例应用程序中看到其运作情况。

披露：我为创建该库的公司工作。在SO上，我不代表我的雇主，我的评论、想法和帖子都是我个人的。

- Sebastian

3

我尝试了几款工作流、流程图和图表工具。

我找到了一个可以制作工作流程图、加载和保存数据到服务器的工具。

该工具几乎拥有所有可以用于制作工作流程图的功能：

1）矩形内的富文本。

2）能够自定义形状。

3）能够添加流程图符号并修复后端代码。

4）适用于Android，iOS，HTML5浏览器。

5）能够添加不同类型的线条以附加到不同的形状和对象。

MIT许可证。

- buttercup

你好，这很棒。你能提供一个简单的例子吗？ - Pascal

SVG-Edit是一个通用的基于HTML5的在线绘图工具。我目前还在编码中，迄今为止没有遇到任何障碍。我尝试过其他绘图工具，但发现它们都不令人满意。 - buttercup

1

这是我的意见。

如果您需要GPL和/或商业版本，可以使用Draw2d.org库。它是一个SDK而不是一个现成的应用程序。在这种情况下，集成或自定义是可能的。

- Draw2D touch

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- KesaVan · Accepted Answer

请查看 mxGraph (www.jgraph.com)，它是使用 HTML5 / JavaScript 开发的，并为 HTML 4 浏览器提供了后备支持。您可以在www.draw.io上使用该技术的示例。