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

hello everyone I hope you are well in today's video we will see how can we generate you system diagrams using chat jbd with the help of draw.io and mermaid.js but before starting did you watched my previous video in which I talked about how can we generate system diagrams using chat gbd which was the part 3 of our previous video if you are new here I am asan and I post your tutorials on this channel if you might be interested in most of those videos consider subscribing to the channel if you have any questions comment down this video Let's Start today's video without any further delay so in our previous video you saw that we use Bing AI but today we are going to use jojoba with dot dot IO and mermaid.js and we will see the results and the difference between those tools ping Ai and jojobd so the tool was about draw.io and you have to create a new diagram right here you can just simply select a blank diagram and then create it you can simply name it whatever you want so I'm going to just name it sample and you have to save it on your device instead you will see this screen now let's just open mermaid the data preposition real mermaid this is the first the first one is the mermaid repository and you will see these available diagrams so we are going to create those diagrams with the help of draw.io now let's ask just ask for some simple use case with the help of jbd so you have to ask it give me a sample use case in a 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 the dot.io in which we will see the coloring and some styling of the draw dot IO which it provides and we will see more versions of this dot IO which provides SQL too we will see this tool right now now let's see the sample use case that you will generated it is about automated customer support system for e-commerce platform so 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 sequence diagram for the above use Case press enter and let's see what it gives us so guys it generated the result I am going to copy this code and what you have to do is to click on the plus symbol and go to Advanced and you will see mermaid right here you have to click on it and then paste the code right here and click on insert it will just generate the diagram right here so you can see that it generated the sequence diagram of the that use case you can definitely give your use case and or generated one by the help of JG video now what we will see right here is that you can see that it has many coloring and it has many features for this diagram if I click on this you can see that I'm just hovering over it and it is just changing it so if you want to just change the coloring of this so you can also change it I'm going to use the green one so it has changed to the green now you see these two options which is sketch and rounded if I click on rounded you will see that the corners are rounded now and if I click on sketch it will just change it to the pencil or some type of Skies thing so I'm going to just switch it back from net and if I go to diagram you can see that it has many options which is about great background color shadow sketch Etc now let's create another diagram I'm going to create class diagram so I'm going to just remove remove it from here and ask for the class diagram code so you have to type give me mermaid code for class diagram for the above use case and press enter let's see what it gives us so guys here is a result we generated the mermaid port for the class diagram I'm going to copy it and just do the same that I did before go to Advanced and click on mermaid and then paste the code click on inside and it should generate the class diagram now you can see that it has generated the perfect diagram for class diagram and if you want to change the colors for this you can also do this if you can just click on it and you will see this you can just click on it and change the colors that you want if you want it to be gradient you can also do this and change it to any color you want and it is also the features of the rounded one you can see that it was in the previous function too it has also the sketch feature which we saw in our previous diagram and it will change it the diagram to this and if I click on glass you can see the difference right here so it is just for styling and making it more interesting now let's see another feature which is text you can just click on the text and you can make it italic or underline or you can change the phones to you can make it bold Etc it also it has also for the function of font color you can see right here it has also the opacity function which is used to control the transparency of this block it has another tab which is called arrange and if you see that it shows that the four functions which are two front two back bring forward send backwards so it is very useful if you are creating a complex diagram so that you can make it forward or backward if you have another block which is behind this blog and if you want to make it move further forward you can just use this function you can also change the Angles and you can also see the position you can just change it now let's see another thing right here if you click on the plus symbol you will see that it has also 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 just ask rgbt to give me the SQL code for the above use case so 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 upper view space I'm going to just copy it and paste in a draw dot IO and see it what it gives us click on insert and it should generate something like this okay if the class diagram is also right here so 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 so here it is you can see that it created the blogs using SQL code which is very helpful for data is management system so you can simply convert this SQL code into this diagram so you can see the summarize form of the data and the tables which are going to be inserted into my inserted into the MySQL you can definitely change these colors from right here from here you can see that if I click on it and it has this dial anything the same features as our previous diagram so guys this was all about today's video if you find any errors or if you find syntax error for the mermaid code and you know that you have to just click on new chat and ask it again give by giving the use case and asking it again for the same diagram so if you like 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

Channel: Javarevisited

Views: 43,477

Keywords: chat gpt examples, how to use chatgpt, chatgpt guide, chatgpt website, chatgpt advanced guide, chatgpt examples, business chatgpt, chatgpt tutorial, openai api tutorial, chat gpt api, how to chatgpt, website chatgpt, openai chatbot gpt, personal use, guide chatgpt, business ideas, tutorial openai, openai tutorial, what is chatgpt, advanced chatgpt, chatgpt explained, business, tutorial, chat gpt, chatgpt api, advanced tutorial chatgpt, chatgpt business, chatbot, website

Id: xZ4o180KFNk

Length: 6min 42sec (402 seconds)

Published: Sat Jul 22 2023