Generating (But Not Previewing) Diagrams Using ChatGPT

As long time readers of this blog will know, there’s a wide variety of tools available for generating diagrams from text. As a large language model, trained on a wide variety of texts, might we expect ChatGPT (currently free resarch preview) to be able to generate diagram descriptions for us? Here’s an example of a prompt that requests a mermaid.js script to render a flow chart for a particular algorithm (and there are likely actual versions of this publicly available on the web).

Generate a mermaid.js script that produces a flow chart diagram that visualises an algorithm to caculate the factorial of an integer
Me to ChatGPT

To generate a flow chart diagram using mermaid.js, you can use the following script:

graph TD

A[Start] --> B[Input n]
B --> C[Initialize factorial = 1]
C --> D[If n = 0]
D -->|Yes| E[Output factorial]
D -->|No| F[factorial = factorial * n]
F --> G[n = n - 1]
G --> D
E --> H[End]

This script generates a flow chart with four steps:

1. Start
2. Input n
3. Initialize factorial to 1
4. If n is 0, output the value of factorial. Otherwise, update factorial to be the product of factorial and n, and decrement n by 1.
5. End

To use this script, you will need to include the mermaid.js library in your HTML file and then use the mermaid.init() function to render the diagram. 

Here is an example:

<html>
  <head>
    <script src="https://unpkg.com/mermaid@8.7.0/dist/mermaid.min.js"></script>
    <script>
      window.onload = function() {
        mermaid.init();
      }
    </script>
  </head>
  <body>
    <div class="mermaid">
      graph TD
      A[Start] --> B[Input n]
      B --> C[Initialize factorial = 1]
      C --> D[If n = 0]
      D -->|Yes| E[Output factorial]
      D -->|No| F[factorial = factorial * n]
      F --> G[n = n - 1]
      G --> D
      E --> H[End]
    </div>
  </body>
</html>

This script will generate a flow chart diagram that visualizes the algorithm to calculate the factorial of an integer. You can customize the diagram by modifying the mermaid script and by using the various options and functions provided by the mermaid.js library.

Can you render that diagram for me?
Me to ChatGPT

I'm sorry, but I am not able to render diagrams or images. I am a text-based AI assistant and do not have the ability to display graphics. I can only provide you with the script that generates the diagram, which you can then use with a tool like mermaid.js to render the diagram.

So here’s what it looks like, rendered elsewhere:

As in the previous post, where I suggested that the display machinery of the ChatGPT experience could be made more powerful by supporting the in-browser execution of code, the display machinery could also be improved by the ability to support “renderers” for things like HTML outputs.

Author: Tony Hirst

I'm a Senior Lecturer at The Open University, with an interest in #opendata policy and practice, as well as general web tinkering... View all posts by Tony Hirst