.jpg)
Welcome to our blog post, "15 community-designed demo apps: our top picks!" As developers of a diagramming library, we understand that diagramming is not a one-size-fits-all solution. With endless use cases in mind, we actively collect ideas from our customers, community members, and internally to expand our collection of demo applications that can be used out of the box to solve specific requirements. From org charts to sequence diagrams, mind maps to Marey charts, our community has contributed various demo applications that showcase the versatility of JointJS or JointJS+.
In this blog post, we will highlight our top picks from the community-designed demo apps, as well as explore intriguing diagramming features that may initially appear simple to create but become more complex as you delve into building them. We also encourage you to share your ideas and contribute to our growing library of demo applications 👉 https://github.com/clientIO/joint/discussions.
So, without further ado, let's dive into the world of diagramming and discover the top diagramming apps designed by developers like you.
First up on our list of 15 demos is a powerful example of leveraging the flexibility of JointJS+. This demo, inspired by Ryan from South Africa, showcases how users can define an organizational structure and populate it with people in a drag-and-drop fashion. By combining tree and grid layouts, and customizing the stencil, this demo demonstrates how JointJS+ enables you to create an organizational structure with ease.
View the Corporate organizational chart demo in a new tab.
Coming up next, we have an exciting example that demonstrates the use of sequence diagrams, all thanks to the request of Igor from Slovakia to enhance the original demo with more interactive features.
Sequence diagrams are widely used to visualize interactions between different components in a system. In this demo, we showcase the interaction between the browser, web server, and database server, highlighting the crucial messages transmitted to execute an HTTP request.
View the Sequence diagram demo in a new tab.
The next demo – devised by a company building intelligent control software – focuses on the dynamic capabilities of our diagramming library. If you're interested in animating elements in your diagrams, this demo will be of your interest. You can utilize the transition feature on the model attributes or create custom element views. Furthermore, as JointJS shapes are made up of SVG, you can take advantage of the browser's Animation API to add motion and interactivity to your diagrams.
View the Electric generator demo in a new tab.
Shifting gears from electricity to transportation, the next demo explores the use of Marey charts. While Marey charts are commonly used for analyzing transportation systems like bus or train schedules, which is where the original idea of creating such a diagram came from, they can also be applied to other use cases, such as workflow analysis. Explore how our diagramming library allows you to create Marey charts and unlock their potential for various applications beyond transportation systems.
View the Marey chart demo in a new tab.
Imagine having to build an application like a floor planner from scratch. Consider all the features that need to be taken into account, such as snaplines and measurements. One of these capabilities is rectangular layout, which allows you to define the arrangement of elements in a rectangular shape, aligning them in rows and columns to create visually appealing and organized diagrams.
View the Rectangular layout demo in a new tab.
Speaking of automatic layouts, we received another request from one of our valued customers who wanted to create a hexagonal grid. To achieve this, we utilized the Honeycomb library to handle the mathematical calculations and JointJS to render the grid and shapes, making everything interactive. The end result is a visually appealing and interactive hexagonal grid that you can now explore for yourself.
View the Hexagonal grid demo in a new tab.
Let's take a moment to travel to the Land of the Rising Sun, the birthplace of our Yamazumi 3D chart. With this special type of diagram, you can effortlessly visualize and analyze work distribution and balance in a production process, making it a powerful tool for process improvement and optimization.
View the Yamazumi 3D demo in a new tab.
Explore the Bandwidth demo, a creative and practical application of our diagramming library. Check out the demo and learn how to create resizable Bandwidth shapes with dynamic frequency labels.
View the Bandwidth demo in a new tab.
Next, see the Diagram index demo written in React, Vue, Angular, and Svelte from a company building a value chain modeling application and showing how to display multiple JointJS diagrams with a TreeView component for seamless navigation. This allowed the company to gain a comprehensive overview of all elements within their diagrams, facilitating organized and efficient work.
View the Diagram index demo in a new tab.
Demo #10 shows how to manage the pool of objects that are either available in the stencil or already used on the canvas. Such a feature is useful if the elements of your diagram represent real-world objects - objects that can exist one at a time and cannot be easily duplicated.
View the Finite object pool demo in a new tab.
Looking for a way to export a diagram with all its contents to PDF? Check out the next demo application that demonstrates this handy feature using the great jsPDF library. In addition to PDF, you can also use other file types for export, such as PNG, JSON or our beloved SVG.
View the PDF export demo in a new tab.
The next demo showcases how to display tooltips when hovering over a port. The tooltips provide detailed information about the port connection, including what it is connected to and how, gathered on-demand from the graph just before the tooltip is displayed. Cool, isn't it?
View the Dynamic tooltip content demo in a new tab.
Some of the demo applications cover broader use cases, others are more niche functions required for a very focused reason. One of the latter is the link list inspector, which shows how to configure the inspector, write a custom highlighter, and add a context menu with a list of links. See the demo for yourself.
View the List of links in inspector demo in a new tab.
Need to configure an inspector field to control multiple attributes simultaneously? This demo showcases an option to define a custom element that binds a high-level attribute (textAlignment) to multiple presentation attributes (textAnchor, textVerticalAnchor, x, y) for efficient configuration.
View the Change element text alignment in the inspector demo in a new tab.
Last on our list of the 15 best demo apps designed by our customers and community is the drag & drop port. If you want to include ports in your stencil and enable drag and drop functionality to elements with the ability to edit port positions and remove them later, check out our demo below.
View the Port Drag & Drop demo in a new tab.
We've included 15 examples of apps that were originally designed by our community and built by the JointJS team. We release new demos every week (every Wednesday), so if you're looking for a diagramming library to solve a specific use case, want to visually express some data, or need to see a specific diagramming feature in action, let us know! As stated above, we collect all ideas on Github Discussions, so feel free to add yours 👉 https://github.com/clientIO/joint/discussions.
Happy diagramming!
