Mermaid + draw.io + Bing AI to Build System Diagrams

Education

Mermaid + draw.io + Bing AI to Build System Diagrams

Hello everyone! I hope you are well.

Today's video is going to be very interesting because we are going to use Bing AI plus Mermaid with draw.io to draw system diagrams. This follows up on a previous video where I used JBD to build system diagrams. This time, however, we'll leverage Bing AI to accomplish this task.

Before starting, make sure to check out my previous video, where I shared some useful tips and tricks about Bard AI. If you are new here, I am Asan, and I post tutorials on this channel. If you find these videos interesting, consider subscribing to this channel. If you have any questions, feel free to comment on this video.

Let's start with today's topic without any further delay.

Step-by-Step Process

  1. Open Mermaid: You can see we used this tool previously to generate flowcharts, sequence diagrams, Gantt charts, etc. Today, we are going to do something different using draw.io.

  2. Open draw.io: Go to the draw.io website. This site provides multiple options for saving your diagrams. For now, I'll just use my device to save the diagrams. Follow these steps:

    • Create a new diagram.
    • Choose "Blank Diagram" and click "Create".
    • Save the file with a name (e.g., sample) on your desktop.

    You will find many options, like saving as .PNG, .SVG, HTML, or XML. We'll go with the XML format and then click save.

  3. Using Bing AI:

    • Ask Bing AI to give a simple use case. For example, you can ask for a "Hospital Management System".
    • Ensure the use case is well-defined.
    • Ask Bing AI to generate the Mermaid code for the flowchart of this use case.

  4. Generating Diagrams:

    • Flowchart:
      • Copy the Mermaid code provided by Bing AI.
      • Open Mermaid's live editor.
      • Paste the code and check the generated flowchart.
    • Editing in draw.io:
      • Paste the Mermaid code in draw.io (Advanced > Mermaid).
      • Insert the code to see the editable flowchart.
    • Sequence Diagram:
      • Ask Bing AI for the Mermaid code for a sequence diagram of the above use case.
      • Copy the code, paste it into draw.io’s Mermaid editor, and check the sequence diagram.
    • Class Diagram: If you encounter errors, ask Bing AI for help and refer to sample use cases on Mermaid’s GitHub.
    • State Diagram:
      • Request the Mermaid code from Bing AI.
      • Copy, paste, and insert the code into draw.io’s Mermaid editor to see the state diagram.

  5. Trying More Diagrams:

    • You can also try generating and editing other diagram types like Gantt charts, bar charts, and pie charts by following the same process.

This method simplifies how you can create and edit various diagrams, making it especially helpful for university projects or business analysis tasks.

If you liked this tutorial, click the Subscribe button and don’t forget to hit the Bell icon to be notified of my future videos. Thank you for watching!

Keyword

  • Bing AI
  • Mermaid
  • draw.io
  • System Diagrams
  • Flowchart
  • Sequence Diagram
  • Class Diagram
  • State Diagram
  • editing diagrams
  • university projects
  • business analysis

FAQ

1. How do I start using draw.io? Open the draw.io website, create a new blank diagram, give it a name, and save it. You can then start drawing your diagrams.

2. What formats can I save my diagrams in draw.io? You can save your diagrams in formats like .PNG, .SVG, HTML, and XML.

3. How do I generate Mermaid code for a system diagram using Bing AI? Ask Bing AI to provide a well-defined use case and then request the Mermaid code for the specific diagram you need.

4. What should I do if the Mermaid code generates errors? Copy the error and Mermaid code, ask Bing AI for help, or refer to sample code in Mermaid’s GitHub repository.

5. Can I edit Mermaid-generated diagrams in draw.io? Yes, you can paste the Mermaid code into draw.io and easily edit the diagrams without needing advanced coding knowledge.