Mermaid

外觀

在 Mermaid Chart 中與團隊即時繪製圖表

時間軸圖 ​

時間軸：目前這是一個實驗性圖表。語法和屬性在未來版本中可能會變更。除了圖示整合部分是實驗性外，語法是穩定的。

「時間軸是一種用於說明事件、日期或時間段的順序的圖表類型。它通常以圖形方式呈現以表示時間的流逝，並且通常按時間順序組織。基本時間軸會按時間順序呈現事件列表，通常使用日期作為標記。時間軸也可以用來顯示事件之間的關係，例如一個人一生中事件之間的關係」(維基百科)。

時間軸範例 ​

語法 ​

建立時間軸圖的語法很簡單。您始終以 timeline 關鍵字開頭，讓 mermaid 知道您要建立時間軸圖。

之後，可以為時間軸新增標題。這可以透過新增一行 title 關鍵字，後接標題文字來完成。

然後您新增時間軸資料，其中您始終以時間段開始，後接冒號，然後是事件的文字。或者，您可以新增第二個冒號，然後是事件的文字。因此，每個時間段可以有一個或多個事件。

json
{time period} : {event}

或

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

或

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

注意：時間段和事件都是簡單的文字，不限於數字。

讓我們看一下上述範例的語法。

透過這種方式，我們可以使用文字大綱來產生時間軸圖。時間段和事件的順序很重要，因為它將用於繪製時間軸。第一個時間段將放置在時間軸的左側，最後一個時間段將放置在時間軸的右側。

同樣地，第一個事件將放置在該特定時間段的頂部，最後一個事件將放置在底部。

將時間段分組到區段/時代 ​

您可以將時間段分組到區段/時代。這可以透過新增一行 section 關鍵字，後接區段名稱來完成。

所有後續的時間段都將放置在此區段中，直到定義新的區段。

如果沒有定義區段，則所有時間段都將放置在預設區段中。

讓我們看一個範例，其中我們將時間段分組到區段中。

如您所見，時間段放置在區段中，區段則按照定義的順序放置。

給定區段下的所有時間段和事件都遵循類似的配色方案。這樣做是為了更容易看到時間段和事件之間的關係。

長時間段或事件的文字換行 ​

預設情況下，如果時間段和事件的文字太長，則會換行。這樣做是為了避免文字繪製在圖表之外。

您也可以使用 <br> 來強制換行。

讓我們看另一個範例，其中我們有一個長時間段和一個長事件。

時間段和事件的樣式 ​

如先前所解釋的，每個區段都有一個配色方案，並且區段下的每個時間段和事件都遵循類似的配色方案。

但是，如果沒有定義區段，則有兩種可能性

  1. 個別設定時間段樣式，也就是說，每個時間段（及其對應的事件）將具有自己的配色方案。這是預設行為。

注意：沒有定義區段，並且每個時間段及其對應的事件都將具有自己的配色方案。

  1. 使用 disableMultiColor 選項停用 multiColor 選項。這將使所有時間段和事件遵循相同的配色方案。

您需要透過 mermaid.initialize 函式或指令新增此選項。

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

讓我們看相同的範例，其中我們停用了 multiColor 選項。

自訂配色方案 ​

您可以使用 cScale0 到 cScale11 主題變數來自訂配色方案，這將變更背景顏色。Mermaid 允許您為最多 12 個區段設定獨特的顏色，其中 cScale0 變數將驅動第一個區段或時間段的值，cScale1 將驅動第二個區段的值，依此類推。如果您有超過 12 個區段，配色方案將開始重複。

如果您也想變更區段的前景顏色，您可以使用對應的 cScaleLabel0 到 cScaleLabel11 變數來變更。

注意：這些主題變數的預設值是從選定的主題中挑選的。如果您想要覆寫預設值，您可以使用 initialize 呼叫來新增您的自訂主題變數值。

範例

現在讓我們覆寫 cScale0 到 cScale2 變數的預設值

請參閱顏色如何變更為主題變數中指定的值。

主題 ​

Mermaid 支援一組預先定義的主題，您可以使用它們來找到適合您的主題。PS：您實際上可以覆寫現有主題的變數來建立您自己的自訂主題。在這裡深入了解如何設定圖表主題。

以下是不同的預先定義主題選項

  • base
  • forest
  • dark
  • default
  • neutral

注意：若要變更主題，您可以使用 initialize 呼叫或指令。深入了解指令，讓我們開始使用它們，看看我們的範例圖表在不同的主題中看起來如何

Base 主題 ​

Forest 主題 ​

Dark 主題 ​

Default 主題 ​

Neutral 主題 ​

與您的程式庫/網站整合 ​

時間軸使用實驗性延遲載入和非同步渲染功能，這些功能未來可能會變更。為了能夠在未來新增其他圖表，延遲載入非常重要。

您可以使用此方法將 mermaid（包括時間軸圖）新增至網頁

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

您也可以參考線上編輯器中的實作這裡，了解如何完成非同步載入。