While BPMN and DMN are easy-to-learn modeling notations, using them to their fullest capacity, as with everything, takes practice.
This webapp provides a framework to create interactive stories that allow teaching either specific features of the modeling languages, or more intricate patterns and use cases.
These stories consist of a messenger-style conversation, and a canvas to display BPMN, DMN and Form files, including the BPMN token simulation to make learning even more easy.
You can find some example stories in the Camunda Consulting Github.
- Create conversations between up to 4 participants + narration
- Use questions and answers to lead the story along different threads
- Display one or more BPMN, DMN and Form files alongside your story
- Conclude your story with good and bad endings
The stories are configured and described via a TypeScript file. Each story contains two lists of threads: one for messages, one for files. Threads can be used to react to correct/false answers from the user.
Assets are stored in the /public/
folder and imported from there.
- Git client
- Github account
- Node.js
- IDE of your choice
- Fork the repository:
- Clone your forked copy:
git clone [email protected]:<YOUR_NAME>/interactive-bpmn-stories.git
. - Navigate to the folder:
cd interactive-bpmn-stories
- Open the project in your IDE (e.g.,
code .
for Visual Studio Code).
-
Build the application:
npm install
-
Run the application:
npm run dev
-
Open http://localhost:5173/interactive-bpmn-stories in your browser.
git add <File>
git commit -m “some commit message”
git push
- Decide what the Story will be about
- A BPMN/DMN/Form concept
- A specific use case
- An onboarding experience
- Limit the scope (participants, threads)
- Split up the work
- Make use of live editing for frequent testing
- Ask for help if necessary!
The merged stories can be viewed on your notebook, tablet or phone: