Updated version of a guest post by David Durman where he presents JointJS, a JavaScript diagramming library (if interested in the topic of online modeling tools, don’t forget to check our list of tools) and its new features. Enter David.
What is JointJS
JointJS is a JavaScript diagramming library based on SVG, used to develop visually rich, browser-native applications: interactive flowcharts and mind maps, BPMN editors, workflow builders, org charts and many other diagramming UIs.
Examples of diagramming UIs you can create with JointJS
JointJS is available in two versions: JointJS, an open-source edition offering an essential set of diagramming features, and JointJS+, a professional version that provides an extended set of features along with priority support from the library creators. In addition to thousands of developers, the library is used by companies such as IBM, Oracle, Boeing, HP, AirBnB, and UiPath.
Key features
JointJS renders diagrams in SVG, which results in all elements being present in the webpage’s DOM. Using SVG as the rendering engine significantly aids in diagram accessibility and simplifies debugging, as elements are not part of a bitmap, unlike with HTML Canvas.
The built-in features backed by 10+ years of development include ready-to-use shapes (e.g., standard, BPMN, VSM, org chart, UML), automatic layouts (e.g., grid, tree, force-directed), drag & drop functionality, and more than 40 UI components such as minimap, element palette, toolbar, inline text editing, and other useful features. While novice developers will appreciate the ready-made functionalities, the library’s true value lies in its complete customizability, allowing advanced developers to tailor every feature to specific requirements.
JointJS provides 160+ template applications, complete with source code, to help developers jumpstart their projects. The variety spans from popular applications such as BPMN editors, interactive mind maps, generic diagram makers, and Kanban boards to more specialized examples like industrial applications featuring Sankey diagrams or SCADA/HMI systems.
In the world of software development, the option to build every feature from scratch is always present. Our development team compared these two approaches—build versus buy—for a generic flowchart builder and arrived at a stunning time and cost savings of 8,414 hours and $520,464, respectively. The detailed calculations and effort comparison can be found in our ROI analysis.
Integration with JavaScript frameworks
JointJS is framework-agnostic, meaning it works seamlessly in any JavaScript environment. To see how it integrates with various frameworks, we recommend exploring the React diagram, Angular diagram, Vue, or Svelte pages, or specific demo applications available for the major JavaScript frameworks.
JointJS as the building block of your next application?
The rising demand for visual and no-code/low-code applications requires companies to modernize their product offerings and drives new technology innovations. JointJS serves as the hidden force enabling individual developers, startups, and larger organizations to deliver great UIs and turn their ideas into reality. With that in mind, we’ll continue to deliver a codebase that helps you innovate and saves your precious time.
We would really appreciate your feedback and would be happy to answer all your questions!!!
FNR Pearl Chair. Head of the Software Engineering RDI Unit at LIST. Affiliate Professor at University of Luxembourg. More about me.
Nice tool. It’s really useful to move diagramming tasks to the web.
I’m very interested in how the layout is supported. In this kind of tools where diagrams can be created programmatically, the task of assigning positions (i.e., x and y) to the elements is usually very boring.
I have the feeling that, in general, it has to be the end-user the one that has to arrange the elements in a correct (or at least, understansdable) layout.
I’ve seen that this tool incoporates support (let’s say basic) for this. Do you plan to include more advanced layout support?
Thanks in advance!
Hi Javier,
Thanks! We’re happy to hear you like our tool. We currently support two auto-layout algorithms: Force-directed, which is suitable for undirected graphs, and one for directed, layered, graphs based on the Sugiyama framework. We plan to add more layouts in the future (e.g. Tree layout, Cluster layout and probably more). It always depends on the actual application what layout algorithm is suitable.
Thanks for the feedback! If there is a certain layout algorithm that you’d like to see in JointJS, please let us know.
Very nice library.
It would be nice if you could support linking nodes to links also. For example, to support modeling assocative classes in object modeling (a class link to an association).
thanks,
Thanks Dan, that’s indeed a good suggestion. We’d like this feature to land to JointJS 1.0 that we plan to release in the beginning of the next year. It should then be possible to link nodes to nodes, nodes to links and even links to other links.
Hi David,
nice to read that! I’ll download the tool and give it a try to know more.
Thanks!
Hi,
I looked at JointJS just recently and didn’t see the feature of auto layout. That’s good to know that now it’s partially supported. We would be especially interested in StackLayout, when elements of a container are placed one above another and stretched to match the size of the container.
Hi Tanya,
Thanks for the suggestion. Do you have any visual example of such a layout? I think I know what you mean but want to be sure we’re on the same page regarding the StackLayout. I might indeed be interesting to have this built into JointJS.
Thanks!
David,
Thank you for the prompt response. I prepared a screenshot for you, but this site doesn’t allow me to attach anything, what is the best way to give it to you?
I am interested in seeing the complete list of available commercial plugins, do you know where we can find it?
Thanks!
Tanya,
Great. You can send it to my email: [email protected]. The complete list of commercial plugins is available here: http://jointjs.com/about-rappid.
David,
JointJS is very powerful and, based on the documentation and samples, is easy to use.
My another question is about containers.
I reviewed several samples with elements looking as container:
– http://www.jointjs.com/demos/devs
– http://www.jointjs.com/demos/umlsc
They look like a node containing another element, but in fact one figure was just placed above another. For example, in the umlsc example, “sub state 4” is a sibling of “state 2“. Is that correct? Is there support for diagram containment in JointJS?
Thanks.
Tanya,
JointJS indeed supports nesting of elements within other elements to an arbitrary level. We call it “embedding” and there are basically three methods for dealing with this that are described in the API reference here: http://www.jointjs.com/api#joint.dia.Element:embed.
In the umlsc example, “sub state 4” is embedded into “state 2” and is treated as its child. In general, hierarchical diagrams can be implemented in two ways. One is using the embedding feature. The other would be creating another graph (and associated paper) on the fly and populating it with child cells (elements and links). The former is easier to implement. The latter is probably more suitable for larger hierarchies, or put differently, layered graphs/diagrams. On the UI level, you can then decide how you’d like to display the child-parent graphs.
David, thank you for pointing to this method, now I do see the “states.s2.embed(states.s4);” . I was confused by the code of the model.