DEV Community

Niklas Kiefer
Niklas Kiefer

Posted on

Building a honkify extension for bpmn-js

Something for the fun department: Yesterday I found this amazing project, which replaces any link on a page with a duck "honk": honkify.js. This inspired me to build a simple bpmn-js extension which adds this honk on several modeling operations, e.g. adding, moving or removing BPMN shapes from the canvas:

/// Honk.js

import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';

import inherits from 'inherits';

import showToast from 'show-toast';

export default function Honk(injector) {

  injector.invoke(CommandInterceptor, this);

  const audio = new Audio(

  function _honk(context) {

    console.log('honk fired.', context);

    // honk;

    // show toast
      str: 'Honk 🦆🦆🦆!',
      time: 500,
      position: 'top'
    return false;

  ], _honk);

Honk.$inject = [

inherits(Honk, CommandInterceptor);

I put the results in a small GitHub project, which everyone can simply install via npm and directly integrate into their bpmn-io application.

Alt Text

This fun example showcases how easy it is to build extensions for the bpmn-io toolkit. Also, have a look at the bpmn-js-nyan-cat for another little example of how to bring joy in your modeling application.


Discussion (0)