In this blog post, I will explain how to create a Gantt chart using ChatGPT and Mermaid. This is a useful tool for project management, and can help you visualize the different tasks and timelines involved in your project. This post is a follow up on the previous post on how to solve project management tasks using AI, so read that first, if you haven’t already.
For this we are going to use:
Our starting point for creating a gantt chart is a project plan in a table format, with start dates and durations for each task. We created it in the past post, but it is actually not strictly needed. If you do not have this already, the AI will just try to fill in the blanks of what it thinks you need to do, and what duration each task would have.
ChatGPT is - at least right now - not able to create images and graphics, but it can write quite good code. So we are going to utilize that by using something called “Mermaid”, which is a tool for creating diagrams and charts by writing some simple code - and we are not going to write the code, but instead let ChatGPT write the code.
Try to go to Mermaid.live to see how it works.
This is how Mermaid works. Now we’ll go into ChatGPT. As a rule of thumb, ChatGPT creates much better outputs the more specific you are about what you would like it to do. So we’ll try to be quite specific here. First we’ll write:
Create a gantt chart using mermaid.js for my project.
This could probably give us some kind of output, but to be even more specific, we’ll add an example of the format we would like ChatGPT to make. So first we’ll add “This is how gantt charts are created in mermeid.js:” and then add the sample code from the gantt chart at mermaid.live. So the prompt looks like this:
Create a gantt chart using mermaid.js for my project. This is how gantt charts are created in mermeid.js:
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
Giving this example improves our chances of getting the result we are looking for. Before we send this to ChatGPT, we also need to tell it about our project. So I’ll just add “Here is my project timeline in a table:“ to the prompt and then copy my table with the timeline for the project into the message as well. This is how the full prompt for ChatGPT looks:
Create a gantt chart using mermaid.js for my project. This is how gantt charts are created in mermeid.js:
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
Here is my project plan in a table:
Project Phase
Specific Task
Duration (days)
Start Date
Research and Purchase
30
May 1, 2023
Buy new windows
Buy other materials
Window Removal and Prep
30
June 1, 2023
Remove old windows
Prepare for new windows
Brick Work Assistance
15
July 1, 2023
Redo parts of the brick walls
Window Installation
15
July 15, 2023
Install new windows
Final Touches and Verify
15
August 1, 2023
Verify completed work
And then send this to ChatGPT. In my case, I get the following answer:
This looks great. Now we can just take this code and copy it into the code area of mermaid.live. This updates the image to the right.
Fantastic, right? From there, you can export the Gantt chart as an image or SVG file in the “Actions” tab in mermaid.live. And a pro tip - if you export it as an SVG file and insert this in PowerPoint, you can right click on it and click “Convert to shape” and then edit it as a normal shape. That’s pretty cool 🦸