Gantt diagrams (диаграммы Ганта)

dateFormat YYYY-MM-DD

Input       Example             Description:
YYYY        2014               4-х значный год
YY          14                 2 -х значный год
Q           1..4               Квартал (четверть года). Устанавливает месяц в первый месяц квартала. 
M MM        1..12              Номер месяца
MMM MMMM    January..Dec       Название месяца, заданное в moment.locale()
D DD        1..31              День месяца
Do          1st..31st          День месяца с порядковым номером
DDD DDDD    1..365             Номер дня в году
X           1410715640.579     Временная метка Unix
x           1410715640579      Временная метка Unix ms
H HH        0..23              24-х часовое время
h hh        1..12              12-ти часовое время, используемое с a A.
a A         am pm              Вечернее или утреннее время
m mm        0..59              Минуты
s ss        0..59              Секунды
S           0..9               Десятые доли секунды
SS          0..99              Сотые доли секунды
SSS         0..999             Тысячные доли секунды
Z ZZ        +12:00             Смещение от UTC в виде +-HH:mm, +-HHmm, или Z

axisFormat  %Y-%m-%d

%a - сокращенное название дня недели.
%A - полное название дня недели.
%b - сокращенное название месяца.
%B - полное название месяца.
%c - дата и время,как "%a %b %e %H:%M:%S %Y".
%d - день месяца, с добавлением нуля в виде десятичного числа [01,31].
%e - день месяца, заполненный пробелом, в виде десятичного числа [ 1,31]; эквивалентно %_d.
%H - час (24-часовые часы) в виде десятичного числа [00,23].
%I - час (12-часовые часы) в виде десятичного числа [01,12].
%j - день года в виде десятичного числа [001,366].
%m - месяц в виде десятичного числа [01,12].
%M - минута в виде десятичного числа [00,59].
%L - миллисекунды в виде десятичного числа [000, 999].
%p - утреннее (AM) или вечернее (PM) время.
%S - секунда в виде десятичного числа [00,61].
%U - номер недели года (воскресенье как первый день недели) в виде десятичного числа [00,53].
%w - день недели в виде десятичного числа [0(Воскресенье),6].
%W - номер недели года (понедельник как первый день недели) в виде десятичного числа [00,53].
%x - дата, как "%m/%d/%Y".
%X - время, как "%H:%M:%S".
%y - год без столетия в виде десятичного числа [00,99].
%Y - год с веком в виде десятичного числа.
%Z - смещение часового пояса, напрмер: "-0700".
%% - символ %.

.grid .tick {
    stroke: lightgrey;
    opacity: 0.3;
    shape-rendering: crispEdges;
}
.grid path {
    stroke-width: 0;
}

#tag {
    color: white;
    background: #FA283D;
    width: 150px;
    position: absolute;
    display: none;
    padding:3px 6px;
    margin-left: -80px;
    font-size: 11px;
}

#tag:before {
    border: solid transparent;
    content: ' ';
    height: 0;
    left: 50%;
    margin-left: -5px;
    position: absolute;
    width: 0;
    border-width: 10px;
    border-bottom-color: #FA283D;
    top: -20px;
}
.taskText {
    fill:white;
    text-anchor:middle;
}
.taskTextOutsideRight {
    fill:black;
    text-anchor:start;
}
.taskTextOutsideLeft {
    fill:black;
    text-anchor:end;
}

click taskId call callback(arguments)
click taskId href URL

<body>
  <div class="mermaid">
    gantt
      dateFormat  YYYY-MM-DD

      section Clickable
      Visit mermaidjs           :active, cl1, 2014-01-07, 3d
      Print arguments         :cl2, after cl1, 3d
      Print task              :cl3, after cl2, 3d

      click cl1 href "https://mermaidjs.github.io/"
      click cl2 call printArguments("test1", "test2", test3)
      click cl3 call printTask()
  </div>

  <script>
    var printArguments = function(arg1, arg2, arg3) {
      alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
    }
    var printTask = function(taskId) {
      alert('taskId: ' + taskId);
    }
    var config = {
      startOnLoad:true,
      securityLevel:'loose',
    };
    mermaid.initialize(config);
  </script>
</body>