Mermaid + draw.io + ChatGPT I to Build System Diagrams

Hello everyone! I hope you are well.

In today's video, we will see how we can generate system diagrams using ChatGPT with the help of draw.io and mermaid.js.

But before we start, did you watch my previous video where I talked about generating system diagrams using ChatGPT? That was part 3 of our previous series. If you are new here, I am Asan, and I post tutorials on this channel. If you are interested in most of those videos, consider subscribing to the channel. If you have any questions, comment on this video.

Let's start today's video without any further delay.

In our previous video, you saw that we used Bing AI, but today we are going to use ChatGPT with draw.io and mermaid.js. We will see the results and the differences between those tools: Bing AI and ChatGPT.

The tool we are using is draw.io. You need to create a new diagram right here. You can simply select a blank diagram and then create it. You can name it whatever you want, so I’m going to name it "Sample." You have to save it on your device.

Now, let's just open mermaid. The data proposition is real. This is the first one, the mermaid repository, and you will see the available diagrams. We are going to create those diagrams with the help of draw.io.

Now, let's ask for a simple use case with the help of ChatGPT. You have to ask it, "Give me a sample use case in paragraph form for any system. It should be well-defined and structured." Let's see what it gives us.

It is now generating the sample use case. We will discuss some other features of draw.io, including coloring and styling, which it provides. We will also see more versions of draw.io that provide SQL.

Now, let's see the sample use case that it generated. It is about an automated customer support system for an e-commerce platform. I think it is very much better now.

We can ask for the diagrams. Now, I'm going to ask for the mermaid code for this sequence diagram. We have to type, "Give me mermaid code for a sequence diagram for the above use case," and press enter. Let's see what it gives us.

So, guys, it generated the result. I am going to copy this code. What you have to do is click on the plus symbol, go to Advanced, and you will see mermaid right here. You have to click on it, then paste the code right here and click on insert. It will generate the diagram right here.

You can see that it generated the sequence diagram for that use case. You can definitely give your use case or one generated with the help of ChatGPT.

Now, what we will see right here is that it has many coloring options and features for this diagram. If I click on this, you can see that I'm just hovering over it, and it is changing. If you want to change the coloring, you can also do that. I'm going to use the green one, so it has changed to green.

Now you see these two options: sketch and rounded. If I click on rounded, you will see that the corners are rounded now. If I click on sketch, it will change to a pencil or some type of sketching. I'm going to switch it back to rounded.

If I go to diagram, you can see that it has many options regarding background color, shadow, sketch, etc.

Now, let's create another diagram. I'm going to create a class diagram, so I'm going to remove it from here and ask for the class diagram code. You have to type, "Give me mermaid code for a class diagram for the above use case," and press enter. Let's see what it gives us.

So, guys, here is the result. We generated the mermaid code for the class diagram. I'm going to copy it and do the same as before: go to Advanced, click on mermaid, paste the code, click on insert, and it should generate the class diagram.

Now you can see that it has generated the perfect diagram for the class diagram. If you want to change the colors for this, you can also do that. You can click on it and change the colors you want. If you want it to be gradient, you can also do this and change it to any color you want.

It also has the rounded feature, which we saw in the previous function. It has the sketch feature as well, which we saw in our previous diagram. If I click on sketch, you can see the difference right here.

Now, let's see another feature, which is text. You can click on the text and make it italic, underline it, or change the font. You can make it bold, etc. It also has the function for font color. You can see right here it has an opacity function, which is used to control the transparency of this block.

It has another tab called arrange, and if you see that, it shows four functions: two front, two back, bring forward, and send backward. This is very useful if you are creating a complex diagram, so you can make it move forward or backward if you have another block behind it.

You can also change the angles and see the position; you can just change it.

Now, let's see another thing. If you click on the plus symbol, you will see that it has the SQL feature. I'm going to click on it, and you can see that it has the SQL code.

So, I'm going to ask ChatGPT to give me the SQL code for the above use case. "Give me SQL code for the above use case," press enter, and let's see what it gives us.

So, guys, here is the SQL code for the above use case, and it generated the tables according to the use case. I'm going to copy it and paste it in draw.io to see what it gives us. Click on insert, and it should generate something like this.

Okay, if the class diagram is also right here, I'm going to remove it and do this again so that we can clearly see the SQL code and the diagram generated for the SQL code.

Here it is. You can see that it created the blocks using SQL code, which is very helpful for data management systems. You can simply convert this SQL code into this diagram, so you can see the summarized form of the data and the tables that are going to be inserted into MySQL.

You can definitely change these colors from right here. If I click on it, it has the same features as our previous diagram.

So, guys, this was all about today's video. If you find any errors or syntax errors in the mermaid code, you know that you just have to click on new chat and ask it again by giving the use case and asking for the same diagram.

If you liked the video, click on the subscribe button, and don't forget to click the bell icon so you will be notified when I publish a video.

Thank you, guys, for watching!