The modern web-based Petri net editor for workflow modeling and analysis.
Built for education and research — WoPeD Next brings Petri net modeling, token-game simulation, and workflow analysis to the browser. It is the web successor to the Java Swing WoPeD (Workflow Petri Net Designer) from DHBW Karlsruhe.
- Drag-and-drop canvas with places, transitions, arcs, and arc weights
- Workflow operators (AND/XOR split and join, combined operators)
- Subprocesses with drill-down navigation and process tree
- Quick Connect pad on right-click to add successors quickly
- Snap-to-grid, auto-layout, fit-to-view, and optional van der Aalst operator notation
- PNML and JSON import/export, SVG/PNG image export
- Auto-save and drag-and-drop file opening
- Animated token flow with step-by-step or automatic execution
- Conflict resolution and subprocess stepping
- Runtime statistics and deadlock detection
- Qualitative analysis (structure, soundness, coverability graph)
- Process metrics and custom metric builder
- Quantitative discrete-event simulation with resources, roles, and bottlenecks
- Mass analysis across multiple nets
- Built-in chat panel (OpenAI or Google Gemini, BYOK — key stays in your browser)
- Create nets from natural language via T2P 2.0 (
/t2p-2.0/v2/generate/pnml) - Describe the current model via P2T
- Analyze, modify, and get modeling help with model context
- Optional WoPeD service endpoints configurable in Settings (T2P/P2T, prompting strategy)
- 19 educational templates — from basic patterns to dining philosophers, loan application, and state machines
- In-app help, tooltips, and guided tour (EN/DE)
Requirements: Node.js 22+, npm
git clone https://github.com/TaminoFischer/woped-next.git
cd woped-next
npm install
npm run devOpen http://localhost:5173.
| Command | Description |
|---|---|
npm run build |
Production build to dist/ |
npm run preview |
Preview production build locally |
npm run test |
Vitest in watch mode |
npm run test:run |
Run tests once |
npm run test:coverage |
Tests with coverage report |
npm run typecheck |
TypeScript check (tsc --noEmit) |
docker compose up --buildThe app is served on http://localhost:8080 via nginx.
| Area | Technology |
|---|---|
| UI | Vue 3 (Composition API, <script setup>) |
| Canvas | Konva + vue-konva |
| State | Pinia |
| i18n | vue-i18n (English, German) |
| Types & validation | TypeScript, Zod |
| Styling | CSS variables + Tailwind CSS 4 |
| Layout | dagre (auto-layout) |
| Tests | Vitest, happy-dom, @vue/test-utils |
| Build | Vite 7 |
| Deploy | GitHub Pages, Docker + nginx |
| Document | Description |
|---|---|
| AGENTS.md | Project reference for developers and AI coding agents |
| Architecture | System design, stores, and canvas patterns |
| Design tokens | UI colors and theme variables |
| Migration status | Feature parity with legacy WoPeD |
| NLP chat feature | Chat assistant design and T2P/P2T integration |
| Deployment | GitHub Pages and Docker deployment |
| Learn guides | Tutorials for Vue, Pinia, i18n, testing, and more |
WoPeD models and analyzes workflow processes using Petri nets. Places (circles) represent conditions, transitions (rectangles) represent activities, tokens mark the current marking, and arcs connect the net.
(●) ───► [ T1 ] ───► ( )
Place Transition Place
(1 token) (0 tokens)
- Branch from
main - Develop with
npm run dev - Before opening a PR, run:
npm run typecheck
npm run test:run
npm run build- Add new UI strings to both
src/i18n/locales/en.tsandde.ts - Open a pull request against
main
See AGENTS.md for architecture conventions, folder layout, and coding guidelines.
- Live demo — try it in your browser
- Original WoPeD — legacy Java application
- Petri Nets World — background on Petri nets
Made for the Petri net community