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:
- You need VS Code
- You need the VS Code extension for rendering mermaid documents in markdown: https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid
- 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!
Top comments (3)
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/ .
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.
Ü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.