タイムラインダイアグラム

タイムライン：これは現時点では実験的なダイアグラムです。構文とプロパティは将来のリリースで変更される可能性があります。アイコンの統合は実験的な部分を除いて、構文は安定しています。

「タイムラインとは、出来事、日付、または期間の年代記を示すために使用されるダイアグラムの一種です。通常は時間経過を示すためにグラフィカルに提示され、通常は年代順に整理されます。基本的なタイムラインは、通常は日付をマーカーとして使用して、年代順に出来事のリストを示します。タイムラインは、出来事間の関係（例えば、人の人生の出来事間の関係）を示すためにも使用できます。」(Wikipedia).

タイムラインの例

構文

タイムラインダイアグラムを作成するための構文はシンプルです。常にtimelineキーワードから始めて、Mermaidにタイムラインダイアグラムを作成したいことを知らせます。

その後、タイムラインにタイトルを追加することができます。これは、titleキーワードに続いてタイトルテキストを追加する行を追加することで行います。

次に、タイムラインデータを追加します。常に期間から始め、コロン、イベントのテキストという順になります。オプションで、2番目のコロンとイベントのテキストを追加できます。したがって、期間ごとに1つ以上のイベントを持つことができます。

{time period} : {event}

または

{time period} : {event} : {event}

または

{time period} : {event}
              : {event}
              : {event}

注記：期間とイベントはどちらも単純なテキストであり、数値に限定されません。

上記の例に対する構文を見てみましょう。

このようにして、テキストアウトラインを使用してタイムラインダイアグラムを生成できます。期間とイベントのシーケンスは重要であり、タイムラインを描画するために使用されます。最初の期間はタイムラインの左側に配置され、最後の期間はタイムラインの右側に配置されます。

同様に、最初のイベントはその特定の期間の上部に配置され、最後のイベントは下部に配置されます。

セクション/時代での期間のグループ化

期間をセクション/時代でグループ化できます。これは、sectionキーワードに続いてセクション名を追加する行を追加することで行います。

新しいセクションが定義されるまで、後続のすべての期間はこのセクションに配置されます。

セクションが定義されていない場合、すべての期間はデフォルトのセクションに配置されます。

期間をセクションでグループ化した例を見てみましょう。

ご覧のとおり、期間はセクションに配置され、セクションは定義された順序で配置されます。

特定のセクションの下にあるすべての期間とイベントは、同様の色分けに従います。これは、期間とイベント間の関係をより見やすくするために行われます。

長い期間またはイベントのテキストの折り返し

デフォルトでは、期間とイベントのテキストは長すぎる場合は折り返されます。これは、テキストがダイアグラムの外側に描画されるのを避けるために行われます。

<br>を使用して改行を強制することもできます。

長い期間と長いイベントを含む別の例を見てみましょう。

期間とイベントのスタイル設定

前述のように、各セクションには配色があり、セクションの下にある各期間とイベントは同様の配色に従います。

ただし、セクションが定義されていない場合、2つの可能性があります。

1. 期間を個別にスタイル設定する、つまり各期間（および対応するイベント）には独自の配色があります。これはデフォルトの動作です。

注記：セクションは定義されておらず、各期間とその対応するイベントには独自の配色があります。

2. disableMultiColorオプションを使用して、multiColorオプションを無効にします。これにより、すべての期間とイベントが同じ配色に従います。

このオプションは、mermaid.initialize関数またはディレクティブを介して追加する必要があります。

mermaid.initialize({
        theme: 'base',
        startOnLoad: true,
        logLevel: 0,
        timeline: {
          disableMulticolor: false,
        },
        ...
        ...

multiColorオプションを無効にした同じ例を見てみましょう。

配色をカスタマイズする

cScale0からcScale11のテーマ変数を使用して配色をカスタマイズできます。これにより、背景色が変更されます。Mermaidでは、最大12個のセクションに対して固有の色を設定できます。cScale0変数は最初のセクションまたは期間の値を決定し、cScale1は2番目のセクションの値を決定するなどです。12個を超えるセクションがある場合、配色繰り返しされます。

セクションの前景色も変更する場合は、cScaleLabel0からcScaleLabel11のテーマ変数を使用して行うことができます。

注記：これらのテーマ変数のデフォルト値は、選択されたテーマから選択されます。デフォルト値を上書きする場合は、initialize呼び出しを使用してカスタムテーマ変数の値を追加できます。

例

それでは、cScale0からcScale2の変数のデフォルト値を上書きしてみましょう。

色がテーマ変数で指定された値に変更されていることがわかります。

テーマ

Mermaidは、適切なテーマを見つけるために使用できる、事前に定義された多くのテーマをサポートしています。PS：既存のテーマの変数を上書きして、独自のテーマを作成できます。ダイアグラムのテーマ設定の詳細についてはこちらをご覧ください。

以下は、さまざまな事前に定義されたテーマオプションです。

• base
• forest
• dark
• default
• neutral

注記：テーマを変更するには、initialize呼び出しまたはディレクティブを使用できます。ディレクティブの詳細については、こちらをご覧ください。それらを実際に使用して、サンプルダイアグラムがさまざまなテーマでどのように表示されるかを見てみましょう。

Baseテーマ

Forestテーマ

Darkテーマ

Defaultテーマ

Neutralテーマ

ライブラリ/ウェブサイトとの統合

タイムラインは、将来変更される可能性のある実験的な遅延読み込みと非同期レンダリング機能を使用しています。遅延読み込みは、今後追加のダイアグラムを追加できるようにするために重要です。

この方法を使用して、タイムラインダイアグラムを含むMermaidをWebページに追加できます。

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
</script>

非同期読み込みの方法については、ライブエディタの実装を参照することもできます。