JointJS: JavaScript diagramming toolkit

Tweet about this on TwitterShare on FacebookBuffer this pageShare on RedditShare on LinkedInShare on Google+Email this to someone

Guest post by David Durman on JointJS, a JavaScript Diagramming tool (if interested in the topic of online modelnig tools, don’t forget to check our list of tools). Enter David

JointJS is a complete toolkit for building fully interactive diagramming and modeling applications that run in modern browsers. JointJS core library is open source. A commercial toolkit, Rappid, is available, that implements all the aspects of a diagramming application. A full feature set, documentation, the library itself and other useful information can be found
on our site at http://jointjs.com. A sample demo application is located at http://jointjs.com/rappid.

JointJS follows MVC architecture design and the programmer usually works with models, not views (as it is with graphics libraries). These models (elements and links) build up a graph which is rendered on the screen using browser native SVG (but it is possible to use HTML inside elements too). When the user interacts with the SVG document, models are updated accordingly. By listening to events triggered on the graph, the programmer can respond to all changes and perform custom actions. Graphs can be serialized to/from JSON format with single function call.

JointJs online modeling

Ready-to-use shapes are available for well-known diagrams (ERD, Org chart, FSA, UML, PN, DEVS, and others) and new shapes can be either defined in a declarative fashion reusing existing SVG documents or programmatically rendered.

Commercial plugins implement a wide range of UI components such as Stencil (element palette), Command manager (undo/redo), Selection, Clipboard, Halo (element tools), Inspector, Paper scroll & pan,
auto layouts and much more. We’re now finishing testing for our Channel plugin that synchronizes graphs between server and client (possibly multiple clients) which effectively implements real-time collaboration.

Rappid - JointJS

Our goal is to build a powerful and modern toolkit for building visual languages of various kinds. Wherever possible, we try to stick to technologies and frameworks that are known to JavaScript developers so that the learning curve stays shallow. That also means that the standard technologies (SVG, HTML 5, CSS 3) and frameworks (jQuery, Backbone MVC framework) that the programmer uses with JointJS are useful to him elsewhere. We would really appreciate your feedback and would be happy to answer all your questions.

Tweet about this on TwitterShare on FacebookBuffer this pageShare on RedditShare on LinkedInShare on Google+Email this to someone
Comments
  1. Javier Cánovas
  2. David Durman
    • Dan
      • David Durman
    • Javier Cánovas
    • Tanya
      • David Durman
        • Tanya
        • Tanya
          • David Durman
  3. Tanya

Reply

Your email address will not be published. Required fields are marked *