bpmn-io/diagram-js

A toolbox for displaying and modifying diagrams on the web.

diagram-js

A toolbox for displaying and modifying diagrams on the web.

Built with diagram-js

Some libraries / applications built on top of diagram-js:

Part of bpmn.io

• bpmn-js - A BPMN 2.0 viewer / modeler (Demo)
• cmmn-js - A CMMN 1.1 viewer / modeler (Demo)
• dmn-js - A DMN 1.3 viewer / modeler / table editor (Demo)

External

• Apache Seata Saga Designer - A visual orchestration tool for Seata Saga transaction (Demo)
• archimate-js - An ArchiMate diagram viewer and editor (Demo)
• chor-js - A BPMN 2.0 Choreography diagram viewer and editor (Demo)
• Node Sequencer - A Node-Based Sequencer for the Web (Demo)
• object-diagram-js - An object diagram viewer and editor (Demo)
• postit-js - Create Post-it boards on a canvas editor (Demo)

Resources

• Issues
• Changelog
• Contributing Guide
• Examples

Development

Prepare the project by installing all dependencies:

npm install

Then, depending on your use-case you may run any of the following commands:

# build the library and run all tests
npm run all

# run the development setup
npm run dev

# run tests (single run)
npm test

Expose an environment variable TEST_BROWSERS=(Chrome|Firefox) to execute the tests in a non-headless browser.

Note

We do not generate any build artifacts. Required parts of the library should be bundled by consuming libraries as needed instead.

License

MIT

diagram-js's Issues

Better separate modeling/viewing concerns in Canvas

At the moment the canvas relies on the commandStack for drawing shapes and connections. Ideally we would implement low-level renderering operations irreversible, giving the user the choice whether or not to use the commandStack to build a reversible operation on top of it.

Evaluate usage of #marker-end on Firefox

We should check, whether we can get our current mechanism for connection start/end markers to work on firefox. If not, we should switch to another mechanism.

Add context pad infrastructure

A context pad displays visual information for the user contextual for a given shape. We should provide such an infrastructure for diagram-js.

Provide better module structure

We need to provide an easier to understand module structure. It should allows folks to write plug-ins for diagram-js as node modules and let others consume these modules in a sane way.

This includes that we should get rid of the distinction between modules (what is loaded) and components (what is explicitly activated). In fact, each module should declare what is explicitly activated as well as which other modules it depends on.

This means, instead of directly activating modules on load like this

var diagramModule = require('../di').defaultModule;
diagramModule.type('foo', [ 'FOO' ]);

we should default to something like

// foo/Foo.js
module.exports = Foo;

// foo/index.js
module.exports = {
  __depends__: [
    require('../core'),
    require('diagram-js-some-plugin')
  ],
  __init__: [ 'foo' ],
  foo: [ 'type', require('./Foo') ]
};

Connection .djs-hit not updated after layout / crop

The connection .djs-hit element that is added by interaction events and ensures the user can select connections is not properly updated after connection layout / crop.

This makes connections unselectable after connected elements have been moved.

Must be fixed in InteractionEvents, possibly updating on connection.changed.

Consistently mark drag-affected shapes (make moving elements awesome)

We should attach the drag marker class djs-dragging more consistently to all move-affected elements, including incoming and outgoing connections. This would allow us to create better visualizations during drag.

Old

New

Modeling Rules

Refactor: Shape

Make Shape Object plain again.
Currently shape has methods...
Move that methods to Helper.

Setup infrastructure for BPMN modeler

Add the ability to test project across all major browsers

Is that possible to do annotation?

Hi,

I am using the old js library https://github.com/camunda/camunda-bpmn.js.

After the update of signavio (from 7.2 to 7.8), it seems to be that the new model xml file can not be rendered by the old library.

I would like to replace it with the new one. Does the new library provides the smiliar function like drawing an annotation around a task? If yes, how can I do it using this new library?

thank in advance.

Best,
Huiying

Create bower packaging

Add testcase for #7

Align names of services / utilities

At the moment we have no clear naming scheme of services and their files.

• files are usually written capitalized (e.g. src/core/Canvas.js), sometimes not (e.g. src/util/underscore.js)
• services are exposed as lower cased versions of the file names src/core/Canvas.js -> canvas

I'd like to propose a naming scheme for services / utilities and align the file names we use across diagram-js so that each file name reflects the name of the exposed runtime service.

Proposal

• Name service constructors uppercase, but the files according to the exposed service instance. Example: The canvas service would be defined in the file src/core/Canvas.js by a constructor called Canvas
• Name and expose utilities, i.e. services that expose only static utility functions upper case. Example: The snapsvg wrapper would expose the library via snap in the file src/draw/Snap.js.

Add ability to redraw shapes (during / after updates)

Implement basic modeling operations

We should implement the basic modeling operations here and make sure we have the chance to re-use them for different editors (bpmn-js, ...).

Publish prototype on the web

bpmn.io website

Implement an internal diagram-js data-model

We need to document and extend the internal model used by diagram-js.

Our model looks as follows

Base

• optional label
• optional parent

A Shape

• width
• height
• x
• y
• list children
• list outgoing
• list incoming

Connection

• source
• target
• waypoints

Details of Drag and Drop implementation

• Consistent way of Element positioning via transform attribute
• Using groups for Drag and Drop

Remove snapsvg

Performance studies (bpmn-io/bpmn-js#126) have shown that snapsvg is really slow. Replacing it will result in improved rendering performance and better code structure.

Things to replace

• DOM manipulation (attribute handling, node creation, insertion, remove)
• intersection algorithm

Path

Build utility methods to interact with SVG to better separate SVG concerns from diagram-js:

snapsvg: explicit, SVG hiding syntax

var paper = Snap.create();
var group = paper.group();

group.attr({ transform: ' .... ' });

own implementation: native SVG + utility methods

var svg = tsvg.create('svg');
var group = tsvg.append(tsvg.create('g'), svg);

tsvg.attr(group, { transform: ' .... ' });

Add Shape from Palette

A shape can be added by dragging from palette.

• A visual indication shows, where the shape will be added
• The add operation completes once the user drops the shape
• Add is handled through the command stack
• Escape key and mouse up outside of the canvas cancels the operation

Add method to destroy a created diagram.

Via Diagram#destroy() the diagram should be removed from the DOM.
Additionally, registered components should be notified that they are about to be destroyed via a diagram.destroy event.

Check IE9 compatibility of basic functions

Implement command history service

• Implement service to support undo / redo
• module should register their commands on the service.
  • multiple modules can register on the same command id

Implement simple palette

A embedded palette allows

• redo / undo / add of shapes

Rendering of BPMN 2.0 Elements

Add the ability to execute behavior before and after a command

This allows us to decorate a command by executing other commands and thus build more complex command chains.

Examples

The following list shows basic commands and how they may be built on each other:

label.create
connection.create > label.create
shape.create > label.create
shape.appendShape > label.create + connection.create

Spike: Add comment box as HTML overlay

We implement a comment field via a HTML overlay.

Goals

• implemented via overlay API
• only shown up to a certain zoom level
• clickable (i.e. the user can interact with it)
• other HTML overlays may be added, too

Hints

• absolute positionioning above the element, carried out by overlay api
• Canvas#getAbsoluteBBox()

Visual improve demo screen

Drag & Drop

The following should be contained:

• Elements may be dragged based on customizable rules
• The user gets visual feedback on whether it is allowed
• Drag / Drop is performed if allowed

Toolkit API embedding a BPMN diagram

There exists an example of how to embed bpmn.io into an application to show a process diagram.

BPMN Import/Export

Add the ability to import / export BPMN 2.0 xml. This depends on a few things.

Spike

• Investigate usage of BPMN 2.0 meta model
• Investigate on DI (e.g. Signavio exports subprocesses as a separate DI, which is allowed according to spec)

API

• Import XML -> JS
• Export JS -> XML

Constraints

• Usable API for working with JS representation
• Allow validation of imported files (long term)
• Extensible with custom elements / types (long term)

Add api to resize and change viewport of diagram

It should be easy for us to create a simple API that facilitates the

<svg viewBox="0 0 100 100">

for scaling and positioning a diagram within its bounds.

Hide diagram elements

It should be possible to hide elements, rendering them but making them invisible for the user.

Use of history could cause corruption of diagram data

• move
• undo
• undo
• redo
• redo

--> TypeError: shape is undefined

SvgFactory for BPMN elements

diagramjs should not know about drawing details of BPMN shapes ....

Redo / Undo

Create bendpoint animation prototype

Childs and undo issue

• Remove with undo a child of a parent container
• Try to drag and drop the container
• --> Error message in console

Refactor Canvas.commandStack.register()

Canvas will not be the right place to have all commandStack.register() calls ....

• Need to a general understanding where we want to have this definitions
• Refactor existing code base.

Visual indication when adding a shape from palette

Follow up for #7
Need to define how the look and feel should be when adding shapes.

Provide infrastructure for layering of visual elements

We should be able to organize diagram elements in layers.

This gives us a quick and simple solution for the following problems:

• control visibility of certain diagram components
  (e.g. display labels always on top)
• display and/or toggle overlays
• control the visibility of diagram components during printing

Implementation Notes

• Layers may be logically (i.e. in term of precedence rules such as overlay always directly on top of annotated element)
• Absolute layering may be easily implemented using groups

Add drag-over allowed check via rules

Model new connections (connect elements)

It should be possible to connect a connection end to a shape

• shapes should have a few 'docking points' for connections
• during connection a visual indication is shown
• connect command is fired and performs the actual connection

Same behavior for creating a new connection.

Allow diagram services to be mocked for testing purposes

Sometimes it is handy to mock diagram services during tests.

We should provide an easy to use infrastructure to do so.

Add element fails

• Add an element
  --> console: Error: shape must have an id

Use didi in favor of home-made DI solution

We need to have a more flexible dependency injection library to be able to implement various use cases.

A candiate is didi.

The svg group 'viewport' is displaced and doesn't scale accurately

While the main svg tag gets correctly placed, the g.viewport tag is slightly misplaced to the right and the bottom as you can see here

Furthermore while working on #51 I also realized that the scale calculations are sometime off by a few pixel as you can see here

In both pictures the black border marks a 800px wide and 500px tall div which is the canvas container. The used .bpmn file is the pizza-collaboration.bpmn which is also used in the bpmn.io demo.

Both issues can be seen in Firefox 33.0 and Chrome 37.0.

Centering of diagram

It would be good to have a method to center the rendered diagram on the canvas.