Petri Net Editor

A web-based Petri net modeling and simulation tool built with diagram-js. This editor allows you to create, edit, simulate, and export Petri nets using an intuitive visual interface.

Checkout the live demo 🖥️.

Installation

Use the library by installing it via npm into your application using:

npm install petrinet-io

Usage

To get started, just include the library and call the construction, providing the element that should contain the editor:

import { PetriNetIO } from "petrinet-io";

const pn = new PetriNetIO({
	container: "#canvas",
});

Methods

It is possible to interact with the pn object using the different methods. To load a .pnml file use:

pn.loadFromFile()

To export the current model as .pnml:

pn.exportPNML()

To export the current model as .tpn:

pn.exportTpn()

To export the current model as .svg:

pn.exportSVG()

To export the current model as .pdf:

pn.exportPDF()

Complete Vue example

Open a fully working example in CodeSandbox.

<template>
  <main>
    <button @click="container.loadFromFile()">load pnml</button>
    <button @click="container.exportPNML()">export pnml</button>
    <button @click="container.exportTpn()">export tpn</button>
    <button @click="container.exportSVG()">export svg</button>
    <button @click="container.exportPDF()">export pdf</button>

    <div id="canvas" style="height: 800px; width: 100%;"></div>
  </main>
</template>

<script setup>
import { onMounted } from "vue";
import { PetriNetIO } from "petrinet-io";

let container = null;

onMounted(() => {
  container = new PetriNetIO({
    container: "#canvas",
  });
});
</script>