題目加入流程圖

一、加入流程圖標籤

可於題目說明解題思路中加入流程圖,在想要加入流程圖的文字範圍內事先加入以下標籤:

<div class="mermaid">

</div>

二、編寫流程圖

在標籤中加入下列內容

<div class="mermaid">
graph LR
      A[第一步] --> B[第二步]
      B --> C[第三步]
      C --> D[第四步]
</div>

即可顯示:

graph LR; A[第一步] --> B[第二步]; B --> C[第三步]; C --> D[第四步];

1.流程圖顯示方向

若需調整流程圖顯示方向至又上至下,則將graph LR更改為graph TD

<div class="mermaid">
    graph TD
      A[第一步] --> B[第二步]
      B --> C[第三步]
      C --> D[第四步]
</div>

即可顯示:

graph TD; A[第一步] --> B[第二步]; B --> C[第三步]; C --> D[第四步];

2.流程圖圖形

方形使用[],圓邊使用(),菱形使用{}

<div class="mermaid">
graph TD
    A[方形]
    B(圓邊)
    c{菱形}
</div>

即可顯示:

graph TD; A[方形]; B(圓邊); c{菱形};

3.路徑及箭號

一般路徑為 --- ,加上箭號為 -->
虛線為 -.- 加上箭號為 -.->
粗線為 === 加上箭號為 ==>

<div class="mermaid">
    graph LR
      A --> B
      B -.-> C
      C ==> D
</div>

即可顯示:

graph LR; A-->B; B-.->C; C ==> D;

4.路徑標籤

如需在流程圖中加入標籤可使用|標籤名稱|

<div class="mermaid">
    graph TD
      A[第一步] --> |這是一個標籤|B[第二步]
      B --> C[第三步]
      C --> D[第四步]
</div>

即可顯示:

graph TD; A[第一步] --> |這是一個標籤|B[第二步]; B --> C[第三步]; C --> D[第四步];

三、多選項流程

如需在流程圖中新增多個選項項目,可直接針對同一個節點新增不皺至多個選項

<div class="mermaid">
    graph TD
      A[第一步] --> B[第二步]
      B --> C[第三步選項1]
      B --> D[第三步選項2]
      B --> E[第三步選項3]
</div>

即可顯示:

graph TD; A[第一步] --> B[第二步]; B --> C[第三步選項1]; B --> D[第三步選項2]; B --> E[第三步選項3];

選項亦可匯流至指定節點

<div class="mermaid">
    graph TD
      A[第一步] --> B[第二步]
      B --> C[第三步]
      C --> D[第四步選項A]
      C --> E[第四步選項B]
      C --> F[第四步選項C]
      D --> G[結果A]
      E --> G[結果A]
      F --> H[結果B]
</div>

即可顯示:

graph TD; A[第一步] --> B[第二步]; B --> C[第三步]; C --> D[第四步選項A]; C --> E[第四步選項B]; C --> F[第四步選項C]; D --> G[結果A]; E --> G[結果A]; F --> H[結果B];

四、完整範例示範

<div class="mermaid">
    graph TD
      A[打開電腦] -->|開啟編輯器| B(打開待編修檔)
      B --> C{閱讀題目說明並思考解法}
      C -->|注意重點1| D[檢查數字是否更動位置]
      C -->|注意重點2| E[檢查文字是否正確對齊]
      C -->|注意重點3| F[檢查是否有語法錯誤]
</div>

即可顯示:

graph TD; A[打開電腦] -->|開啟編輯器| B(打開待編修檔); B --> C{閱讀題目說明並思考解法}; C -->|注意重點1| D[檢查數字是否更動位置]; C -->|注意重點2| E[檢查文字是否正確對齊]; C -->|注意重點3| F[檢查是否有語法錯誤];

results matching ""

    No results matching ""