Skip to content
Switch branches/tags


GitHub package.json version vs-code-support CI

Display and edit BPMN diagrams in VS Code using tools.


  • Open BPMN 2.0 (.bpmn) in a Modeler to make changes to your diagrams
    • From the editor toolbar
    • Via the command palette ("Open BPMN Modeler")
    • Via keyboard shortcut (CTRL/CMD + SHIFT + V)
  • Save changes to your local file


How to get it

Type vs-code-bpmn-io in the Extensions section and directly install it. You can also download it in the Visual Studio Code Marketplace or setup it locally.

Besides that, several release versions are available from the releases page. To install such .vsix packages, simply use following command.

$ code --install-extension ./vs-code-bpmn-io-[VERSION].vsix

Development Setup

First step, clone this project to your local machine.

$ git clone
$ cd ./vs-code-bpmn-io
$ npm install
$ code .

Press F5 to load and debug the extension in a new VS Code instance.

To execute the test suite simply use

npm run test

The extension integration tests can also be executed from VS Code itself, simple choose the Extension Tests in the Debug mode.

Go further



Contains parts (bpmn-js) released under the license.