0

I've been asked to build a petri net engine to use as a basis for internal workflows at work.

So far I've been able to generate all the logic and behaviours (I have created a "Service Desk" type of workflow to test rules and conditions) and it all works OK.

Something that's proving to be a bit of a pain, though, is visualizing the Petri net and automating this visualization.

I've been taking a look at SVG-Drawing diagram routines like: http://flowchart.js.org (flowcharts) https://bramp.github.io/js-sequence-diagrams/ (Sequence Diagrams)

And I'd love to either modify one of these or find a similar one to use as a basis, but I'm facing an unexpected problem: I'm absolutely unfamiliar with complex drawing routines and theory that handles automatic placement of multiple concurrent connections and branches.

The two examples above are simple enough but in a Petri net you may have a single place spawning multiple transitions and even short/simple nets can easily become unwieldy diagrams if not handled properly.

What would be the best way to approach this problem?

EDIT: I ended up using MermaidJS, which has basic workflow diagramming and is easy to adapt. While it's not designed for Petri Net diagrams natively it does allow for enough styling and flexibility in workflows to accurately reflect the net.

Eduo
  • 131
  • 1
  • 9
  • I think the best approach would be a d3 force diagram like this one; https://jsfiddle.net/tangentstorm/bjp5nv4a/ – Chris May 08 '17 at 15:16
  • Thanks. I saw that but couldn't make it work well enough to make it OK. I thought I might just be unaware of a simple visualization algorithm that helps building diagramas like what I need. – Eduo May 14 '17 at 00:12

1 Answers1

1

Since you are not familiar with the subject I think it would be much easier use or adapt an existing tool which offer automatic outlining algorithm.

Try old good graphviz package it offers number of beatifying algorithms for graphs. I have seen it to work for company workflow visualization (png I think though, and using backend). There are a vis.js version, vis.js and derivatives, d3 hybrid, yet I never trid personally.

For experimentation and small nets there is a free service https://glitch.com/edit/#!/graphviz?path=README.md:1:0

SVG is among supported outputs http://www.graphviz.org/doc/info/output.html

You might need large cache for over 1000 nodes : http://www.graphviz.org/content/drawing-large-petrinet

Boris Stitnicky devoped YPetri with graphviz, (I did not check svg) worked for him, probably for tons of other workflow visualization tools.

Petri net drawing and code generation

If you mindbent on implementing some algo yourself may be ask at Comp Science group, there are so many technique and algorithm for beatiful graph drawing.

Serge
  • 3,387
  • 3
  • 16
  • 34