How to make Gantt chart by mermaid

mizumm — Sat, 02 Mar 2019 21:17:19 +0000

Introduction

Mermaid is a simple markdown-like script language for generating charts from the text.
This document shows the way to create the following Gantt chart by using mermaid cli tool.

Mermaid Github repo:
https://github.com/knsv/mermaid

Environment

Ubuntu 18.04 LTS (x86_64)

Setup

Install npm command

There are some ways to install npm. Google it :-)
Install mermaid.cli via npm

      $ npm install mermaid.cli

How to create a Gantt chart

Create a mermaid file, for example, test.mmd:

    gantt
         title A Gantt Diagram
         dateFormat YYYY-MM-DD
         section Section
         A task :a1, 2019-01-01, 30d
         Another task :after a1 , 20d
         section Another
         Task in sec :2019-01-12 , 12d
         another task : 24d

The syntax is here:
https://mermaidjs.github.io/gantt.html

Run mmdc command.

$ ~/node_modules/.bin/mmdc -i test.mmd -o test.png

You will see the PNG file as test.png.

Tips

To remove today's red line

Create the following json file.

  {
      "themeCSS": ".today {fill: none; stroke: red; stroke-width: 0px;}"
  }

Pass the json file as following.

  $ ~/node_modules/.bin/mmdc -c config.json -i test.mmd -o test.png