Example of Gantt charts made with Mermaid JS

README.md

Example of Gantt charts made with Mermaid JS

Mermaid JS supports Gantt charts. It is reasonable to want to be able to make Gantt charts though without having to run a website and instead use a command line utility. This can be a pain, so I made a Docker image that has mermaid and mermaid.cli installed so that you can use the image as the utility.

As an example, to make the example that is shown on the Mermaid JS website (included here as example.mmd) we would first pull the image from Docker Hub

docker pull matthewfeickert/mermaid-cli

and then run it at the command line to make a .PNG file Gantt chart

docker run --rm -v "${PWD}":/home/node/data matthewfeickert/mermaid-cli -i example.mmd -o example.png

This Gist also has a Makefile to help script this more usefully.

Examples in the "wild"

• Talk at 2019 IRIS-HEP Institute Retreat

example.mmd

example.svg

gantt_key.mmd

gantt_key.svg

<svg id="mermaid-1569186430615" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 784 196"><style>#mermaid-1569186430615 .label{font-family:trebuchet ms,verdana,arial;color:#333}#mermaid-1569186430615 .node circle,#mermaid-1569186430615 .node ellipse,#mermaid-1569186430615 .node polygon,#mermaid-1569186430615 .node rect{fill:#ececff;stroke:#9370db;stroke-width:1px}#mermaid-1569186430615 .node.clickable{cursor:pointer}#mermaid-1569186430615 .arrowheadPath{fill:#333}#mermaid-1569186430615 .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-1569186430615 .edgeLabel{background-color:#e8e8e8}#mermaid-1569186430615 .cluster rect{fill:#ffffde!important;stroke:#aa3!important;stroke-width:1px!important}#mermaid-1569186430615 .cluster text{fill:#333}#mermaid-1569186430615 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:trebuchet ms,verdana,arial;font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-1569186430615 .actor{stroke:#ccf;fill:#ececff}#mermaid-1569186430615 text.actor{fill:#000;stroke:none}#mermaid-1569186430615 .actor-line{stroke:grey}#mermaid-1569186430615 .messageLine0{marker-end:"url(#arrowhead)"}#mermaid-1569186430615 .messageLine0,#mermaid-1569186430615 .messageLine1{stroke-width:1.5;stroke-dasharray:"2 2";stroke:#333}#mermaid-1569186430615 #arrowhead{fill:#333}#mermaid-1569186430615 #crosshead path{fill:#333!important;stroke:#333!important}#mermaid-1569186430615 .messageText{fill:#333;stroke:none}#mermaid-1569186430615 .labelBox{stroke:#ccf;fill:#ececff}#mermaid-1569186430615 .labelText,#mermaid-1569186430615 .loopText{fill:#000;stroke:none}#mermaid-1569186430615 .loopLine{stroke-width:2;stroke-dasharray:"2 2";marker-end:"url(#arrowhead)";stroke:#ccf}#mermaid-1569186430615 .note{stroke:#aa3;fill:#fff5ad}#mermaid-1569186430615 .noteText{fill:#000;stroke:none;font-family:trebuchet ms,verdana,arial;font-size:14px}#mermaid-1569186430615 .section{stroke:none;opacity:.2}#mermaid-1569186430615 .section0{fill:rgba(102,102,255,.49)}#mermaid-1569186430615 .section2{fill:#fff400}#mermaid-1569186430615 .section1,#mermaid-1569186430615 .section3{fill:#fff;opacity:.2}#mermaid-1569186430615 .sectionTitle0,#mermaid-1569186430615 .sectionTitle1,#mermaid-1569186430615 .sectionTitle2,#mermaid-1569186430615 .sectionTitle3{fill:#333}#mermaid-1569186430615 .sectionTitle{text-anchor:start;font-size:11px;text-height:14px}#mermaid-1569186430615 .grid .tick{stroke:#d3d3d3;opacity:.3;shape-rendering:crispEdges}#mermaid-1569186430615 .grid path{stroke-width:0}#mermaid-1569186430615 .today{fill:none;stroke:red;stroke-width:2px}#mermaid-1569186430615 .task{stroke-width:2}#mermaid-1569186430615 .taskText{text-anchor:middle;font-size:11px}#mermaid-1569186430615 .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px}#mermaid-1569186430615 .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-1569186430615 .taskText0,#mermaid-1569186430615 .taskText1,#mermaid-1569186430615 .taskText2,#mermaid-1569186430615 .taskText3{fill:#fff}#mermaid-1569186430615 .task0,#mermaid-1569186430615 .task1,#mermaid-1569186430615 .task2,#mermaid-1569186430615 .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-1569186430615 .taskTextOutside0,#mermaid-1569186430615 .taskTextOutside1,#mermaid-1569186430615 .taskTextOutside2,#mermaid-1569186430615 .taskTextOutside3{fill:#000}#mermaid-1569186430615 .active0,#mermaid-1569186430615 .active1,#mermaid-1569186430615 .active2,#mermaid-1569186430615 .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-1569186430615 .activeText0,#mermaid-1569186430615 .activeText1,#mermaid-1569186430615 .activeText2,#mermaid-1569186430615 .activeText3{fill:#000!important}#mermaid-1569186430615 .done0,#mermaid-1569186430615 .done1,#mermaid-1569186430615 .done2,#mermaid-1569186430615 .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-1569186430615 .doneText0,#mermaid-1569186430615 .doneText1,#mermaid-1569186430615 .doneText2,#mermaid-1569186430615 .doneText3{fill:#000!important}#mermaid-1569186430615 .crit0,#mermaid-1569186430615 .crit1,#mermaid-1569186430615 .crit2,#mermaid-1569186430615 .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-1569186430615 .activeCrit0,#mermaid-1569186430615 .activeCrit1,#mermaid-1569186430615 .activeCrit2,#mermaid-1569186430615 .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-1569186430615 .doneCrit0,#mermaid-1569186430615 .doneCrit1,#mermaid-1569186430615 .doneCrit2,#mermaid-1569186430615 .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-1569186430615 .activeCritText0,#mermaid-1569186430615 .activeCritText1,#mermaid-1569186430615 .activeCritText2,#mermaid-1569186430615 .activeCritText3,#mermaid-1569186430615 .doneCritText0,#mermaid-1569186430615 .doneCritText1,#mermaid-1569186430615 .doneCritText2,#mermaid-1569186430615 .doneCritText3{fill:#000!important}#mermaid-1569186430615 .titleText{text-anchor:middle;font-size:18px;fill:#000}#mermaid-1569186430615 g.classGroup text{fill:#9370db;stroke:none;font-family:trebuchet ms,verdana,arial;font-size:10px}#mermaid-1569186430615 g.classGroup rect{fill:#ececff;stroke:#9370db}#mermaid-1569186430615 g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-1569186430615 .classLabel .box{stroke:none;stroke-width:0;fill:#ececff;opacity:.5}#mermaid-1569186430615 .classLabel .label{fill:#9370db;font-size:10px}#mermaid-1569186430615 .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-1569186430615 #compositionEnd,#mermaid-1569186430615 #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1569186430615 #aggregationEnd,#mermaid-1569186430615 #aggregationStart{fill:#ececff;stroke:#9370db;stroke-width:1}#mermaid-1569186430615 #dependencyEnd,#mermaid-1569186430615 #dependencyStart,#mermaid-1569186430615 #extensionEnd,#mermaid-1569186430615 #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1569186430615 .branch-label,#mermaid-1569186430615 .commit-id,#mermaid-1569186430615 .commit-msg{fill:#d3d3d3;color:#d3d3d3}</style><style>#mermaid-1569186430615 {
    color: rgb(0, 0, 0);
    font: normal normal 400 normal 16px / normal "Times New Roman";
  }</style><g></g><g class="grid" transform="translate(75, 146)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="#000" d="M0.5,-111V0.5H634.5V-111"></path><g class="tick" opacity="1" transform="translate(0.5,0)"><line stroke="#000" y2="-111"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;"> 2019-04</text></g><g class="tick" opacity="1" transform="translate(69.5,0)"><line stroke="#000" y2="-111"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;"> 2019-05</text></g><g class="tick" opacity="1" transform="translate(141.5,0)"><line stroke="#000" y2="-111"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;"> 2019-06</text></g><g class="tick" opacity="1" transform="translate(210.5,0)"><line stroke="#000" y2="-111"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;"> 2019-07</text></g><g class="tick" opacity="1" transform="translate(281.5,0)"><line stroke="#000" y2="-111"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;"> 2019-08</text></g><g class="tick" opacity="1" transform="translate(353.5,0)"><line stroke="#000" y2="-111"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;"> 2019-09</text></g><g class="tick" opacity="1" transform="translate(422.5,0)"><line stroke="#000" y2="-111"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;"> 2019-10</text></g><g class="tick" opacity="1" transform="translate(493.5,0)"><line stroke="#000" y2="-111"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;"> 2019-11</text></g><g class="tick" opacity="1" transform="translate(563.5,0)"><line stroke="#000" y2="-111"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;"> 2019-12</text></g><g class="tick" opacity="1" transform="translate(634.5,0)"><line stroke="#000" y2="-111"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;"> 2020-01</text></g></g><g><rect x="0" y="48" width="746.5" height="24" class="section section0"></rect><rect x="0" y="72" width="746.5" height="24" class="section section0"></rect><rect x="0" y="96" width="746.5" height="24" class="section section0"></rect><rect x="0" y="120" width="746.5" height="24" class="section section0"></rect></g><g><rect rx="3" ry="3" x="75" y="50" width="210" height="20" class="task  done0"></rect><rect rx="3" ry="3" x="285" y="74" width="212" height="20" class="task  active0"></rect><rect rx="3" ry="3" x="497" y="98" width="212" height="20" class="task  task0"></rect><rect rx="3" ry="3" x="285" y="122" width="424" height="20" class="task  crit0"></rect><text font-size="11" x="180" y="63.5" text-height="20" class="taskText taskText0  doneText0">Task Completed          </text><text font-size="11" x="391" y="87.5" text-height="20" class="taskText taskText0 activeText0">Task Currently WIP      </text><text font-size="11" x="603" y="111.5" text-height="20" class="taskText taskText0 ">Future Task             </text><text font-size="11" x="497" y="135.5" text-height="20" class="taskText taskText0  critText0">Nota Bene / Critical    </text></g><g><text x="10" y="98" class="sectionTitle sectionTitle0">Gantt Colors</text></g><g class="today"><line x1="478" x2="478" y1="25" y2="171" class="today"></line></g><text x="392" y="25" class="titleText"></text></svg>

Makefile

default: example

all: example key

example: example.mmd
	docker run --rm -v "${PWD}":/home/node/data matthewfeickert/mermaid-cli -i example.mmd -o example.svg
	docker run --rm -v "${PWD}":/home/node/data matthewfeickert/mermaid-cli -i example.mmd -o example.pdf
	docker run --rm -v "${PWD}":/home/node/data matthewfeickert/mermaid-cli -i example.mmd -o example.png

key: gantt_key.mmd
	docker run --rm -v "${PWD}":/home/node/data matthewfeickert/mermaid-cli -i gantt_key.mmd -o gantt_key.svg
	docker run --rm -v "${PWD}":/home/node/data matthewfeickert/mermaid-cli -i gantt_key.mmd -o gantt_key.pdf
	docker run --rm -v "${PWD}":/home/node/data matthewfeickert/mermaid-cli -i gantt_key.mmd -o gantt_key.png