javascript - 将 Petri Net 生成为 SVG 的工具

Question

我被要求构建一个 Petri 网引擎，作为工作中内部工作流程的基础。

到目前为止，我已经能够生成所有逻辑和行为(我已经创建了“服务台”类型的工作流程来测试规则和条件)并且一切正常。

不过，事实证明，可视化 Petri 网并自动化这种可视化是有点痛苦的事情。

我一直在研究 SVG 绘图例程，例如: http://flowchart.js.org (流程图) https://bramp.github.io/js-sequence-diagrams/ (序列图)

我很想修改其中一个或找到一个类似的作为基础，但我面临着一个意想不到的问题:我完全不熟悉复杂的绘图例程和处理自动放置的理论多个并发连接和分支。

上面的两个例子足够简单，但在 Petri 网中，您可能会在一个地方产生多个转换，如果处理不当，即使是短/简单的网络也很容易变成笨拙的图。

解决这个问题的最佳方法是什么？

编辑:我最终使用了 MermaidJS，它具有基本的工作流程图并且易于适应。虽然它本身并不是为 Petri Net 图设计的，但它确实允许工作流程中有足够的样式和灵 active 来准确反射(reflect)网络。

Answer 1

由于您不熟悉该主题，我认为使用或改编提供自动大纲算法的现有工具会更容易。

尝试旧的良好的 graphviz 软件包，它提供了许多图形美化算法。我已经看到它适用于公司工作流程可视化(虽然我认为是png，并且使用后端)。有 vis.js 版本、vis.js 及其衍生版本、d3 混合版本，但我个人从未尝试过。

对于实验和小型网络，有免费服务 https://glitch.com/edit/#!/graphviz?path=README.md:1:0

SVG 是受支持的输出之一 http://www.graphviz.org/doc/info/output.html

您可能需要超过 1000 个节点的大型缓存: http://www.graphviz.org/content/drawing-large-petrinet

Boris Stitnicky 用 graphviz 开发了 YPetri，(我没有检查 svg)为他工作，可能为大量其他工作流可视化工具工作。

Petri net drawing and code generation

如果您想自己实现一些算法，可以在计算机科学组询问，有很多技术和算法可以用来绘制漂亮的图形。