Create a Gantt Chart With Markdown

So I recently started a project and one of the first things I had to do was create a Gantt chart to plan things out. I knew of a framework called Mermaid which is a nice addition to Markdown which lets you create fancy diagrams using code.

I spent quite a bit of time working out how to customize this to look how I wanted it to look and so I though it would be a good idea to document it for someone else.

Steps

There are a few steps needed for this:

1. You need VS Code
2. You need the VS Code extension for rendering mermaid documents in markdown: https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid
3. You need some markdown mermaid code! See below:

%%{
  init: {
    "gantt": {
      'topPadding' :100,
      'rightPadding' :100,
      'leftPadding' :100,
      'barHeight' :50,
      'fontSize' :17,
      'titleTopMargin': 75,
      'gridLineStartPadding' : 48,
      'barGap' :10,
      'sectionFontSize': 16
    },
    'theme': 'base',
    'themeVariables': {
      "fontFamily": 'Sans-Serif',
      'primaryColor': '#bcc8ff',
      'primaryTextColor': '#000',
      'primaryBorderColor': '#2d2ac9',
      'tertiaryColor': '#000',
      'textColor':'#000',
      'tertiaryTextColor': '#000'
    }
  }
}%%

%% https://mermaid.js.org/config/directives.html#declaring-directives
%% https://mermaid.js.org/config/schema-docs/config-defs-gantt-diagram-config.html#toppadding

%% color theme need opened with the high contrast light theme.

gantt
    title changed title
    dateFormat MM
    axisFormat %B
    section Task 1
        Do Task 1 :task1, 01, 91d
    section Task 2
        Do Task 2 :task2, 02, 60d
    section Task 3
        create chart :task3, 05, 30d

Guided Video

You can follow along in this video I made as well: https://youtu.be/K70D5ebtEiw

NOTE: To change the theme variables, the base theme needs selected and this is because it's the only theme with parameters that can be changed using these mermaid directives.

This can also be integrated with the obisian add to make your note taking even fancier!

Thanks for reading!

Comments

[jujra wlac]

Today I started playing online slot machines on this site in Australia - iLucki Casino . and I like this site very much, because with this site it is fashionable to play online slot machines simply and freely and that is why this site is so cool and high-quality. Therefore, I can recommend this site to you, because you can really win on this site!

[Kras Maras]

Olá, recomendo que se registe em melbetbr.app/registro/ . Aqui encontrará as melhores apostas desportivas, jogos de casino emocionantes e muitas outras diversões. O registo é muito fácil e, se tiveres alguma dúvida, o site tem todas as respostas! Também verá como as probabilidades são óptimas aqui, o que lhe permitirá ganhar mais do que noutras plataformas.

[Google Googley]

I really liked this site, because on this site - Betti Casino - I was able to quickly register in the United Kingdom and start playing my favourite slot machines and play for real money online! So now I use this site all the time to play, because here you can play all the new and cool slot machines!