Visualizing with ChatGPT - Presentations, Flow charts, Mind maps and more.

All accessible with a browser, ChatGPT, Ctrl + C and Ctrl + V

I see a lot of new followers since the last update, thanks to Goda's video! I truly appreciate your decision to follow, and I'm committed to providing content that makes your subscription a rewarding choice. Having said that, there's so much exciting stuff happening in the world of AI, and trying to keep on top of everything as well as figuring out where the line between hype and real applications are is challenging.
However, with the help of Uros (https://www.linkedin.com/in/pesicuros/), I've found some real use cases that I think you will enjoy. Just like with ChatGPT in Google Sheets, it's all about practical applications that you can use for yourself.

The title of the post will already give it away - I'm going to show you how you can use ChatGPT to create flowcharts, graphs, mindmaps and presentations. I'll share some useful prompts, the different options available to you and different use cases of which I'm sure you'll find something that's applicable to you.

I've shared before that ChatGPT can write code, amongst other things. The key here is lightweight programming languages. Now don't worry - we don't need any prior knowledge or have anything installed.

All we need is:

• a browser

• access to ChatGPT

This allows us to quickly make:

• Presentations

• Flowcharts

• Mindmaps

• Gantt Charts

• Class diagrams

• Pie charts

• Bar charts

The key to all this is ChatGPT's ability to write out basic programming languages. There are tons of tools out there that allow you to use Lightweight markup languages, that can then be used to visualize - online, for free.

Let's dive in.

First, let's start with a short explanation of what Markdown is. Markdown is a lightweight markup language that can be used to format text. It allows you to easily create headings, lists, bold and italic text, links, and more. The syntax is designed to be easy to read and write, even without special tools. ChatGPT can use markdown. Give it a try, tell it to write an article and use markdown to emphasize certain parts, or to use markdown for headers and it'll demonstrate it.

But we aren't all that interested in making ChatGPT's responses look nice. We want to use its ability to write it out!

Let's start with a simple example and learn as we go. Let's go with a simple example: A mind map.

Go into ChatGPT, and tell it to create a mind map.

Create a mindmap For the following topic: Types of mindmaps.

Use markdown. Do this in a code block

And as a result, you get something along these lines:

Looks neat, but what now? Well, we can just copy and paste this into sites like:

https://markmap.js.org/repl

And Voilà!

You've got an interactive chart, ready to go. Want to use more of the features?

Copy and paste the example code on markmap.js, and tell ChatGPT to use it.

Want it to be more complete, more levels deep? Just tell ChatGPT and copy and paste!

TIP: Tell ChatGPT to use a code block!

Without a code block, ChatGPT will just make use of the markdown itself and show you the result with nice-looking headers, bold text, etc.

A list of tools to play with that support these languages:

I played around with a whole bunch of different tools that can use this language. I can't go in-depth with all of them, but I can make a list to save you some work!

• Xmind - Great visuals, limited capabilities. Can import very basic Markdown, can create beautiful mindmaps, but limited in capabilities and flexibility. Also requires you to sign up and install

https://xmind.app/

• Mermaid.js - very flexible, not the best visual option. Can be somewhat customized with some CSS but this can take trial and error

https://mermaid.live/

• Markmap.js - Very capable, amazing for web applications.

https://markmap.js.org/

• PlantUML - Also very flexible, however, ChatGPT is prone to making errors once you try to create more complicated charts like Gantt - charts.

http://www.plantuml.com/plantuml/uml/

• Draw.io - Tool that can import and handle both PlantUML and Mermaid with some extra options. If you hit the little plus sign in the toolbar up top, and go to "advanced" you can import PlantUML and Mermaid.

Then there are lots of tools, editors, and programs that support Markdown - Slack, Trello, Notion, Mem.ai, Github, and a bunch more.

Practical use

Let's take a look at some more examples. Got a text describing a complicated process? You can use ChatGPT combined with one of the languages mentioned to create some great visuals!

Let's take a look at an example that would work with Mermaid.js

Mermaid, like PlantUML is very flexible and has some great use-cases? Because of its flexibility, we can use it to describe all kinds of processes. If we're diving trying to understand a complex topic, we can use these languages to visualize it and make it more clear to us. I recently discovered this paper called "Tree of thought" which is an approach to improve the problem solving capabilities for Large language models like ChatGPT. To try and make sense of it, I copied and pasted part of the paper into ChatGPT and told it to turn it into a graph in Mermaid. Just copied and pasted it in the online editor

https://mermaid.live/

And now it's suddenly visualized in a way that's easier to understand. Still a little complicated? Tell ChatGPT to visualize an example usecase and it will do that for you. If you run into any errors, copy and paste them into ChatGPT and it will very likely be solved.

Create Presentations

Reveal.js is a framework we can use to create slides with HTML. It's another case where with some basic code you can create really pleasing visuals. It's a little bit more involved but very flexible, and can allow you to create some amazing presentations.

On

https://slides.com/

you can sign up for a free account in your browser with some limited use.

Once you're there you can use the "import" option on the left side of the screen to copy and paste reveal.js markup and there you go! you can copy and paste slides with their content setup with ease.

The web version and the local version need a slightly different approach. You can use the same prompt I will share below, but in the web version you'll have to add <div class="slides"> before all the first slide, at the top and you can import the slides!

To create some beautiful presentations you can make use of the local version - for that all you need is a browser.

Here you can find the basic steps: https://revealjs.com/installation/#basic-setup

Once you have that, if you edit index.html, you can create some incredible slides.

Options for reveal.js are:

• Clean looking animations

• Code blocks

• Background images

• CSS customizability

• Adapts to screen/resolution

• Slides within slides (nested slides)

You can do all of this with Notepad, copy and paste whatever you want in there.

For example, I told ChatGPT to create a few slides: Simply copy, paste and cut slides below <div class="slides"> to do so!

TIP: use the following prompt to generate slides:

Your task is to generate slides for use in reveal.js. Make sure to utilize all its features. I only want slides in <section>, so no other html parts outside of it.

Go and give it a try! There’s some great use-cases for all of these and I will definitely be using some of these more frequently. Let me know if you find any other interesting uses for some of these.