A ChatGPT Extension to Create Diagrams

Fri, 05 May 2023 00:00:00 +0000

Quick Links: ChatGPT Diagrams on the Chrome Web Store | ChatGPT Diagrams on GitHub

The ChatGPT Diagrams browser extension makes it extremely easy to create diagrams with ChatGPT. Here’s how the extension looks in action:

How to create diagrams

To create diagrams, just follow the steps below:

Install the ChatGPT Diagrams from the Chrome Web Store
Enter a prompt asking to draw a diagram - and make sure you include the text “use mermaid syntax”, for example: Show the basic building blocks of a chrome extension using mermaid syntax
ChatGPT will output some code - press the “Show Diagram” button above the code block to render your diagram

That’s it! We just need to prompt ChatGPT to use Mermaid Syntax. Mermaid is a text-based language that can be used to describe flowcharts, sequence diagrams, and many of types of diagram.

The extension searches for code blocks that look like they could be Mermaid diagrams, and then adds a little “Show Diagram” button to each one - pressing this will then attempt to render the diagram using Mermaid. It is not 100% fool-proof, sometimes ChatGPT gets the syntax wrong, but generally works pretty reliably.

Here’s what a few prompts could look like - not that in each one we request that the output uses Mermaid syntax:

Show the basic building blocks of a chrome extension using mermaid syntax
Show a flowchart of the steps I need to go through to create and publish a simple website, use Mermaid syntax
What’s the sequence diagram for publishing an app in the apple store? Use Mermaid Syntax.

And here’s what each of the prompts would produce:

Show the basic building blocks of a chrome extension using mermaid syntax

Show a flowchart of the steps I need to go through to create and publish a simple website, use Mermaid syntax

What’s the sequence diagram for publishing an app in the apple store? Use Mermaid Syntax.

That’s really all there is to it! Raise any suggestions or bugs on the issues page and if you find this extension useful please do rate it or leave a review!

Troubleshooting and common issues

This project is something I’ve put together quite quickly and there are still some rough edges. Some issues you might face:

Mermaid Syntax Error

This normally happens if you haven’t told ChatGPT to use Mermaid Syntax. Try your prompt again but make sure to include the text “show output using Mermaid syntax”.

Diagrams are empty

Try refreshing the page and then choose “Show Diagram”.

Building the Extension

The extension is available on GitHub at:

https://github.com/dwmkerr/chatgpt-diagrams-extension

Just clone, then run:

npm install
npm start

Open chrome at: chrome://extensions, choose “Load Unpacked” and select the ./dist folder from your local copy of the chatgpt-diagrams-extension repository. Everything else you need to know should be on the README.

Chatgpt on dwmkerr.com

A ChatGPT Extension to Create Diagrams

How to create diagrams

Troubleshooting and common issues

Building the Extension

Further Reading