avatarDavid R Oliver

Summary

The context discusses four free AI-powered diagramming tools: yEd Live, DiagramGPT, Draw.io, and ChatUML, comparing their features and capabilities.

Abstract

The context provides a detailed comparison of four AI-powered diagramming tools, focusing on their abilities to create diagrams from text prompts. It highlights the strengths and weaknesses of each tool and discusses their potential for creating diagrams in the future. The author notes that yEd Live is excellent for creating engaging diagrams, DiagramGPT is ideal for creating functional diagrams, ChatUML is helpful for creating process diagrams with little to no specific technology asks, and Draw.io provides a good start but needs improvement. The author concludes that each tool has unique strengths, and they may not be suitable for all diagramming needs.

Opinions

  • yEd Live produces engaging diagrams that are great for presentations.
  • DiagramGPT is ideal for creating functional diagrams, especially for use with the Eraser tools for writing technical documentation.
  • ChatUML is helpful for creating process diagrams with little to no specific technology asks, but it may require trial and error.
  • Draw.io provides a good start, but the Smart Template needs more work.
  • Each tool has unique strengths, and they may not be suitable for all diagramming needs.
  • The author suggests that Small Language Models will have a more significant role in creating diagrams in the future.
  • The author notes that these tools enable us to create diagrams quickly, which can improve communication with peers.

Draw Diagrams for Free using AI — yEd Live | DiagramGPT | Draw.io | ChatUML

Drawing diagrams using AI has never been more straightforward, but not all diagramming apps are the same, so let’s explore four of the best examples that are currently free to use.

Image by Dalle 3 — An AI Drawing Diagrams with a Virtual Cup of Tea

In February 2023, I wrote the article, How to Create Diagrams With ChatGPT, so I wanted to see if things had improved since I first looked at this in great detail.

GPT-4 Turbo still prefers to create diagrams using Mermaid and PlantUML scripts but still hallucinates when attempting to create a diagram using Python and JavaScript libraries. However, I have had more success with Drawing Diagrams using RAG, which I will cover in another article.

However, there has been an explosion of Apps with built-in AI abilities, and Diagramming Apps are no exception. It won’t take long to find them using your favourite search engine; there are plenty, but I have discovered that there are significant differences in quality between the various Apps, so in this Article, I will focus on just four of the best I have found, yEd Live, DiagramGPT, the very popular Draw.io and ChatUML. The bonus is that all these utilities are free to use as of the time of writing (December 2023).

Please note: To be clear, some of these featured drawing tools have a paid tier and are not entirely free to use all of the time.

Please note: I do not work for the organisations mentioned in this article, nor am I affiliated. I also haven’t received any payment or gifts for writing this piece, so it is my opinion alone. If you disagree, that is completely fine; please post a comment. I’ve learned much over the years from people’s expert responses, so I am willing to learn and make corrections.

All the tools I will demonstrate in this article require a live Internet connection because the AIs they use are hosted remotely.

What about Visio?

Microsoft Visio has long been the staple tool for creating diagrams in Solution Architecture. Still, from what I can gather, there are currently no plans to add the CoPilot functionality (please note — this link is unsecured) that the rest of M365 is beginning to enjoy, so perhaps an opportunity to switch?

How to make a Cup of Tea

Today, I’ll use the same AI Prompt across all four applications under discussion, allowing us to compare and contrast their outputs effectively. You’ll observe variations in the results, which helps gauge the unique strengths of each tool. Take yEd Live as an example: it doesn’t support creating Archimate Diagrams, and no AI prompt can alter a diagramming limitation. So, exploring the best features of each application will provide a clearer understanding of their respective capabilities.

Decades ago, during my early school years in the 1980s, one of the initial challenges in learning programming was to create a flowchart for making a cup of tea.

At first, I underestimated this task, yearning for something more complex; I wanted to know how to write computer games like most teenagers. However, I soon realised that this seemingly simple problem has a rich history and has been a stumbling block for many brilliant minds. It serves as an excellent benchmark for testing modern AI capabilities. The secret lies in the hidden nuances of such tasks; understanding these subtleties is crucial for AI to execute such instructions effectively. This is why we will use the same AI prompt for our diagramming Apps.

History of the ‘Teas Maid’

I enjoy history, so let’s take an interesting detour before continuing; feel free to skip this section if you wish. The history of automating the process of making a cup of tea dates back to the late 19th and early 20th centuries. The first tea-making machine was invented by Charles Maynard Walker in 1891, and shortly after, an ‘Automatic Tea-Making Apparatus’ was patented by Samuel Rowbottom in 1892. These early machines were rudimentary and potentially dangerous, using gas-lit pilot lights.

My parents had a ‘Goblin’ in their bedroom! The contraption made a horrible cup of Tea each time. The device also acted as an alarm clock; the idea was that it would make tea and then wake you up.

What it did do was make a loud noise as it boiled the kettle, which would send hot water and steam everywhere. If you weren’t woken by either boiling water or the noise of the operation, there was an ear-splitting alarm that was loud enough to wake up the neighbourhood. It’s funny how we can become nostalgic about old Computer Game Consoles like the Atari but never old labour-saving devices, perhaps we would if it worked well.

Goblin ‘Teasmade’ model D25B, 1966. Science Museum Group Collection

yEd Live

Let’s start with one of my favourite Apps, yEd Live.

yWorks provides some excellent diagramming tools for free, such as yEd, a locally installed diagram editor, and the online version called yEd Live. It’s yEd Live with the AI capabilities the locally installed version does not.

yWorks makes its money by selling the excellent yFiles product. I have noticed that yWorks products are rock-solid and very slick. This high quality flows into their free offerings, yEd and yEd Live, making great adverts of their capabilities, which is the point!

From the first page yEd Live editor you can create a diagram from text with ChatGPT.

Diagram Code from your Prompt

The diagram generation feature in yEd Live, currently in its experimental phase, may evolve. When you provide a prompt, it becomes part of a broader query formulated by yWorks, which is then processed by OpenAI’s Large Language Model, likely GPT-3.5. This model interprets the extended prompt and generates code to create the diagram. yWorks does not verify the returned code, so perfecting your diagram might require experimentation. Remember to save your work frequently to prevent data loss. Similar mechanisms are probably at play in tools like DiagramGPT and Draw.io. The advantage of using these tools lies in their ability to generate diagrams without writing code and spend lots of time drawing diagrams.

Cup of Tea — Test Prompt

The Prompt I will use to conduct these tests is reasonably straightforward, so it will act as a good comparison.

create a diagram of the process of how to make a cup of tea, making sure to number each step to understand which order each step is in. 

This is the result that yEd Live produced using the above prompt,

yEd Live has produced a very clear, brightly coloured diagram. This is the image it has produced without alteration. Numbering is visible, and the order makes sense; it’s not the order I would have personally chosen; I would have chosen down and then across, but each to their own; AI also has its preferences.

With yEd Live, you can continue to enhance the diagram automatically by using the ‘Layout’ you have quite a few options to pick from,

There is a smooth animation as the diagram changes from one type to another, which is very satisfying to use. Selecting ‘Series-Parallel’ will put all the process steps in the correct order; the other types will not.

Making a Cup of Tea Process in Series-Parallel view.

One flaw I’ve found is I’ve been unable to use the ‘Edit Graph’ feature and add additional steps or edit the ones I already have by using an AI prompt. However, this shouldn’t detract from the fact that yEd Live is a very smart and well-polished editor.

DiagramGPT

Eraser.io is a utility for writing technical documentation together with drawing diagrams within the same tool. It is a joy to use for writing your technical documentation, especially as it links to GitHub. I prefer this tool to write technical documentation because the experience can be collaborative, as multiple users can edit and draw diagrams with you simultaneously. If you are still using Azure Dev Ops for your technical documentation, this is a good enough reason to stop!

Eraser has created this experiment that can automatically draw diagrams using AI, so let’s see how it gets on with our Cup of Tea test prompt.

The query ran for a few minutes and this is what DiagramGPT returned,

I haven’t edited the picture, so you can see it as it comes out of the tool, so it is not cropped, hence why it is so large.

With yEd Live, the diagram produced by the AI can be edited using conventional means, such as dragging and dropping new shapes from the Sharp Palette, changing the shape’s colour and so on. With Eraser editing, the diagram is very different, and for people like me who aren’t great at drawing, this is a good option. The diagram the DiagramGPT tool creates can be edited in the Eraser editor using a Marco Language they developed; the code looks like this,

title Process of Making a Cup of Tea

// Define nodes and relationships
1. Start [shape: oval, icon: flag] > 2. Fill kettle with water [icon: droplet]
2. Fill kettle with water > 3. Boil water [icon: zap]
3. Boil water > 4. Place teabag in cup [icon: coffee]
4. Place teabag in cup > 5. Pour boiling water into cup [icon: thermometer]
5. Pour boiling water into cup > 6. Steep the tea [icon: hourglass]
6. Steep the tea > 7. Remove teabag [icon: trash-2]
7. Remove teabag > 8. Add milk and or sugar if desired [icon: plus-circle]
8. Add milk and or sugar if desired > 9. Stir the tea [icon: rotate-cw]
9. Stir the tea > 10. End [shape: oval, icon: check]

As you can see, the Marco Language is simplicity itself, so the other Diagrams as Code Language could learn lessons from how Eraser has put this together.

The last thing I like about writing documentation and drawing diagrams in Eraser, whether using AI or not, is that it can all work on just a screen, so at last, it is an editor that can be used well if you are using your laptop.

The AI Edit feature works, so I asked the AI to ‘Add Colour’. Because of the ease of the Macro Language, performing this task was straightforward.

From the text, there is now an additional color: a parameter that has straightforward values like those in the text, such as blue, yellow, red and pink.

Draw.io

Draw.io is a very popular tool for several reasons. Firstly, it’s open source and free to use, even in a commercial setting. Secondly, all the code to run Draw.io runs locally in your browser, so can happily work offline. However, the AI feature will not work offline.

To access the AI feature within Draw.io, it is called ‘Smart Template’ and is accessible from the File → New menu, and this dialogue box will appear.

Smart Template in Draw.io

Draw.io will not win any design prizes for the output as it is purely functional.

Default output from Cup of Tea prompt in Draw.io

On this occasion, I gave Draw.io a helping hand. I tried a few diagram types and found that the Sequence Diagram produced more useful output.

Sequence Diagram produced by Smart Templates in Draw.io

As you can see, the Sequence Diagram isn’t quite right in places. None of these examples are the finished product, so they will need a degree of alteration afterwards, which demonstrates it’s not exacting enough yet.

Just like yEd Live, I cannot go back and alter the existing diagram with additional prompts. I also experimented with getting the AI to add each step in a different colour but haven’t succeeded.

ChatUML

Jacqui Read, the author of Communication Patterns, pointed me towards this lovely utility, ChatUML. ChatUML will create either PlantUML or Mermaid script that will generate the diagrams. We know that GPT3.5 and GPT4 can produce diagrams in PlantUML and Mermaid without additional assistance, so what is the advantage of ChatUML? The advantages are that this utility also comes with an editor where you can save the diagrams and work on them again later and use the AI to make edits.

ChatUML will allow you to make three diagrams for free before needing to use their paid tiers.

Architecture Deployment Diagrams

I have shown how each of these utilities can handle a basic process. In this next section, we will try each utility again with a more complex task of creating a Deployment Diagram using a more complex prompt.

Create a deployment diagram for an e-commerce system hosted on AWS, where customers can buy goods and services via a web page and mobile device where they will pay for goods using a credit or debit card. The system will check inventory on receiving a customer query before the order is confirmed. If a stock of an item is at its minimum order level after the Customer orders an automatically generated purchase order, it will be generated and sent to the supplier. The back office systems will be loosely coupled and comply with UK laws and regulations that this system must adhere to, so identify what they are and include this in the design.

Create a deployment diagram for an e-commerce system hosted on AWS, where customers can buy goods and services via a web page and mobile device where they will pay for goods using a credit or debit card. The system will check inventory on receiving a customer query before the order is confirmed. If a stock of an item is at its minimum order level after the Customer orders an automatically generated purchase order, it will be generated and sent to the supplier. The back office systems will be loosely coupled and comply with UK laws and regulations that this system must adhere to, so identify what they are and include this in the design.

The results are all very different!

yEd Live

yEd Live has attempted to create some mixture between a Process Diagram of some description and a Deployment Diagram.

DiagramGPT

DiagramGPT has produced something more recognisable as a Deployment Diagram attempting to use the AWS icons. The Marco Language text has an easy way of producing the AWS icons using an icon: parameter with the values, aws-lambda, aws-dynamodb, etc.

Draw.io

Draw.io has attempted to make another cross between a Process and Deployment Diagram similar to what yEd Live has produced.

ChatUML

ChatUML, when it finished creating the PlantUML, it had an error rendering it. There was a similar result when using Mermaid.

Conclusions

The conclusions I have made from this exercise are that,

  • ChatUML is taking the raw output from the GPT3.5, and we know this Large Language Model will hallucinate when straying into creating diagrams that include technology.
  • A similar story with Draw.io and yEd Live; they will both lean towards process, and to be fair, this is what these Diagramming tools are intended for drawing process diagrams.
  • DiagramGPT made the best attempt because the Developers at Eraser have correctly concluded that their new AI tool will be used to create Deployment Diagrams and have catered for this.

Summary

I have learned from this exercise that the four diagramming tools have unique strengths, so perhaps you wouldn’t use just one tool for all your diagramming needs.

yEd Live produces engaging diagrams that you would use in presentations.

DiagramGPT produces functional diagrams ideal for use with the Eraser tools for writing Technical Documentation.

ChatUML is also helpful for creating process diagrams with little to no specific technology asks. Suppose you want to create diagrams with technology in them. I recommend using generic technologies rather than naming specific ones, as you will have more success rendering them. However, there will still be a fair amount of trial and error, so you will use up the free attempts very quickly and start having to pay. I would only consider paying for this option if I couldn’t access ChatGPT.

Draw.io provides a good start, but the Smart Template needs some more work, which I’m sure it will receive over the coming months. However, I think this will be the same for all the Diagramming tools I have featured here; they are all in early versions and are bound to continue to mature if there is enough interest, hence my reason for writing this article in the first place, to highlight what is going on in this corner of AI evolution.

Looking towards the future, Small Language Models will have more of a part to play in diagram creation; I can see when Diagrams will be created on demand to depict where a problem lies graphically at that moment in time. This need not be in a computer system and networks but in traffic, power lines, and other forms of infrastructure.

What these tools offer now is that they enable us to create diagrams quickly so we can get our point across and communicate better with our peers. Interestingly, this could also be the dawn of another way AI will communicate with us; now, there is some food for thought!

ChatGPT
Diagrams
AI
Uml
Gpt
Recommended from ReadMedium