DEV Community

Cover image for Create a Gantt Chart With Markdown
Ryan Bevin
Ryan Bevin

Posted on

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

Enter fullscreen mode Exit fullscreen mode

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!

Top comments (3)

Collapse
 
ugavo profile image
ugavo

Na tuto stránku mě přivedl náhodný rozhovor s kamarádem a byl to skvělý objev. Stránka nabízí přehledný žebříček nejlepších kasin v České republice doplněný o důkladné recenze. Pomohla mi najít spolehlivá a zábavná kasina, ve kterých si mohu zahrát a která jsou ideální pro odreagování po dlouhém dni. Podívejte se na podrobné recenze na top-kasino.cz/fortuna-casino/ .

Collapse
 
wilavo5153 profile image
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.

Collapse
 
lazaretos profile image
nazaretox

Üdvözlet barátaim, szeretnék beszámolni nektek egy klassz weboldalról, amely a legjobb magyarországi bukmékereket rangsorolja, szenvedélyes szerencsejátékosként alapos és őszinte értékelésekre támaszkodom a bukméker kiválasztásakor. A betting hu com pontosan ezt nyújtja - rengeteg részletes értékelést, amelyek az egyes bukmékerek kínálatát, megbízhatóságát és felhasználói élményét vizsgálják. Nagyra értékelem az oldal elkötelezettségét az átfogó információk nyújtása iránt, amelyek segítenek megalapozott döntéseket hozni a fogadások előtt. Bátran tudom ajánlani az értékelésüket.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.