Skip to content

Instantly share code, notes, and snippets.

@matthewfeickert

matthewfeickert/Makefile

Last active September 22, 2019 21:17
Show Gist options
  • Save matthewfeickert/7be2caa8bea32fc20dff895ab1c3565a to your computer and use it in GitHub Desktop.
Save matthewfeickert/7be2caa8bea32fc20dff895ab1c3565a to your computer and use it in GitHub Desktop.
Download ZIP
Example of Gantt charts made with Mermaid JS
Raw
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"

Raw
example.mmd
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
example.svg
<svg id="mermaid-1569186347930" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 784 484"><style>#mermaid-1569186347930 .label{font-family:trebuchet ms,verdana,arial;color:#333}#mermaid-1569186347930 .node circle,#mermaid-1569186347930 .node ellipse,#mermaid-1569186347930 .node polygon,#mermaid-1569186347930 .node rect{fill:#ececff;stroke:#9370db;stroke-width:1px}#mermaid-1569186347930 .node.clickable{cursor:pointer}#mermaid-1569186347930 .arrowheadPath{fill:#333}#mermaid-1569186347930 .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-1569186347930 .edgeLabel{background-color:#e8e8e8}#mermaid-1569186347930 .cluster rect{fill:#ffffde!important;stroke:#aa3!important;stroke-width:1px!important}#mermaid-1569186347930 .cluster text{fill:#333}#mermaid-1569186347930 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-1569186347930 .actor{stroke:#ccf;fill:#ececff}#mermaid-1569186347930 text.actor{fill:#000;stroke:none}#mermaid-1569186347930 .actor-line{stroke:grey}#mermaid-1569186347930 .messageLine0{marker-end:"url(#arrowhead)"}#mermaid-1569186347930 .messageLine0,#mermaid-1569186347930 .messageLine1{stroke-width:1.5;stroke-dasharray:"2 2";stroke:#333}#mermaid-1569186347930 #arrowhead{fill:#333}#mermaid-1569186347930 #crosshead path{fill:#333!important;stroke:#333!important}#mermaid-1569186347930 .messageText{fill:#333;stroke:none}#mermaid-1569186347930 .labelBox{stroke:#ccf;fill:#ececff}#mermaid-1569186347930 .labelText,#mermaid-1569186347930 .loopText{fill:#000;stroke:none}#mermaid-1569186347930 .loopLine{stroke-width:2;stroke-dasharray:"2 2";marker-end:"url(#arrowhead)";stroke:#ccf}#mermaid-1569186347930 .note{stroke:#aa3;fill:#fff5ad}#mermaid-1569186347930 .noteText{fill:#000;stroke:none;font-family:trebuchet ms,verdana,arial;font-size:14px}#mermaid-1569186347930 .section{stroke:none;opacity:.2}#mermaid-1569186347930 .section0{fill:rgba(102,102,255,.49)}#mermaid-1569186347930 .section2{fill:#fff400}#mermaid-1569186347930 .section1,#mermaid-1569186347930 .section3{fill:#fff;opacity:.2}#mermaid-1569186347930 .sectionTitle0,#mermaid-1569186347930 .sectionTitle1,#mermaid-1569186347930 .sectionTitle2,#mermaid-1569186347930 .sectionTitle3{fill:#333}#mermaid-1569186347930 .sectionTitle{text-anchor:start;font-size:11px;text-height:14px}#mermaid-1569186347930 .grid .tick{stroke:#d3d3d3;opacity:.3;shape-rendering:crispEdges}#mermaid-1569186347930 .grid path{stroke-width:0}#mermaid-1569186347930 .today{fill:none;stroke:red;stroke-width:2px}#mermaid-1569186347930 .task{stroke-width:2}#mermaid-1569186347930 .taskText{text-anchor:middle;font-size:11px}#mermaid-1569186347930 .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px}#mermaid-1569186347930 .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-1569186347930 .taskText0,#mermaid-1569186347930 .taskText1,#mermaid-1569186347930 .taskText2,#mermaid-1569186347930 .taskText3{fill:#fff}#mermaid-1569186347930 .task0,#mermaid-1569186347930 .task1,#mermaid-1569186347930 .task2,#mermaid-1569186347930 .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-1569186347930 .taskTextOutside0,#mermaid-1569186347930 .taskTextOutside1,#mermaid-1569186347930 .taskTextOutside2,#mermaid-1569186347930 .taskTextOutside3{fill:#000}#mermaid-1569186347930 .active0,#mermaid-1569186347930 .active1,#mermaid-1569186347930 .active2,#mermaid-1569186347930 .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-1569186347930 .activeText0,#mermaid-1569186347930 .activeText1,#mermaid-1569186347930 .activeText2,#mermaid-1569186347930 .activeText3{fill:#000!important}#mermaid-1569186347930 .done0,#mermaid-1569186347930 .done1,#mermaid-1569186347930 .done2,#mermaid-1569186347930 .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-1569186347930 .doneText0,#mermaid-1569186347930 .doneText1,#mermaid-1569186347930 .doneText2,#mermaid-1569186347930 .doneText3{fill:#000!important}#mermaid-1569186347930 .crit0,#mermaid-1569186347930 .crit1,#mermaid-1569186347930 .crit2,#mermaid-1569186347930 .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-1569186347930 .activeCrit0,#mermaid-1569186347930 .activeCrit1,#mermaid-1569186347930 .activeCrit2,#mermaid-1569186347930 .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-1569186347930 .doneCrit0,#mermaid-1569186347930 .doneCrit1,#mermaid-1569186347930 .doneCrit2,#mermaid-1569186347930 .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-1569186347930 .activeCritText0,#mermaid-1569186347930 .activeCritText1,#mermaid-1569186347930 .activeCritText2,#mermaid-1569186347930 .activeCritText3,#mermaid-1569186347930 .doneCritText0,#mermaid-1569186347930 .doneCritText1,#mermaid-1569186347930 .doneCritText2,#mermaid-1569186347930 .doneCritText3{fill:#000!important}#mermaid-1569186347930 .titleText{text-anchor:middle;font-size:18px;fill:#000}#mermaid-1569186347930 g.classGroup text{fill:#9370db;stroke:none;font-family:trebuchet ms,verdana,arial;font-size:10px}#mermaid-1569186347930 g.classGroup rect{fill:#ececff;stroke:#9370db}#mermaid-1569186347930 g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-1569186347930 .classLabel .box{stroke:none;stroke-width:0;fill:#ececff;opacity:.5}#mermaid-1569186347930 .classLabel .label{fill:#9370db;font-size:10px}#mermaid-1569186347930 .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-1569186347930 #compositionEnd,#mermaid-1569186347930 #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1569186347930 #aggregationEnd,#mermaid-1569186347930 #aggregationStart{fill:#ececff;stroke:#9370db;stroke-width:1}#mermaid-1569186347930 #dependencyEnd,#mermaid-1569186347930 #dependencyStart,#mermaid-1569186347930 #extensionEnd,#mermaid-1569186347930 #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1569186347930 .branch-label,#mermaid-1569186347930 .commit-id,#mermaid-1569186347930 .commit-msg{fill:#d3d3d3;color:#d3d3d3}</style><style>#mermaid-1569186347930 {
color: rgb(0, 0, 0);
font: normal normal 400 normal 16px / normal "Times New Roman";
}</style><g></g><g class="grid" transform="translate(75, 434)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="#000" d="M0.5,-399V0.5H634.5V-399"></path><g class="tick" opacity="1" transform="translate(40.5,0)"><line stroke="#000" y2="-399"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;">2014-01-07</text></g><g class="tick" opacity="1" transform="translate(119.5,0)"><line stroke="#000" y2="-399"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;">2014-01-09</text></g><g class="tick" opacity="1" transform="translate(198.5,0)"><line stroke="#000" y2="-399"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;">2014-01-11</text></g><g class="tick" opacity="1" transform="translate(277.5,0)"><line stroke="#000" y2="-399"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;">2014-01-13</text></g><g class="tick" opacity="1" transform="translate(357.5,0)"><line stroke="#000" y2="-399"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;">2014-01-15</text></g><g class="tick" opacity="1" transform="translate(436.5,0)"><line stroke="#000" y2="-399"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;">2014-01-17</text></g><g class="tick" opacity="1" transform="translate(515.5,0)"><line stroke="#000" y2="-399"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;">2014-01-19</text></g><g class="tick" opacity="1" transform="translate(594.5,0)"><line stroke="#000" y2="-399"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;">2014-01-21</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><rect x="0" y="144" width="746.5" height="24" class="section section1"></rect><rect x="0" y="168" width="746.5" height="24" class="section section1"></rect><rect x="0" y="192" width="746.5" height="24" class="section section1"></rect><rect x="0" y="216" width="746.5" height="24" class="section section1"></rect><rect x="0" y="240" width="746.5" height="24" class="section section1"></rect><rect x="0" y="264" width="746.5" height="24" class="section section1"></rect><rect x="0" y="288" width="746.5" height="24" class="section section2"></rect><rect x="0" y="312" width="746.5" height="24" class="section section2"></rect><rect x="0" y="336" width="746.5" height="24" class="section section2"></rect><rect x="0" y="360" width="746.5" height="24" class="section section3"></rect><rect x="0" y="384" width="746.5" height="24" class="section section3"></rect><rect x="0" y="408" width="746.5" height="24" class="section section3"></rect></g><g><rect rx="3" ry="3" x="75" y="50" width="79" height="20" class="task done0"></rect><rect rx="3" ry="3" x="194" y="74" width="119" height="20" class="task active0"></rect><rect rx="3" ry="3" x="313" y="98" width="198" height="20" class="task task0"></rect><rect rx="3" ry="3" x="511" y="122" width="198" height="20" class="task task0"></rect><rect rx="3" ry="3" x="75" y="146" width="40" height="20" class="task doneCrit1"></rect><rect rx="3" ry="3" x="154" y="170" width="80" height="20" class="task doneCrit1"></rect><rect rx="3" ry="3" x="234" y="194" width="118" height="20" class="task activeCrit1"></rect><rect rx="3" ry="3" x="352" y="218" width="199" height="20" class="task crit1"></rect><rect rx="3" ry="3" x="551" y="242" width="79" height="20" class="task task1"></rect><rect rx="3" ry="3" x="630" y="266" width="39" height="20" class="task task1"></rect><rect rx="3" ry="3" x="154" y="290" width="119" height="20" class="task active2"></rect><rect rx="3" ry="3" x="273" y="314" width="33" height="20" class="task task2"></rect><rect rx="3" ry="3" x="273" y="338" width="79" height="20" class="task task2"></rect><rect rx="3" ry="3" x="352" y="362" width="119" height="20" class="task task3"></rect><rect rx="3" ry="3" x="471" y="386" width="33" height="20" class="task task3"></rect><rect rx="3" ry="3" x="504" y="410" width="80" height="20" class="task task3"></rect><text font-size="11" x="114.5" y="63.5" text-height="20" class="taskText taskText0 doneText0">Completed task </text><text font-size="11" x="253.5" y="87.5" text-height="20" class="taskText taskText0 activeText0">Active task </text><text font-size="11" x="412" y="111.5" text-height="20" class="taskText taskText0 ">Future task </text><text font-size="11" x="610" y="135.5" text-height="20" class="taskText taskText0 ">Future task2 </text><text font-size="11" x="120" y="159.5" text-height="20" class="taskTextOutsideRight taskTextOutside1 doneCritText1">Completed task in the critical line </text><text font-size="11" x="239" y="183.5" text-height="20" class="taskTextOutsideRight taskTextOutside1 doneCritText1">Implement parser and jison </text><text font-size="11" x="293" y="207.5" text-height="20" class="taskText taskText1 activeCritText1 critText1">Create tests for parser </text><text font-size="11" x="451.5" y="231.5" text-height="20" class="taskText taskText1 critText1">Future task in critical line </text><text font-size="11" x="635" y="255.5" text-height="20" class="taskTextOutsideRight taskTextOutside1 ">Create tests for renderer </text><text font-size="11" x="674" y="279.5" text-height="20" class="taskTextOutsideRight taskTextOutside1 ">Add to mermaid </text><text font-size="11" x="213.5" y="303.5" text-height="20" class="taskText taskText2 activeText2">Describe gantt syntax </text><text font-size="11" x="311" y="327.5" text-height="20" class="taskTextOutsideRight taskTextOutside2 ">Add gantt diagram to demo page </text><text font-size="11" x="357" y="351.5" text-height="20" class="taskTextOutsideRight taskTextOutside2 ">Add another diagram to demo page </text><text font-size="11" x="411.5" y="375.5" text-height="20" class="taskText taskText3 ">Describe gantt syntax </text><text font-size="11" x="509" y="399.5" text-height="20" class="taskTextOutsideRight taskTextOutside3 ">Add gantt diagram to demo page </text><text font-size="11" x="499" y="423.5" text-height="20" class="taskTextOutsideLeft taskTextOutside3 ">Add another diagram to demo page </text></g><g><text x="10" y="98" class="sectionTitle sectionTitle0">A section</text><text x="10" y="218" class="sectionTitle sectionTitle1">Critical tasks</text><text x="10" y="326" class="sectionTitle sectionTitle2">Documentation</text><text x="10" y="398" class="sectionTitle sectionTitle3">Last section</text></g><g class="today"><line x1="82728" x2="82728" y1="25" y2="459" class="today"></line></g><text x="392" y="25" class="titleText">Adding GANTT diagram functionality to mermaid</text></svg>
Raw
gantt_key.mmd
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
gantt_key.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment