So in my new role I have a project management system which is great at a lot but its Gantt functionality isn’t what I would want it to be. Being an Obsidian user I got to know Mermaid thought how can I make this work for me. Mermaid allows you to turn markdown (words) into a chart, but why take my word for it a picture says a 100% words
Example spreadsheet
| A1 | B | C | D | E | F | G |
|---|---|---|---|---|---|---|
| 2 | Project ID | Project Title | Start Date | End Date | Time | gantt |
| 3 | title Blog Example | |||||
| 4 | NA needed for export | NA needed for export | NA needed for export | NA needed for export | NA needed for export | dateFormat YYYY-MM-DD |
| 5 | EX112342 | Example 1 | 11/04/2022 | 11/05/2022 | 30 | EX112342 - Example 1: EX112342, 2022-04-11, 30d |
| 6 | EX112343 | Example 2 | 14/02/2022 | 11/05/2022 | 86 | EX112343 - Example 2: EX112343, 2022-02-14, 86d |
| 7 | EX112344 | Example 3 | 18/01/2022 | 18/02/2022 | 31 | EX112344 - Example 3: EX112344, 2022-01-18, 31d |
The magic is column G which is a formula, and column F which works out how many days the project it projected to take.
This coverts the date start field to one we will need later, adds the project ID and title (you don’t need both I just prefer it), add all the formatting we need for Mermaid. Simply put is just a concat formula to automate the markdown code.
=CONCAT(B5, " - ",C5, ": ",B5, ", ", (TEXT(D5,"yyyy-mm-dd")),", ",F5,"d")
By copying column G into the Mermaid website you will get an Gantt chart you can download as an image just like the one below.
Next steps
This is good but its not branded, putting this into a program update PowerPoint wouldn’t make friends with my marketing department. I am looking to do a few improvements for a future blog post
- Render these locally using mermaid-js/mermaid-cli: Command line tool for the Mermaid library (github.com)
- Allow for Critical tasks, milestones
- Using Mermaid CLI use custom CSS to use brand colours