Mermaid ドキュメント

Appearance

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

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

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

タイムラインの例 ​

構文 ​

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

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

次に、タイムラインデータを追加します。ここでは常に時間の期間で始め、コロンの後にイベントのテキストを追加します。オプションとして、2つ目のコロンを追加し、その後にイベントのテキストを追加できます。これにより、1つまたは複数のイベントを時間の期間ごとに持つことができます。

json
{時間の期間} : {イベント}

または

json
{時間の期間} : {イベント} : {イベント}

または

json
{時間の期間} : {イベント}
              : {イベント}
              : {イベント}

注意: 時間の期間とイベントは単純なテキストであり、数値に制限されません。

上記の例の構文を見てみましょう。

Code:
mermaid

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

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

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

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

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

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

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

Code:
mermaid

ご覧のように、時間の期間はセクションに配置され、セクションは定義された順序で配置されています。

特定のセクションの下にあるすべての時間の期間とイベントは、同様のカラースキームに従います。これは、時間の期間とイベントの関係を見るのを容易にするためです。

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

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

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

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

Code:
mermaid
Code:
mermaid

時間の期間とイベントのスタイリング ​

以前に説明したように、各セクションにはカラースキームがあり、セクションの下の各時間の期間とイベントは同様のカラースキームに従います。

ただし、セクションが定義されていない場合、次の2つの選択肢があります。

  1. 時間の期間を個別にスタイル設定する、すなわち、各時間の期間（およびその対応するイベント）は独自のカラースキームを持つことになります。これはデフォルトの動作です。
Code:
mermaid

注意: セクションが定義されていないことに注意してください。このため、各時間の期間とその対応するイベントは独自のカラースキームを持ちます。

  1. disableMultiColorオプションを使用してマルチカラオプションを無効にします。これにより、すべての時間の期間とイベントが同じカラースキームに従います。

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

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

マルチカラオプションを無効にした同じ例を見てみましょう。

Code:
mermaid

カラースキームのカスタマイズ ​

cScale0からcScale11テーマ変数を使用してカラースキームをカスタマイズできます。これにより背景色が変更されます。Mermaidは最大12セクションのユニークな色を設定することを許可します。cScale0変数は最初のセクションまたは時間の期間の値を決定し、cScale1は2番目のセクションの値を決定します。 12セクションを超える場合、カラースキームは繰り返され始めます。

セクションの前景色を変更したい場合は、cScaleLabel0からcScaleLabel11変数を使用してください。

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

例:

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

Code:
mermaid

テーマ変数で指定された値にカラーが変更されている様子を確認してください。

テーマ ​

Mermaidは、あなたが合うテーマを見つけるために使用できる多くの事前定義されたテーマをサポートしています。PS: 実際に既存のテーマの変数をオーバーライドして、独自のカスタムテーマを作成できます。ダイアグラムのテーマ設定について、こちらで詳しく学んでください。

以下は異なる事前定義されたテーマのオプションです：

  • base
  • forest
  • dark
  • default
  • neutral

注意: テーマを変更するには、initialize呼び出しまたはディレクティブを使用できます。ディレクティブについて詳しく学びましょう。 これらを利用して、異なるテーマでサンプルダイアグラムがどのように表示されるかを見てみましょう。

ベーステーマ ​

Code:
mermaid

フォレストテーマ ​

Code:
mermaid

ダークテーマ ​

Code:
mermaid

デフォルトテーマ ​

Code:
mermaid

ニュートラルテーマ ​

Code:
mermaid

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

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

以下の方法で、ウェブページにmermaid（タイムラインダイアグラムを含む）を追加できます：

html
<script type="module">
  import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
</script>

非同期読み込みがどのように行われるかを見るために、こちらのライブエディタでの実装を参照することもできます。