タイムライン
タイムラインは、イベント、日付、または期間を説明するための図です。通常、時間の経過を示すためにグラフィカルにレンダリングされ、通常は時系列で構成されます。基本的なタイムラインはイベントを時系列で列挙し、通常は日付をマーカーとして使用します。タイムラインは、例えば人のライフイベント間の関係など、イベント間の関係を表示するのにも使用できます。
コピー
埋め込み
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
構文
タイムラインを作成する構文は簡単です。timeline 構文で始めて、タイムラインを作成したいことを mermaid に伝える必要があります。
その後、タイムラインにタイトルを追加できます。これは title 構文を追加し、その後にタイトルテキストを続けることで行います。
次にタイムラインデータを追加します。常に 1 つの期間で始まり、その後にコロン、次にイベントのテキストが続きます。オプションでもう 1 つコロンを追加し、その後にイベントのテキストを続けることができます。したがって、各期間には 1 つ以上のイベントを含めることができます。
コピー
埋め込み
{time period} : {event}
または
コピー
埋め込み
{time period} : {event} : {event}
または
コピー
埋め込み
{time period} : {event}
: {event}
: {event}
注意：期間とイベントはどちらもシンプルなテキストで、数値に限定されません。
mermaid.grammar_timeline_note_see_up_exemport_s
コピー
埋め込み
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
このようにして、テキストアウトラインを利用してタイムラインを生成できます。期間とイベントの順序は重要です。タイムラインの描画に使用されるためです。最初の期間はタイムラインの左側に配置され、最後の期間はタイムラインの右側に配置されます。
同じ期間に複数のイベントが発生する場合、最初のイベントはその特定の期間の上部に、最後のイベントはその特定の期間の下部に配置されます。
期間をグループ化する
期間を異なるセクション/時代にグループ化できます。これは section 構文を追加し、その後にセクション名を続けることで実現できます。
後続のすべての期間は、新しいセクションが定義されるまでこのセクションに配置されます。
セクションが定義されていない場合、すべての期間はデフォルトセクションに配置されます。
mermaid.grammar_timeline_default_see_one_some_part
コピー
埋め込み
timeline
title Timeline of Industrial Revolution
section 17th-20th century
Industry 1.0 : Machinery, Water power, Steam <br>power
Industry 2.0 : Electricity, Internal combustion engine, Mass production
Industry 3.0 : Electronics, Computers, Automation
section 21st century
Industry 4.0 : Internet, Robotics, Internet of Things
Industry 5.0 : Artificial intelligence, Big data, 3D printing
ご覧のとおり、期間は各セクションに配置され、各セクションはそれらが定義された順序で並べられます。
指定されたセクションの下のすべての期間とイベントは類似した配色に従います。これは、期間とイベント間の関係をより見やすくするために行われます。
長い期間または長いイベントの改行
デフォルトでは、期間とイベントのテキストが長すぎる場合、自動的に折り返されます。
強制改行を使用することもできます。
mermaid.grammar_timeline_force_one_this_time_long
コピー
埋め込み
timeline
title England's History Timeline
section Stone Age
7600 BC : Britain's oldest known house was built in Orkney, Scotland
6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
section Bronze Age
2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
: New styles of pottery and ways of burying the dead appear.
2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
: The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
コピー
埋め込み
timeline
title MermaidChart 2023 Timeline
section 2023 Q1 <br> Release Personal Tier
Bullet 1 : sub-point 1a : sub-point 1b
: sub-point 1c
Bullet 2 : sub-point 2a : sub-point 2b
section 2023 Q2 <br> Release XYZ Tier
Bullet 3 : sub-point <br> 3a : sub-point 3b
: sub-point 3c
Bullet 4 : sub-point 4a : sub-point 4b
期間とイベントのスタイル
前述のとおり、各セクションには配色があり、各セクションの下の各期間とイベントは同じ配色に従います。
期間のスタイルを個別に設定します。つまり、各期間（およびそれに対応するイベント）が独自の配色を持ちます。
コピー
埋め込み
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
注意：セクションがまったく定義されておらず、各期間とそれに対応するイベントが独自の配色を持ちます。
カスタム配色
cScale0 から cScale11 のテーマ変数を使用して配色をカスタマイズでき、これにより背景色が変更されます。Mermaid では、最大 12 個のセクションに独自の色を設定できます。cScale0 変数が最初のセクションまたは期間の色を制御し、cScale1 変数が 2 番目のセクションの色を制御し、以下同様です。セクションが 12 個を超えると、配色が循環し始めます。
あるセクションの前景色も変更したい場合は、cScaleLabel0 から cScaleLabel11 の変数に対応するテーマ変数を使用して実現できます。
注意：これらのテーマ変数のデフォルト値は、選択されたテーマから取得されます。デフォルト値を上書きしたい場合は、initialize 構文を使用してカスタムテーマ変数値を追加できます。
例：
それでは、cScale0 から cScale2 の変数のデフォルト値を上書きしましょう:
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
cScale0: '#ff0000'
cScaleLabel0: '#ffffff'
cScale1: '#00ff00'
cScale2: '#0000ff'
cScaleLabel2: '#ffffff'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
テーマ
Mermaid は多くの定義済みテーマをサポートしており、それらを使用して自分に合ったテーマを選ぶことができます。備考：既存のテーマの変数を上書きして、独自のカスタムテーマを作成できます。
mermaid.grammar_timeline_theme_pre_no_same
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
注意：テーマを変更するには、initialize 構文を使用できます。
ベーステーマ
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'base'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
フォレストテーマ
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'forest'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
ダークテーマ
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'dark'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
デフォルトテーマ
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'default'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
ニュートラルテーマ
コピー
埋め込み
---
config:
logLevel: 'debug'
theme: 'neutral'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
