Gridplumb: a grid-based diagrammer for the web

Share: Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInShare on RedditEmail this to someonePrint this page

In an earlier post, we mentioned how the jStart team is constantly learning, taking advantage of the abundance of high-quality open source projects, and putting them to work for our clients.

When faced with a new technological challenge, our solution architects will start with a thorough review of existing technology (both IBM and open source). More and more, we’re finding open source software with good pedigree and appropriate licensing to kick-start the effort.

Building Gridplumb

As one very specific example, I’d like to introduce Gridplumb, a grid-based diagrammer widget.

Our client was looking for a web-based tool to build domain-specific process-like diagrams. As opposed to the usual free-form drag+drop editing canvas, we wanted to optimize the layout for speed and cleanliness by adhering to a strict grid.

As usual, we searched through the leading IBM technology and across the open source landscape and we were surprised to find that none of the existing projects/solutions seemed to fulfill our requirements.

The closest fit was the award-winning IBM BlueworksLive business process editor, but it fell just short for our use case:

  1. It lacked the deep extensibility and customization required by our client; and
  2. Our end users were not familiar with the BPMN visual notation and had little interest in learning it.

Despite these limitations, we admired many of the design decisions that were made by the BlueworksLive team, and we set out to build a similar diagramming widget with features like

  • Fixed size nodes (with truncated content) to keep the diagram clean and orderly;
  • A constrained layout design which produced consistently readable content with minimal layout tweaking from the end user; and
  • An emphasis on rapid data entry

With these design points in mind, we looked for open source componentry that could help us reach a usable prototype as quickly as possible. We looked at technology samples like the D3 Collapsible Tree, but we found them lacking in one way or another (in this case, the lack of support for back-references was a showstopper). Although we didn’t find a perfect fit, what we did find was:

  • jsPlumb, an SVG/Canvas based library for drawing connectors between elements on a page; and
  • Gridster, the “drag-and-drool” layout plugin for jquery

My theory was that, if we could combine these two libraries into a single widget, we would be well on our way to having our custom diagrammer.

Overcoming challenges

While both libraries include their own drag-and-drop functionality, we were delighted to see that jsPlumb allowed us to easily disable that. We afixed the jsPlumb connection points to the left and right border of the nodes and, using Grister’s well-thought API, were able to update the connectors from the Gridster drag events. We were especially impressed with the ease with which jsPlumb allowed us to customize the behavior of the connectors and, in the end, we felt that the mixture of DOM-based nodes with Canvas/SVG-based connectors worked quite well.

It was clear that this path was viable, but our early prototype suffered from 2 critical issues:

  1. Auto-compacting layout behavior from Gridster (e.g. see; and
  2. “Connectors everywhere”, a result of the inherent complexity in the domain models which our client was trying to diagram

The team got to work on these stumbling blocks and we managed to solve the first one through good old-fashioned monkey-patching of Gridster. Instead of making edits directly to the library, we opted to keep our edits outside of the library to ease the integration of library updates (and because our goal was a little different from the stated goal of the project).

For the second issue, the team came up with the following design: Instead of trying to auto-route the connectors around one another or asking the users to manage the layout of the connectors themselves, we decided to always route connectors in the “gutters” between the rows and columns. While the resulting overlap in the connectors seems undesirable at first glance, the result was a compact layout that minimized the amount of space that is taken by connectors, allowing users to focus their attention on the contents of the nodes.

Hover behavior on connectors

To help the user identify which nodes are connected, we added a highlight to the incoming and outgoing connectors when a node is hovered (and hovering a connector would highlight its source and target nodes as well).

Feedback Wanted

Although we make no promises regarding its continued support, this prototype is now available for feedback (and contributions) from the ibmjstart github repo at

Interested in helping us improve the gridplumb prototype? Have a better solution? We’d love to hear from you!

Share: Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInShare on RedditEmail this to someonePrint this page

Leave a Reply