404 Not Found

nginx
Javascript Diagramming and Drawing Libraries – BranchPoint, Inc.

Javascript Diagramming and Drawing Libraries

By Vector Graphics, , , ,

At some point I’ll be looking for the ability to create diagrams, not just pictures, using Javascript. These need to include the ability to capture topology and make image maps. I don’t think any of these meet all those requirements but they appear to be a good starting place.

We need to start with the Raphael library, providing cross browser abstract layers for rendering vector objects.

Joint
The following bulleted features are stolen directly from their home page:

  • connecting vector objects with various types of arrows
  • interacting with connections and objects
  • custom handlers for various events
  • bent lines smoothing
  • ready-to-use elements of well-known diagrams (ERD, Org chart, FSA, UML, PN, DEVS, LDM)
  • hierarchical diagrams
  • serialization (to/from JSON format, SVG export only in browsers that support it)
  • extensible
  • customizable
Draw2D & Graphiti is a library pair that even promises “Create Visio like drawings, diagrams or workflow editor in Javascript”. The demo page is amazing.

Documentation Tools

I really like the look and format of their documentation, so I took a side trip to try and find out what tool they are using. The source of the page wasn’t helpful. Googling pointed out a number of contenders. Even though Rhino-based JSDoc, successor to jsdoc at sourceforge.net was the “800lb gorilla in Javascript documentation” it is no longer actively developed. Looks like the winner is ext-doc which can put out some gorgeous documentation.

Dojo

While Dojo does far more than vector graphics, it is well known for charting and graphing and it’s sharp looking gauge package in particular.

Processing.js

Wow, Processing.js is so much more than a graphics library. It includes its own graphics language but can also be used in a pure Javascript mode. The demos are amazing. This probably requires more up-front commitment but with a substantial down-stream payoff.

This is definitely a heavy-weight library because it uses JavaScript to compile the Processing language, originally targeted at Java, to JavaScript. Yes, you can write natively in JavaScript but I’m not certain that is the right way to use this tool.

Paper.js

Paper.js has its own set of impressive demos and seems much more approachable than Processing.js. This is a nice tool, powerful, not too complicated.

CAKE

CAKE is a scene graph library that includes tweeing. This is the most Flash-like library in capabilites: the Missile Fleet demo runs at nearly 300fps on my PC. The documentation is a bit thin but it exists and there is only one tutorial. This is a go-to for fast, flashy graphics.

Leave A Reply