Ai Tool For Flowchart Generation

Flowchart Generation GPT

This morning, at 4am I woke up and went to start my news for the day. Generally catching up on whatever happened in AI while I was sleeping. I saw a short on youtube where someone was using a service to generate flowcharts using an AI program. I went to the site and within a few seconds I closed it.

If this is possible by some pay for application that definitely uses GPT to do it, I can do it right? I then went to create a gpt that would do this for me. Since GPTs cannot actually create the flowchart inside of the interface without creating a dalle image that is way off from the mark, I only enabled docs and code generation. Then described what the purpose was as well as what it should be able to do in the end.

I did not know that there was any kind of syntax I could use to generate flowcharts. I thought about this in the past couple months and with all of the conversations with bing I had, I found an unbelievably convoluted way of doing it and decided to just wait.

When I was looking at a couple links when searching how this application was able to output a flowchart from natural language, I stumbled on to something called mermaid. I had no idea this existed. Looking into it, it is simple. Then I used chat.openai.com to see if it knew what it was and if it could output the syntax correctly. It said it did, then I wrote up a handful of steps in an application and asked it to generate mermaid markdown for it. This is what it generated

graph TD
    A[User Enters the App] -->|First Time User| B[Name an Assistant]
    A -->|Returning User| C[Update Assistant]
    B --> D[Ask for Instructions]
    C --> D
    D --> E[Store Instructions to Assistant ID in JSON File]
    E --> F[Start a Thread for Today's Date]
    F --> G[Store the Thread ID with Date as Name in JSON File]
    G --> H[User is Prompted for What to Discuss About the Day]
    H --> I[User Inputs Information]

Modifying Minimal Mistakes to support mermaid

Github.io and the jekyll theme Minimal Mistakes needs to have additions to the config.yml and a slightly different syntax to render on page. Github markdown supports mermaid by default though. I added this to my config.yml to pull in the js scripts needed to render.

after_footer_scripts:
  - https://cdn.jsdelivr.net/npm/mermaid@9.4.3/dist/mermaid.js
  - assets/js/mermaid.js

Then add the contents of mermaid.js to assets/js/mermaid.js

$(document).ready(function () {
    var skin = "dark"
    var theme = {
      "air": "default",
      "aqua": "default",
      "contrast": "default",
      "dark": "dark",
      "default": "default",
      "dirt": "default",
      "mint": "mint",
      "neon": "dark",
      "plum": "dark",
      "sunrise": "default"
    }[skin]
    var config = {
      startOnLoad:true,
      theme: theme,
    }
    mermaid.initialize(config)
    window.mermaid.init(config, document.querySelectorAll('.language-mermaid'));
  });

After this you can render out the actual flowchart using the output from the GPT and a pre tag like this:

<pre>
  <code class="language-mermaid">
graph TD
    A[User Enters the App] -->|First Time User| B[Name an Assistant]
    A -->|Returning User| C[Update Assistant]
    B --> D[Ask for Instructions]
    C --> D
    D --> E[Store Instructions to Assistant ID in JSON File]
    E --> F[Start a Thread for Today's Date]
    F --> G[Store the Thread ID with Date as Name in JSON File]
    G --> H[User is Prompted for What to Discuss About the Day]
    H --> I[User Inputs Information]
  </code>
</pre>

It should then render like this:

  
graph TD
    A[User Enters the App] -->|First Time User| B[Name an Assistant]
    A -->|Returning User| C[Update Assistant]
    B --> D[Ask for Instructions]
    C --> D
    D --> E[Store Instructions to Assistant ID in JSON File]
    E --> F[Start a Thread for Today's Date]
    F --> G[Store the Thread ID with Date as Name in JSON File]
    G --> H[User is Prompted for What to Discuss About the Day]
    H --> I[User Inputs Information]
  

It definitely works. Now, how can I get it into something actually useful besides my website? I know many people use Visio but there are alternatives that are, in my opinion, better. Also, free to use and handle all kinds of custom settings and many export options. I have used https://draw.io for years now. try it if you have not.

Even better, it supports importing mermaid syntax to generate the flowchart in it! This then allows you to quickly talk through your flow with the GPT and get the most painful part of the process over with, starting it.

To do this yourself you can go to my GPT called FlowMaid and then after generating the output, go to Draw.io. And to illustrate the steps to import the flowchart into Draw.io I will insert a flowchart generated by the GPT and then include a link to the public Draw.io flowchart so you can see it does function.

Here are the steps I entered into the GPT and the resulting diagram rendered in the browser.

• Go to FlowMaid GPT
• Type in the steps for your needs
• Generate the mermaid markdown
• Copy Markdown generated
• go to Draw.io
• Start a new document
• Choose where it should save, I chose Onedrive
• Click the “+” symbol in the menu bar
• Click “Advanced”
• Choose “Mermaid…”
• Paste the markdown output from the FlowMaid
• Click “Insert”

  
graph TD
    A["Go to FlowMaid GPT"] --> B["Type in the steps for your needs"]
    B --> C["Generate the mermaid markdown"]
    C --> D["Copy Markdown generated"]
    D --> E["Go to Draw.io"]
    E --> F["Start a new document"]
    F --> G["Choose where it should save, I chose OneDrive"]
    G --> H["Click the + symbol in the menu bar"]
    H --> I["Click Advanced"]
    I --> J["Choose Mermaid..."]
    J --> K["Paste the markdown output from the FlowMaid"]
    K --> L["Click Insert"]
  

Link to the online render

Draw.io Link

An embed image of the chart generated on Draw.io

More capabilities than the simplistic chart shown

I asked FlowMaid to generate a complex chart with all of the shapes available in mermaid. I am not sure if it has all of them but, just to show it is capable of doing this.

  
graph TD
    A(("Start")) --> B["` 1.step
    2.step two
    3.step three `"]
    B --> C{"Decision one"}
    C -->|"Yes"| DA("Rounded Rectangle")
    C -->|"No"| DB[/"Trapezoid"\]
    DA --> E
    E -->|"Option one"| FA[\"Parallelogram"\]
    E -->|"Option two"| FB[\"Inverse Trapezoid"/]
    DB --> G[["Subprocess"]]
    G --> H{"Final Decision"}
    H --> I(["End"])
  

With Draw.io you can always go in and modify the base output. It should speed up generating flowcharts. Especially if using a meeting and someone is typing in the notes or drawing on screen, whiteboard, paper. Then take the picture and upload it and ask to generate the flowchart from the image. Group work and generating ideas on the fly helps in complex situations. Redoing the work is not fun. If you can take the images and generate the clean output without the work, it can make life slightly easier.

I can imagine working well in multiple situations. When I create a video or document that outlines steps to do something for end users, I can send an image with the steps along with the video or text. This is one more way of communicating the information that may work better for some people and making it easy to generate means that you may be able to better communicate with your audience.

The Power of Prompting

I always seemed to be able to find information on the internet in the past. I just had the google-fu. When starting with LLMs it was just like early days of search. I think google-fu is just learning how to get what you want with the least output. Actually, that is my mantra in life. The limitations of current GPTs is obvious if you have created anything using the openai API endpoints. You are limited in capabilities now, I bet that will change in the future. However, the conversation style interactions to generate a GPT is pretty great. When talking with it you will ultimately end up with a concise prompt that you can learn from. This may be a good way of teaching end users how to generate prompts themselves without all of the back and forth of the conversation. Although, maybe it all disappears with future computing and everything is conversation and interaction in human like ways.