postit-js

Create post-it brainstorming boards - built with diagram-js.

Checkout the Demo or the Experiments Page to get some inspiration.

Features

• Create resizable Post-its on the Canvas (squared and circled) via
  • Palette
  • Double Click (latest element type will be respected)
• Change the color of Post-its
• Create simple Text Boxes on the Canvas
• Create grouping frame elements on the Canvas
• Add external image resources on the Canvas

Installation

Install the package to include it into your web application

$ npm install postit-js-core --save

Usage

To get started, create a postit-js instance and render a post-it board into your web application

import 'postit-js-core/assets/postit-js.css';

import PostItModeler from 'postit-js-core/lib/Modeler';

let xml; // my post-it xml 

const modeler = new PostItModeler({
  container: '#canvas',
  keyboard: {
    bindTo: window,
  }
});

modeler.importXML(xml).then(function() {
  console.log('board rendered');
}).catch(function(error) {
  console.error('could not import postit board', err);
});

For using postit-js inside your web application you'll need a source code bundler, e.g. webpack. Checkout the example for getting inspiration.

Development Setup

Spin up the application for development, all strings attached:

$ npm install
$ cd  example
$ npm install
$ npm run dev

Extensions

Since diagram-js and also this project is extendable by design, there exist a couple of great community maintained extensions

• drag-drop-images - Drag and drop image files on the board
• selection-organizer - Organize and distribute groups of elements
• properties-panel - Properties panel for post-it elements

License

MIT

Contains parts of (bpmn-io) released under the bpmn.io license.