Mastering Gantt Charts: Learn How to Build Them Using Code Alone

Photo by Volodymyr Hryshchenko on Unsplash
Photo by Volodymyr Hryshchenko on Unsplash

Gantt Charts are popular in project management — It visualizes all the tasks, dependencies, and task duration in a single view. As project progress, have you had a time that a Gantt chart is out of day due to its maintenance complexity? 

Many tools to make Gantt chart are UI based. UI updates tedious to manage for project management tracking. One area that is less discussed is using code to express Gantt charts. Building Gantt chart with code alone is elegant and effevetive to reflect fast pace changing of a project. In this story, let’s learn how to master Gantt charts using code alone.

Why Building Gantt Charts with Code

Building Gantt charts with code offer several advantages over using graphical tools or manual methods:

  1. Flexibility: Building Gantt charts with code allows for greater flexibility in customizing the chart to meet specific project management needs. Users don’t have to be bound to design, colors, or features according to the project’s requirements.
  2. Automation: Code-based Gantt charts can be easily automated, saving time and reducing errors. For instance, project managers can automatically generate Gantt charts from project data or update the chart in real-time as tasks are completed. It can save a time by not playing with various UI to make things work. 
  3. Reusability: Gantt chart code can be reused across different projects, making it a cost-effective solution for project management.
  4. Integration: Code-based Gantt charts can be integrated with other software, such as project management tools, dashboards, and reporting systems, to provide a more comprehensive solution for managing projects. In our example, you can see how many tools are integrated with Mermaid.
  5. Version control: By using code to build Gantt charts, project managers can use version control systems like Git to track changes to the chart and collaborate with other team members on updates.

Gantt Chart 101

A Gantt chart is a project management tool used to visualize the timetable of a project. It is a bar chart that shows the start and end dates of tasks, as well as their duration and dependencies. 

To create a Gantt chart, we first need to identify the project tasks and their dependencies. Then, we can list the tasks on the left side and make a horizontal bar for each task that spans the task’s duration. Finally, we can add dependencies between tasks by connecting the bars with arrows.

Gantt charts visually represent the project timeline, making it easy to identify potential scheduling conflicts and bottlenecks. They also help project managers to allocate resources, track progress, and communicate the project status to stakeholders.

Building Gantt Chart with Mermaid

Mermaid is a JavaScript-based library that creates diagrams and visualizations using text and code. Since Markdown inspires Mermaid, there should be no learning curve to adopting Mermaid’s Syntax

The core idea of Mermaid is to define the diagraming you’d like to render by the Markdown code. Then Mermaid will handle the rest for you, like generating the charts and applying color themes. 

Let’s take an example to illustrate how it works — a day of parents with three years old on Saturday morning. 

Here are some key events for a typical Saturday morning:

8–9 AM: 

  • Mother & Father & Son: Breakfast

9–11 AM:

  • Father & Son: Soccor course
  • Mother: Laundry & Lunch

11 AM –12 PM:

  • Father & Son: Grocery
  • Mother: Cocking Lunch

12–1 PM:

  • Mother & Father & Son: Lunch (dependency on Grocery)

We can put them into a table to represent the timeline mentioned above.

Gantt Chart Timeline by Table View | Image By Author
Gantt Chart Timeline by Table View | Image By Author

It is straightforward to convert the table view into a Mermaid syntax.

				
					gantt
    title A day of a parent with a 3 years old on Saturday morning
    dateFormat  2023-02-18
    
 section Mom
 Breakfast      :done, breakfast, 2023-02-18 8:00, 1h
 Laundry        :laundry, after breakfast, 2h
 Cook           :crit, cook, after laundry, 1h
 Lunch          :lunch, after cook, 1h
 section Dad
 Breakfast      :done, breakfast, 2023-02-18 8:00, 1h
 Soccor course  :soccor, after breakfast, 2h
 Grocery        :grocery, after soccor, 1h
 Lunch          :lunch, after cook, 1h
    
    
 section Baby
 Breakfast      :done, breakfast, 2023-02-18 8:00, 1h
 Soccor course  :soccor, after breakfast, 2h
 Grocery        :grocery, after soccor, 1h
 Lunch          :lunch, after cook, 1h
				
			

I am using the productive tool Obsidian which natively supports Mermaid syntax. Once you open a new note in Obsidian, you can use the triple backtick and specify the language as Mermaid.

				
					```mermaid
%% you mermaid syntax here
```
				
			

After you finished writing down the code to generate the Gantt chart in Mermaid, it would show a nice Gantt chart automatically generated like following. 

Mermaid Gantt Chart | Image By Author
Mermaid Gantt Chart | Image By Author

What comes in handy now is making change and dependencies are much easier than the initial set up. For example, let’s say Dad and Son finished grocery shopping early and took only 40 mins, but they still need to wait for lunch cooked by Mom. You can change the 1hour to 40 mins directly in code. It eliminates the process of any drag and drop, and it makes it easy to modify the Gantt chart via code instead of interacting any UI element that wastes time. 

Mermaid Gantt Chart with Change | Image By Author
Mermaid Gantt Chart with Change | Image By Author

Final Thoughts

Creating Gantt charts and other types of chart using code is an efficient alternative. You might not have experience with coding. However, the essential onboarding to a Markdown-like syntax language like Mermaid should be manageable. If you’d like to produce Gantt charts in a fast-changing project and wants to stay up to day, try to learn how to build Gantt charts using code alone instead of disturbed by project management app’s UI. 

About Me

I hope my stories are helpful to you. 

For data engineering post, you can also subscribe to my new articles or becomes a referred Medium member that also gets full access to stories on Medium.

In case of questions/comments, do not hesitate to write in the comments of this story or reach me directly through Linkedin or Twitter.

More Articles

Photo by Gene Devine on Unsplash

How to Build Data Animation in R

Have you seen any beautiful racing bar chart data animation on Youtube and wondered how it was built? I will show you how to use gganimate in R to animate data by creating a racing bar chart as an example.

Read More »

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
Share via
Copy link