Blog

News from the bpmn.io project

Sketchy Is the New Default

Published by Nico Rehwaldt on Monday, 01 April 2019.

bpmn-js3.3.0

April Fools' Notice

This post is a joke and features announced are not part of our mid-term planing and/or official releases. You still think we mentioned something useful? Do not hesitate to give us feedback @bpmn_io or via our project forums.

We're proud to announce the latest release of our BPMN modeler and rendering toolkit. The release ships with a new, sketchy default renderer, acknowledging the fact that every great process starts with a hand-drawn sketch. On top of that, it ships with better handling of data input and output elements.

Most great ideas start with a hand-drawn sketch, and so do most great processes. Why is that? Because low-fidelity, hand-drawn prototypes encourage us to give valuable feedback. Good feedback, in turn, is what helps us to build the fantastic things our stakeholders genuinely need.

Nearly a year ago we published bpmn-js-sketchy, an extension for bpmn-js that turns your BPMN 2.0 diagrams into delightful, hand-drawn sketches. Fully recognizing the benefits of hand-drawn, we go one step further today and make the sketchy render the default renderer for BPMN 2.0 diagrams.

Sketch your processes like 1-2-3.

Try out the all-new sketchy modeling on demo.bpmn.io.

From Prototype to Maturity in a Week

Off course, prototypes mature with time and feedback. That is why the new version of our toolkit automatically brings back the established, tidy form of diagram elements as time passes by.

See your diagrams mature in real time.

The BPMN editor stores the created time via an bio:created element within the exported BPMN 2.0 XML. By inspecting that field on a later re-open, it can persist the sketchy behavior across diagram re-imports.

If you think your diagrams are production quality from the start, we got you covered, too. Opt-out of the new behavior by passing noSketch=true upon bpmn-js instantiation:

import BpmnViewer from 'bpmn-js';

// create the viewer
const bpmnViewer = new BpmnViewer({
  noSketch: true
});

// import your production-ready-from-the-start diagram
bpmnViewer.importXML(...);

Other Improvements

This release ships with a small number of improvements that improve our compatibility with bpmn:DataInput and bpmn:DataOutput elements:

  • FEAT: allow movement of DataInput and DataOutput within their original containers
  • FIX: don't crash when moving DataInput and DataOutput

Check out the changelog for all details on the current release.

Wrapping Up

This release makes sketchy the default renderer for your BPMN 2.0 diagrams. Got you own opinion on that substantial improvement? Share your feedback in our forum or toot us on Mastodon.

Next up, we focus on many small usability improvements to make it even more intuitive to build process prototypes. Supporting groups and more intuitive modeling of intermediate/boundary events are two topics that remain on our short-term roadmap, too.

As always, get the latest version of bpmn-js via npm or prepackaged via unpkg.

Are you passionate about JavaScript, modeling, and the web?
Join Camunda and build modeling tools people heart.