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:
- 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.
- 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.
- Reusability: Gantt chart code can be reused across different projects, making it a cost-effective solution for project management.
- 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.
- 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.
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.
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.
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.
More Articles
Visualizing Data with ggridges: Techniques to Eliminate Density Plot Overlaps in ggplot2
When it comes to visualizing data with a histogram and dealing with multiple groups, it can be quite challenging. I have recently come across a useful ggplot2 extension called ggridges that has been helpful for my data exploratory tasks.
Five Tips for Saving Money At Target
How to maximize your savings when you shop at Target? I will unveil 5 ways of saving money when you shop at Target to maximize your savings.
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.