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
Apache Spark 4.1 is Here: The Next Chapter in Unified Analytics
Apache Spark 4.1 is here. Discover how Real-Time Mode (RTM), Declarative Pipelines, and Arrow-Native UDFs are transforming data engineering and PySpark performance
DeepSeek SmallPond: A Game-Changer for Data Engineers Seeking Lightweight Solutions
DeepSeek SmallPond is here to shake up data engineering. See how this lightweight open-source framework offers a fresh alternative to Apache Spark and Flink for batch and streaming processes.
How to build a web crawler with MWAA (AWS Airflow) with CDK
Integrating Apache Airflow with the AWS ecosystem has become easier than ever with MWAA. To make MWAA work efficiently, I prepared a comprehensive guide using CDK to spin up MWAA and some tips for MWAA specifically to help you understand the deployment for Airflow in AWS.
