Mermaid
timeline
title 文書のライフサイクル
下書き : 構成を合意
レビュー : 意見を収集 : 変更を承認
公開 : 手引きを公開読み込み中…
Mermaid 11.15.0
Mermaid タイムラインの書き方・早見表
タイムラインは順序付きの期間ラベルの下にイベントをまとめます。日付、期間、依存関係が必要ならGanttを使います。ラベルは時間に比例したカレンダーではありません。
Mermaidタイムラインジェネレーターで作成 →クイックスタート
期間とイベントをコロンで区切り、追加のコロンでイベントを増やします。
構文リファレンス
| 構文 | 意味 |
|---|---|
| timeline / title Text | タイムラインと任意のタイトルを宣言します。 |
| section Text | 以降の期間をセクションにまとめます。 |
| Period : Event : Another event | コロン区切りで複数イベントを追加します。 |
| : Another event | 前の期間にイベントを続けます。 |
| <br> | ラベル内で改行します。 |
| config.timeline.disableMulticolor | セクションなしの期間で色の切り替えを無効にします。 |
| theme: base / themeVariables.cScale0…cScale11 | theme baseでcScaleの背景とcScaleLabelの文字色を指定します。 |
| %% / accTitle: / accDescr: | コメントとアクセシビリティ用の説明です。 |
期間とイベント
期間は日付でなくても構いません。追加コロン以降は同じ期間のイベントです。並び順はコードが決め、日付順には自動整列しません。
Mermaid
timeline
title レビューの記法
第1確認 : 構造を確認
: 参照を確認
第2確認 : 表現を確認 : リンクを確認読み込み中…
セクションと改行
sectionは次のセクションまで適用されます。ラベルを短くし、意図的な改行は<br>を使います。
Mermaid
timeline
title 編集の段階
section 準備
構成の<br>レビュー : 範囲を決定
section 納品
最終<br>レビュー : 修正を統合
発行 : 読者に通知読み込み中…
単色の期間表示
disableMulticolorはセクションなしの色の切り替えを止めます。時間尺度や関係は追加しません。
Mermaid
---
config:
timeline:
disableMulticolor: true
---
timeline
title 承認の手順
下書き : 提出
レビュー : 受理
公開 : 保管読み込み中…
セクションの配色
theme baseとcScale0…cScale11、cScaleLabel0…cScaleLabel11を使います。文字のコントラストを保ちましょう。色数を超えると配色が繰り返されます。
Mermaid
---
config:
theme: base
themeVariables:
cScale0: "#d3e5ff"
cScaleLabel0: "#171717"
cScale1: "#f5f5f5"
cScaleLabel1: "#171717"
---
timeline
title 二段階のレビュー
section 執筆
構成 : 準備完了
section 公開作業
手引き : 利用可能読み込み中…
よくある間違い
イベントを空にする
各コロンの後にイベントの本文が必要です。コロンなしの期間は有効ですが、イベントは含みません。
誤った構文（下に修正例があります）
timeline
: Mermaid
timeline
レビュー : 受理読み込み中…
比例した時間間隔を期待する
年や月は単なるラベルです。時間に比例した間隔にはGanttを使います。
制約
- 期間は順序付きのカテゴリで、時間に比例した間隔はありません。
- イベントに期間、依存関係、座標は設定できません。
- 長いラベルや多数のイベントは読みにくくなります。
よくある質問 (FAQ)
一つの期間に複数イベントを入れられる？
追加のコロンで区切るか、コロンから始まる継続行を使います。
色を変更するには？
フロントマターでtheme baseとcScale、cScaleLabel変数を設定します。
Ganttを選ぶのはどんな場合？
実際の日付範囲、期間、依存関係にはGantt、短い物語的な流れにはtimelineが適します。