While diagramming is a tried-and-true technique that allows us to break complex problems down into manageable chunks, AI is an upstart technology that has sprung up into the mainstream imagination only recently—but promises to revolutionize everything about the way we work. While both tools are incredibly versatile, we will give our thoughts specifically on the ways they can be combined in order to maximize each other’s potential.
What does diagramming let us do? It allows us to compile individual data points into a complete picture more intuitively than a spreadsheet. It enables us to refine vague ideas into concrete processes and to translate those into valuable insights more efficiently than a stakeholder meeting. It offers to give us a bird-eye view of a problem space together with a drill-down look into its details more succinctly than a text document. In short, diagramming makes the saying “a picture is worth a thousand words” true in business.
Meanwhile, AI’s ability to take vague natural-language prompts and output plausible responses has been applied in writing emails, offering customer support, and writing code snippets in a fraction of the time required by humans. However, AI’s limitations have also come to the spotlight, making us realize that it is not a superintelligent personal assistant (yet?), and that its outputs always need to be double-checked by a human before being used in the wild.
We will start by introducing several example use cases that combine diagramming and AI in a professional setting, where the capabilities of the two technologies manage to take the grind away from creating and consuming diagrams. Then, we will illustrate how we went about developing one of these use cases into a real AI mind map generator application.
While reading the article, we want you to consider your own use cases where your customers could benefit from the combination of the two technologies. You will see that with the right tools, the power of diagramming and AI can be harnessed easily in order to enhance your existing solution or bring a new one to market in no time.
So far, the biggest challenge in applying AI seems to be coming up with use cases that are applicable to one’s own business. What does “revolutionizing everything about the way we work” actually mean—right here, right now?
Here at JointJS, we have had the chance to closely observe the diagramming space for more than a decade, so we have put together the following list of use cases where AI can enhance the functionality of diagrams in order to address some of the common challenges involved in creating and using them. You should not think of this list as an exhaustive collection of ideas (there are only four of them, after all). Instead, think about your own domain—your own customers, your own bottlenecks, your own unique selling points—and see if you can find a new use case that applies to your company and its challenges:
Transform a text prompt into a diagram that automatically follows a prescribed structure (e.g. a mind map)—so that your users can save the effort required to manually lay information out on the screen and instead focus on the goal of communicating complex information effectively.
Let the AI refer to a flowchart that describes a business process—so that it can act as an interactive voice assistant that can guide your employees to respond to various situations according to standard operating procedure.
Provide a diagram to the AI and ask it to give you suggestions on how it could be improved in terms of layout, styling and/or accessibility—so that your process modeling people save time when creating them and your business people save time when reading them.
Take an existing diagram and ask the AI to generate an accessible description for it (e.g. a textual description of all elements and their relationships)—so that you can build software ethically while staying ahead of government regulation like the Americans with Disabilities Act or the European Accessibility Act (coming in 2025!).
As you can see, the main promise of AI is that it will make it easier to do one’s job effectively, and that it will provide automated tools for tasks that would previously require the intervention of a human. Let’s look at the text-to-diagram use case in detail to find out how a high-level feature like this can actually be implemented in your application:
Our AI mind map generator example application allows the user to transform a text prompt into a diagram that follows the prescribed structure of a mind map. It connects with the ChatGPT API to provide the AI functionality, then does some light post-processing on the received response, and finally interprets the data as a JointJS diagram that can be inspected, edited, and exported by the user.
See the application in action.
Why do we think this is a good example? Mind mapping is a powerful technique that lets us organize information in an organic way, which helps us process it quickly. Our thesis here—the use case where AI brings value to a domain that we understand—is that the users of the AI mind map generator application would appreciate having mind maps automatically created for them. The rationale is that this would save your users the effort of manually laying things out on the screen, while still allowing them to make adjustments to effectively communicate their ideas.
Creating diagrams manually can be tedious (even though there are tools which make it easier, like automatic layouts, shape libraries or automatic link routing). AI can help your users by automating additional manual steps of diagram creation. However, it also has some caveats which you need to understand and mitigate before presenting the solution to users.
The first step is to choose the right AI for your use case. There are many providers to choose from, e.g. OpenAI, Anthropic, Perplexity, Llama, Gemini or HuggingFace. Each has their own collection of AI models, and each of those has their own strengths, limitations, and pricing. It is currently a good time to experiment with AI—the field is crowded and providers are competing for you to implement your use case using their platform, which means that pricing is cheap (or free), and that it is relatively easy to switch between different solutions.
In the case of our AI mind map generator application, we set up an OpenAI free account and created a secret API key according to OpenAI’s API reference documentation:
As mentioned by OpenAI, the API key needs to stay secret at all times. Therefore, our next step was to set up a backend server with which our user-facing website would communicate—one that would be able to take user input, authorize it with our secret OpenAI API key, and send the request to the OpenAI API endpoint. ChatGPT usually takes several seconds to reply to queries, so we also used this opportunity to implement server-side caching of most common user queries and their related ChatGPT responses to improve the user experience.
We used Appmixer (an embedded integration platform developed by our team) to do these tasks in our AI mind map generator application—but you can choose to spin up your own local server, or to use a cloud provider, instead, to do these tasks for you:
When our backend was ready, we turned our attention to the frontend. We created a JointJS application with an input dialog asking the user to provide user text, and a “Generate Mind Map” button, which sends a Fetch request to our server and awaits the JSON response from ChatGPT. The user can provide any text, but obviously some prompts work better than others. For example, if the user asks the AI to describe a process (“Describe the process of…”), it responds with a mind map presenting some steps which make sense in the context of the prompt. Similarly, if the user provides several paragraphs of text, the AI responds with a mind map that summarizes the text.
However, if the user does not provide enough material for the AI to work with (or if the AI is not clear about its task) the generated mind map might not end up being very useful. For example, the prompt “Hello, world!” results in a mind map with a single element where the text is “Hello, world!”. The “garbage in, garbage out” principle applies here!
Since our example uses an older version of ChatGPT (3.5), we also need to account for the possibility that some responses from the AI model are not formatted correctly, even though we do provide additional context to ChatGPT before passing in the user text ("Give me a structured JSON document with each node having a `text` and `children` fields representing a mind map extracted from the following text: [QUERY]").
This is because ChatGPT 3.5 does not support structured output—an option to precisely define the requested JSON schema in order to be sure of what comes back. Many AI models currently support structured output, while others do not. If your chosen AI model does not offer this option, you should consider post-processing the response before using it in your application.
In our case, we set up the frontend to pass all received responses through the jsonrepair package, which ensured that all responses were valid JSON that could be parsed as a JointJS diagram. Et voilà:
The most significant problem with AI is its tendency to hallucinate—to make facts up from thin air. Human intervention is often needed to make AI’s output correct and usable. That is where JointJS diagram editing features step in—they make it easy for your users to modify the diagram as necessary.
To account for this problem in our example application, we made all text labels of AI-generated diagram elements editable, and we also made the diagram elements draggable. For additional interactivity and ease-of-use, we added zooming and panning of the diagram area, undo/redo of user actions, and diagram export (in this case, as SVG):
While simple, our AI mind map generator application manages to fulfill key requirements:
See the application in action.
We would like you to treat this example as a springboard for your own ideas. Try to think about your domain, your expertise, and your customers—and consider how they may benefit from the combination of diagramming and AI. It is surprisingly easy to implement, and surprisingly valuable to have. Business value for you and product satisfaction for your customers? That’s a win-win for all in our book.
AI promises to bring unlimited power to your domain-specific use cases, and although it is not living up to its full potential just yet (with its inability to provide accurate answers 100% of the time and the related issue of hallucinating plausible-sounding but incorrect answers being the two most important issues), there are already ways to leverage AI’s ability in your business.
We believe that the combination of diagramming and AI makes a lot of sense, and we hope that this article has shown you that all building blocks for smooth development are already in place. JointJS and AI model APIs are ready to go—for our part, we invite you to try JointJS for free, complete with access to more than 160 pre-built applications and all advanced diagramming features. The only thing missing from the equation is your use case, your impressed customers, and your increased business value. Let’s get to it.
Happy coding!
.jpg)
