joshpoll/diagram-js

A toolbox for displaying and modifying diagrams on the web.

intro

Hard fork of diagram-js to prototype bluefish.

Gestalt principles in diagrams:

• proximity -> alignment?
• similarity -> style + alignment?
• common region -> nesting
• element connectedness -> arrow/line

relations?

so far these are all extrinsic equalities. none of them actually rely on user actions except maybe common region?

proximity

just alignment for now? need something maybe like alignment and also spacing/clustering? like repeating patterns vs fixed offsets I think

entry with node id as key and positions as value tuple. select on subsets of the tuple fields

similarity

entry with node id as key and style attributes as value tuple. select on subsets of the tuple fields

common region

inside(a, b)

• these can be induced by actual objects maybe or also by groups that are used to move data around

element connectedness

connected(a, b)

where intrinsic equalities come in

• there are more structured similarities in Geoffrey's diagram that would typically require some synthesis to discover the structure of. we can sidestep this maybe. remains to be seen. need to do some more observations

---

As of version 1.0.0 this library exposes ES modules. Use an ES module aware bundler such as Webpack or Rollup to bundle it for the browser.

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.1 viewer / modeler / table editor (Demo)

External

• Node Sequencer - A Node-Based Sequencer for the Web (Demo)
• chor-js - A BPMN 2.0 Choreography diagram viewer and editor
• postit-js - Create Post-it boards on a canvas editor (Demo)

Resources

• Issues
• Changelog
• Contributing Guide
• Example Application

Hacking the Project

To get the development setup make sure to have NodeJS installed. If your set up, clone the project and execute

npm install

Testing

Execute npm run dev to run the test suite in watch mode.

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

Package

Execute npm run all to lint and test the project.

Note: We do not generate any build artifacts. Required parts of the library should be bundled by modelers / viewers as needed instead.

License

MIT