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


I use 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 and 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.


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.

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 {
} = require('bpmn-to-image');

await convertAll([
    input: 'diagram.bpmn',
    outputs: [

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.