Bpmn-surf: Visual BPMN/DMN diffs for GitLab and GitHub

Hi everyone!

I wanted to share a little project I’ve been working on - bpmn-surf, a free browser extension for Chrome and Firefox.

The idea is pretty simple: make BPMN/DMN changes easier to review. Instead of digging through XML diffs in a GitLab MR or GitHub PR, you can click a Schema diff or Decision diff button and see what actually changed on the diagram.

A few things it can do:

  • Highlight changed elements on the diagram, with a properties panel showing exactly what’s changed — conditions, mappings, decision table cells, and so on.
  • Jump from a task to its handler code, or from a call activity/business rule task to the process or DMN decision it references.
  • Make quick edits right in the browser using bpmn-js Modeler and download the result as a `.bpmn` file.
  • Work with Camunda 7 and 8 models.

Everything runs locally in your browser, using your existing GitLab/GitHub login. Private repositories are supported, with no backend or telemetry. The diff logic is custom-built; rendering and the properties panel are powered by the excellent bpmn-io libraries.

If you’d like to give it a try, the README includes demo merge requests and pull requests, as well as links to the Chrome Web Store and Firefox Add-ons.

hero

I’d be happy to hear what you think, especially if you work with BPMN/DMN and have ideas for improvements!

Hi,

Thanks for sharing! The project looks really cool.

BTW we collect awesome projects built on bpmn.io in the repository: GitHub - bpmn-io/awesome-bpmn-io: A curated list of bpmn.io related projects and resources. · GitHub Consider contributing.

Hi barmac,

Thank you, glad you like it!

I’ve opened a PR to add it to the list: feat: add bpmn-surf under Apps by kaoalllex · Pull Request #33 · bpmn-io/awesome-bpmn-io · GitHub

1 Like

Thanks! It’s merged now

1 Like