In this blog post, I explain how you can create a Gantt chart using ChatGPT and Mermaid. It is a useful tool for project management and can help you visualize the different tasks and timelines in your project. This post builds on that previous post, where we showed how to solve project management tasks with AI – so read that first if you haven't already.
For this we need:
Either a timeline for a sample project or at least a project description
Mermaid.live, which can convert simple code into various diagrams such as a Gantt chart (don't worry, we don't have to write the code ourselves - we ask ChatGPT to do that)
ChatGPT to generate a blunt code from our instructions
The starting point for creating a Gantt chart is a project plan in tabular format with start dates and durations for each task. We did this in the previous post, but it's actually not strictly necessary. If you haven't already, the AI will just try to fill in the gaps based on what it thinks you need to do and how long each task will take.
ChatGPT is – at least right now – not capable of creating images and graphics, but it can write pretty good code. So we take advantage of that by using something called "Mermaid", which is a tool for making diagrams and graphs by writing some simple code - and it is not us who has to write the code, but ChatGPT.
Try going to Mermaid.live to see how it works.
This is how Mermaid works. Now we move on ChatGPT. As a rule of thumb, the more specific you are about what you want, the better the output will be. So we're trying to be pretty precise here. First we write:
Create a gantt chart using mermaid.js for my project.
It might give us some useful output, but to be even more precise, we'll add an example of the format we want ChatGPT to use. So first we add “This is how gantt charts are created in mermaid.js:” and then the example code from the Gantt chart on 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 Chart
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 want. Before we send it to ChatGPT, we also need to tell about our project. So I just add “Here is my project timeline in a table:” to the prompt and then copy my project timeline table into the message. The full prompt for ChatGPT 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 Chart
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 we send it to ChatGPT. In my case I get the following response:
It looks good. Now we can just take this code and paste it into the code field on mermaid.live. It updates the image on the right.
