https://github.com/bpmn-io/bpmn-js-sketchy

A sketchy renderer for bpmn-js.
https://github.com/bpmn-io/bpmn-js-sketchy

bpmn bpmn-js handdrawn sketchy

Last synced: 1 day ago
JSON representation

A sketchy renderer for bpmn-js.

• Host: GitHub
• URL: https://github.com/bpmn-io/bpmn-js-sketchy
• Owner: bpmn-io
• Created: 2018-05-25T11:40:56.000Z (about 7 years ago)
• Default Branch: main
• Last Pushed: 2024-02-19T20:58:28.000Z (over 1 year ago)
• Last Synced: 2025-06-21T11:06:14.007Z (10 days ago)
• Topics: bpmn, bpmn-js, handdrawn, sketchy
• Language: JavaScript
• Homepage: https://cdn.statically.io/gh/bpmn-io/bpmn-js-sketchy/main/demo/index.html
• Size: 1.58 MB
• Stars: 29
• Watchers: 8
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• awesome-bpmn-io - bpmn-js-sketchy - A sketchy renderer for BPMN diagrams (Extensions)

README

        
# bpmn-js-sketchy

[![CI](https://github.com/bpmn-io/bpmn-js-sketchy/actions/workflows/CI.yml/badge.svg)](https://github.com/bpmn-io/bpmn-js-sketchy/actions/workflows/CI.yml)

A sketchy renderer for [bpmn-js](https://github.com/bpmn-io/bpmn-js). [__:arrow_right: Try it out__](https://cdn.statically.io/gh/bpmn-io/bpmn-js-sketchy/main/demo/index.html).

![sketchy renderer at work](docs/screenshot.png)

## Usage

Extend bpmn-js with the sketchy renderer module:

```javascript

import modeler from 'bpmn-js/lib/Modeler';

const modeler = new Modeler({

  // ...

  additionalModules: [ sketchyRendererModule ]

});

```

For the full sketchy experience, you must configure bpmn-js to use a hand drawn font, for example [Virgil](http://www.eaglefonts.com/fg-virgil-ttf-131249.htm).

Check out [the demo](./demo) or [this test](test/SketchyRendererSpec.js#L42) for more information.

__To view sketchified diagrams you must have the font installed on your computer.__

## Licence

MIT