How to view an automatically updated bpmn diagram on a GitHub repository?

Users
1

Hello.

I use https://demo.bpmn.io/ to create a diagram and might add changes in the future.

How can I display the diagram on the “front page” of a GitHub repository (< code > section, in the readme)?
It should automatically display the changes I have done to the bpmn file at any time.
Ideally, I want to be able to click on the diagram and edit it directly from there.

I went through https://github.com/bpmn-io/bpmn-js and https://bpmn.io/toolkit/bpmn-js/walkthrough/ but I still don’t know how to embed the viewer and the modeler in a readme on GitHub. I don’t even know where to paste the code and the libraries etc. in the first place.

I have Visual Studio Code and Git Bash installed and zero programming knowledge. I need an ELI5-explanation.

Help is much appreciated.
Thanks.

Best,
Victoria

2

A BPMN diagram cannot simply be embedded in a README visually. You’d have to turn it into an image first (e.g. using GitHub - bpmn-io/bpmn-to-image: Convert BPMN 2.0 diagrams to PDF documents or PNG files.) that can then be included using Markdown:

![My Diagram](./my-diagram.png)

To what extend you want to automate the task of updating the image whenever your diagram has changed is up to you.

3

Thanks for your quick reply.

I tried following bpmn-to-image…

How do I use VSC to embed the code?
What programming language is this code wirtten in?

const {
  convertAll
} = require('bpmn-to-image');

await convertAll([
  {
    input: 'diagram.bpmn',
    outputs: [
      'diagram.pdf',
      'diagram.png'
      'diagram.svg'
    ]
  }
]);
4

I’m not sure if this is a good starting point if you’re just learning to code. Some basic understanding of JavaScript is necessary.