DEV Community

Niklas Kiefer
Niklas Kiefer

Posted on • Edited on

8 1

VS Code Extension - Render Process Diagrams with bpmn.io

As another exciting pet project, we created a Visual Studio Code extension for rendering BPMN 2.0 process diagrams. It is built on top of the amazing modeling toolkit bpmn-io and can be found on GitHub.

You can directly download it from VS Code Marketplace or follow the setup instructions to get it running locally.

With this extension, it is possible to display a preview for your BPMN 2.0 diagrams. It also refreshes the preview whenever you re-focus it, to adapt made changes in the XML content.

vs-code-bpmn-io extension

As a next step, we plan to also add a modeling functionality to enable the powerful BPMN diagram editing capabilities of bpmn-io. This will help to easily create BPMN process diagrams in Visual Studio Code without writing one line of XML.

Alt Text

Feel free to try out the extension and leave some feedback or a star for our work!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay