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!

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs