題目加入流程圖

一、加入流程圖標籤

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

<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 ""