ガント図
ガントチャートは、1896年にカロル・アダミエッキが最初に開発し、1910年代にヘンリー・ガントが独自に開発したバーグラフの一種で、プロジェクトのスケジュールと、各プロジェクトが完了するのにかかる時間を示します。ガントチャートは、プロジェクトの端要素と要約要素の開始日と終了日の間の日数を示します。
ユーザーへの注意
ガントチャートは、各スケジュールされたタスクを左から右に延びる1つの連続したバーとして記録します。x軸は時間を表し、y軸は異なるタスクと、その完了順序を記録します。
特定のタスクに関連する日付、曜日、または日付の収集の「除外」がある場合、ガントチャートはその変更に対応し、タスク内部にギャップを作るのではなく、右方向に同じ数の日を延長します。 ここに示すように 
ただし、除外された日付が連続して開始する2つのタスクの間に存在する場合、除外された日付は視覚的にスキップされ、空白のままとなり、次のタスクは除外された日付の終了後に始まります。 ここに示すように 
ガントチャートは、プロジェクトが完了するまでの時間を追跡するのに役立ちますが、「非稼働日」を視覚的に表すためにも使用できます。いくつかの調整を加えることで可能です。
Mermaidは、SVG、PNG、またはドキュメントに貼り付け可能なMarkdownリンクとしてガント図をレンダリングできます。
Code:
構文
Code:
タスクはデフォルトで順次行われます。タスクの開始日は前のタスクの終了日にデフォルト設定されています。
コロン : はタスクタイトルとそのメタデータを分けます。 メタデータ項目はカンマ , で区切られます。有効なタグは active、done、crit、milestoneです。タグはオプショナルですが、使用する場合は最初に指定する必要があります。 タグ処理の後、残りのメタデータ項目は次のように解釈されます。
- 単一のアイテムが指定された場合、それはタスクが終了する時期を決定します。それは特定の日付/時刻または期間である場合があります。期間が指定された場合、タスクの開始日から期間が加算され、除外を考慮してタスクの終了日が決定されます。
- 2つのアイテムが指定された場合、最後のアイテムは前のケースと同様に解釈されます。最初のアイテムは、明示的な開始日/時刻（
dateFormatで指定された形式）を指定するか、after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]を使用して別のタスクを参照することができます。後者の場合、タスクの開始日は参照されたタスクの最も遅い終了日によって設定されます。 - 3つのアイテムが指定された場合、最後の2つは前のケースと同様に解釈されます。最初のアイテムはタスクのIDを示し、これは
later <taskID>構文を使用して参照できます。
| メタデータ構文 | 開始日 | 終了日 | ID |
|---|---|---|---|
<taskID>, <startDate>, <endDate> | startdateはdateformatを使用して解釈されます | endDateはdateformatを使用して解釈されます | taskID |
<taskID>, <startDate>, <length> | startdateはdateformatを使用して解釈されます | 開始日 + length | taskID |
<taskID>, after <otherTaskId>, <endDate> | 前に指定されたタスクotherTaskIDの終了日 | endDateはdateformatを使用して解釈されます | taskID |
<taskID>, after <otherTaskId>, <length> | 前に指定されたタスクotherTaskIDの終了日 | 開始日 + length | taskID |
<taskID>, <startDate>, until <otherTaskId> | startdateはdateformatを使用して解釈されます | 前に指定されたタスクotherTaskIDの開始日 | taskID |
<taskID>, after <otherTaskId>, until <otherTaskId> | 前に指定されたタスクotherTaskIDの終了日 | 前に指定されたタスクotherTaskIDの開始日 | taskID |
<startDate>, <endDate> | startdateはdateformatを使用して解釈されます | enddateはdateformatを使用して解釈されます | 該当なし |
<startDate>, <length> | startdateはdateformatを使用して解釈されます | 開始日 + length | 該当なし |
after <otherTaskID>, <endDate> | 前に指定されたタスクotherTaskIDの終了日 | enddateはdateformatを使用して解釈されます | 該当なし |
after <otherTaskID>, <length> | 前に指定されたタスクotherTaskIDの終了日 | 開始日 + length | 該当なし |
<startDate>, until <otherTaskId> | startdateはdateformatを使用して解釈されます | 前に指定されたタスクotherTaskIDの開始日 | 該当なし |
after <otherTaskId>, until <otherTaskId> | 前に指定されたタスクotherTaskIDの終了日 | 前に指定されたタスクotherTaskIDの開始日 | 該当なし |
<endDate> | 前のタスクの終了日 | enddateはdateformatを使用して解釈されます | 該当なし |
<length> | 前のタスクの終了日 | 開始日 + length | 該当なし |
until <otherTaskId> | 前のタスクの終了日 | 前に指定されたタスクotherTaskIDの開始日 | 該当なし |
NOTE
キーワード`until`のサポートは(v10.9.0+)で追加されました。これを使用して、特定のタスクまたはマイルストーンが開始するまで実行されるタスクを定義できます。
簡略化のため、この表はafterキーワードを使用してリストされた複数のタスクの使用を示していません。以下は、それを使用する方法と解釈される方法の例です。
Code:
タイトル
titleは、ガントチャート全体を説明するためにチャートの上部に表示される_オプション_の文字列です。
除外
excludesは オプション の属性で、YYYY-MM-DD形式の特定の日付、曜日（「日曜日」）または「週末」を受け入れますが、「平日」という単語は受け入れられません。 これらの日付はグラフにマークされ、タスクの期間計算から除外されます。つまり、タスクの間に除外された日付がある場合、スキップされた日数はタスクの終了に追加され、指定された期間が確保されます。
週末 (v\11.0.0+)
週末を除外する際、週末を金曜日と土曜日または土曜日と日曜日のいずれかに設定することができます。デフォルトでは週末は土曜日と日曜日です。 週末の開始日を定義するには、fridayまたはsaturdayのいずれかの後に新しい行で追加できる オプション 属性 weekendがあります。
Code:
セクションステートメント
チャートをさまざまなセクションに分けることができます。たとえば、開発と文書の異なる部分を分けるために使用します。
そのためには、sectionキーワードで始まる行を開始し、それに名前を付けます。（チャート全体のタイトルとは異なり、この名前は_必須_です。）
マイルストーン
ダイアグラムにマイルストーンを追加できます。マイルストーンはタスクとは異なり、時間の一瞬を表し、キーワードmilestoneによって識別されます。以下は、マイルストーンを使用する方法の例です。マイルストーンの正確な位置は、マイルストーンの初期日付とタスクの「期間」によって決定されます: 初期日+期間/2。
Code:
日付の設定
dateFormatは、ガント要素の 入力 日付の形式を定義します。レンダリングチャートの 出力 においてこれらの日付がどのように表現されるかはaxisFormatで定義されます。
入力日付形式
デフォルトの入力日付形式はYYYY-MM-DDです。カスタムdateFormatを定義できます。
dateFormat YYYY-MM-DD次のフォーマットオプションがサポートされています:
| 入力 | 例 | 説明 |
|---|---|---|
YYYY | 2014 | 4桁の年 |
YY | 14 | 2桁の年 |
Q | 1..4 | 年の四半期。四半期の最初の月を設定します。 |
M MM | 1..12 | 月番号 |
MMM MMMM | 1月..12月 | dayjs.locale()で設定されたロケールの月名 |
D DD | 1..31 | 月の日 |
Do | 1st..31st | 月の日にOrdinal（序数）を付ける |
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 | 10分の1秒 |
SS | 0..99 | 100分の1秒 |
SSS | 0..999 | 1000分の1秒 |
Z ZZ | +12:00 | UTCからのオフセット（+-HH:mm、+-HHmm、またはZ） |
詳細は、https://day.js.org/docs/en/parse/string-format/をご覧ください。
軸出力日付形式
デフォルトの出力日付形式はYYYY-MM-DDです。カスタムaxisFormatを定義できます。たとえば、2020年第1四半期を表示するために2020-Q1のようにできます。
axisFormat %Y-%m-%d次のフォーマット文字列がサポートされています:
| フォーマット | 定義 |
|---|---|
| %a | 短縮形式の曜日名 |
| %A | 完全形式の曜日名 |
| %b | 短縮形式の月名 |
| %B | 完全形式の月名 |
| %c | 日時として、「%a %b %e %H:%M:%S %Y」として表示 |
| %d | 0でパディングされた月の日（0..31） |
| %e | スペースでパディングされた月の日（0..31）、%_dと同等 |
| %H | 時間（24時間制の時計） |
| %I | 時間（12時間制の時計） |
| %j | 年の日を10進数として表示 |
| %m | 10進数での月 |
| %M | 10進数での分 |
| %L | 10進数でのミリ秒 |
| %p | AMまたはPM |
| %S | 10進数での秒 |
| %U | 週番号（日曜日を週の初めとする） |
| %w | 10進数形式の曜日（0（日曜日）から6） |
| %W | 週番号（週の初めを月曜日とする） |
| %x | 日付、%m/%d/%Yとして表示 |
| %X | 時刻、%H:%M:%Sとして表示 |
| %y | 世紀なしの年を10進数で表示 |
| %Y | 世紀ありの年を10進数で表示 |
| %Z | タイムゾーンオフセット（例："-0700"） |
| %% | 文字としてのリテラル"%" |
詳細は、https://github.com/d3/d3-time-format/tree/v4.0.0#locale_formatを参照してください。
軸目盛（v10.3.0+）
デフォルトの出力目盛は自動です。カスタムのtickIntervalを設定できます。例: 1dayまたは1week。
tickInterval 1dayパターンは以下の通りです:
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;詳細は、https://github.com/d3/d3-time#interval_everyを参照してください。
週ベースのtickIntervalは、デフォルトで日曜日から週が始まります。tickIntervalを別の日曜日に指定したい場合は、weekdayオプションを使用します：
Code:
WARNING
`millisecond`と`second`のサポートはv10.3.0で追加されました。
コンパクトモードでの出力
コンパクトモードを使用すると、同じ行に複数のタスクを表示できます。ガントチャートのコンパクトモードを有効にするには、前にYAML設定を通してグラフの表示モードを設定します。
コメント
ガントチャート内にコメントを入力できますが、解析者によって無視されます。コメントは独立した行にあり、%%（ダブルパーセント記号）で始まる必要があります。コメントの開始から次の改行までの任意のテキストはコメントとして扱われ、ダイアグラム構文を含むことができます。
スタイリング
ガントダイアグラムのスタイリングは、いくつかのCSSクラスを定義することによって行われます。レンダリング中に、これらのクラスは、src/diagrams/gantt/styles.jsにあるファイルから抽出されます。
使用されるクラス
| クラス | 説明 |
|---|---|
| grid.tick | グリッド線のスタイリング |
| grid.path | グリッドの境界線のスタイリング |
| .taskText | タスクテキストのスタイリング |
| .taskTextOutsideRight | アクティビティバーの右側にあるタスクテキストのスタイリング |
| .taskTextOutsideLeft | アクティビティバーの左側にあるタスクテキストのスタイリング |
| todayMarker | 「今日のマーカー」のトグルとスタイリング |
サンプルスタイルシート
.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;
}今日のマーカー
現在の日付のマーカーをスタイリングまたは非表示にすることができます。スタイリングするには、todayMarkerキーの値を追加します。
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5マーカーを非表示にするには、todayMarkerをoffに設定します。
todayMarker off設定
ガントダイアグラムのレンダリングマージンを調整することができます。
これは、設定オブジェクトのganttConfig部分を定義することによって行われます。 CLIの使用方法は、mermaidCLIページに記載されています。
mermaid.ganttConfigは、設定パラメータのJSON文字列または対応するオブジェクトに設定できます。
mermaid.ganttConfig = {
titleTopMargin: 25, // ダイアグラムの上部のテキストのマージン
barHeight: 20, // グラフ内のバーの高さ
barGap: 4, // ガントダイアグラム内の異なるアクティビティ間のマージン
topPadding: 75, // タイトルとガントダイアグラムの間のマージンと 軸とガントダイアグラムの間のマージン
rightPadding: 75, // アクティビティの右側にあるセクション名のために確保されたスペース
leftPadding: 75, // アクティビティの左側にあるセクション名のために確保されたスペース
gridLineStartPadding: 10, // グリッド線の垂直的な開始位置
fontSize: 12, // フォントサイズ
sectionFontSize: 24, // セクション用のフォントサイズ
numberSectionStyles: 1, // 交互のセクションスタイルの数
axisFormat: '%d/%m', // 軸の日付/時間形式
tickInterval: '1week', // 軸の目盛
topAxis: true, // このフラグが設定されている場合、日付ラベルがチャートの上部に追加されます
displayMode: 'compact', // コンパクトモードをオンにします
weekday: 'sunday', // 週ベースの間隔が始まる日
};可能な設定パラメータ:
| パラメータ | 説明 | デフォルト値 |
|---|---|---|
| mirrorActor | ダイアグラムの上だけでなく下にもアクターのレンダリングをオン/オフ | false |
| bottomMarginAdj | グラフがどれだけ下に終了したかを調整します。CSSでの広い境界スタイルが不要なクリッピングを生成する可能性があるため、この設定が存在します。 | 1 |
インタラクション
タスクにクリックイベントをバインドすることができます。クリックは、JavaScriptのコールバックまたは現在のブラウザタブで開かれるリンクに導くことができます。 注意: この機能はsecurityLevel='strict'を使用している場合は無効になり、securityLevel='loose'を使用している場合は有効になります。
click taskId call callback(arguments)
click taskId href URL- taskIdはタスクのIDです。
- callbackは、グラフを表示しているページに定義されたJavaScript関数の名前で、他の引数が指定されていない場合、関数はタスクIDをパラメータとして呼び出されます。
初心者向けのヒント—HTMLコンテキストでインタラクティブリンクを使用する完全な例:
<body>
<pre 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()
</pre>
<script>
const printArguments = function (arg1, arg2, arg3) {
alert('printArgumentsが引数を使って呼び出されました: ' + arg1 + ', ' + arg2 + ', ' + arg3);
};
const printTask = function (taskId) {
alert('taskId: ' + taskId);
};
const config = {
startOnLoad: true,
securityLevel: 'loose',
};
mermaid.initialize(config);
</script>
</body>例
バーチャート（ガントチャート使用）
Code: