# 2.1.3 題目加入流程圖
Gode Judger的編題介面可使用mermaid產生流程圖，以下為各種範例說明。 可從[mermaid](https://mermaidjs.github.io/)手冊，了解更多創建圖形的方式。
## 一、加入流程圖標籤
可於**題目說明**或**解題思路**中加入流程圖，在想要加入流程圖的文字範圍內事先加入以下標籤：
```
```
## 二、編寫流程圖
在標籤中加入下列內容
```
graph LR
A[第一步] --> B[第二步]
B --> C[第三步]
C --> D[第四步]
```
即可顯示： 
### 1.流程圖顯示方向
若需調整流程圖顯示方向**由上至下**，則將`graph LR`更改為`graph TD`
```
graph TD
A[第一步] --> B[第二步]
B --> C[第三步]
C --> D[第四步]
```
即可顯示：
### 2.流程圖圖形
方形使用\[]，圓邊使用()，菱形使用{}
```
graph TD
A[方形]
B(圓邊)
c{菱形}
```
即可顯示：
### 3.路徑及箭號
一般路徑為 --- ，加上箭號為 -->\
虛線為 -.- 加上箭號為 -.->\
粗線為 === 加上箭號為 ==>
```
graph LR
A --> B
B -.-> C
C ==> D
```
即可顯示：
### 4.路徑標籤
如需在流程圖中加入標籤可使用`|標籤名稱|`：
```
graph TD
A[第一步] --> |這是一個標籤|B[第二步]
B --> C[第三步]
C --> D[第四步]
```
即可顯示：
## 三、多選項流程
如需在流程圖中新增多個選項項目，可直接針對同一個節點新增不皺至多個選項
```
graph TD
A[第一步] --> B[第二步]
B --> C[第三步選項1]
B --> D[第三步選項2]
B --> E[第三步選項3]
```
即可顯示：
選項亦可匯流至指定節點
```
graph TD
A[第一步] --> B[第二步]
B --> C[第三步]
C --> D[第四步選項A]
C --> E[第四步選項B]
C --> F[第四步選項C]
D --> G[結果A]
E --> G[結果A]
F --> H[結果B]
```
即可顯示：
## 四、完整範例示範
```
graph TD
A[打開電腦] -->|開啟編輯器| B(打開待編修檔)
B --> C{閱讀題目說明並思考解法}
C -->|注意重點1| D[檢查數字是否更動位置]
C -->|注意重點2| E[檢查文字是否正確對齊]
C -->|注意重點3| F[檢查是否有語法錯誤]
```
即可顯示：
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://csfrd.gitbook.io/cjmanualv2/chapter02/problemspanel/flowchart.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.