{%hackmd /au2gfdvHR0mEjvR_NzROqA?both %}

###### tags: `工具`

[工具] 流程圖製作
===
:::info
whimsical 異想天開的(adj)
:::

[TOC]

## 製作工具
- [線上流程圖製作工具 - whimsical.com](https://whimsical.com/)

## whimsical 可以製作的類別
- Flowchart - 流程圖
- Wireframe - 線搞圖
- Sticky Notes - 便利貼
- Mind Map - 心智圖

## 流程圖圖示簡介
- 參考網站：[流程圖 - 維基百科](https://zh.wikipedia.org/wiki/%E6%B5%81%E7%A8%8B%E5%9B%BE)

| 形狀 | 名稱 | 描述 |
| ------------------------------------------------------------------------------------------------------------ |:-----------------------------:| ---- |
|| 流程符號 Flowline (Arrowhead) | 用來表達過程的次序，用一條線由一個符號連接去到另一個符號。如果不是標準的上至下、左至右圖就會加上箭頭。 |
||起止符號Terminal|用來表示程式或子程式的開始與完結。常以一個圓角長方形表示。通常裏面會標上「開始」或「結束」或其他相關字眼，如「提交查詢」或「接受產品」。|
||程式Process|以長方形來代表一系列程式去改變數值、形式、數據的位置|
||決策判斷Decision|以一個菱形去顯示一個條件進程，用來按情況去決定下一步走向。通常以「是/否」或「真/假」值去決定。|

## 使用流程
### 創建流程圖
- 按下左上的`+`，這會決定在哪邊創建流程圖

- 選擇 Flowchart 來創建流程圖

- 修改新創建的流程圖名稱

## 流程圖範例
### 範例一 - 簡單設定值
- 情境
> 小華想出門，但不確定自己的錢包有沒有錢
> 於是他想打開錢包看看還有多少錢
> 打開後，他發現有 150 元，於是他就記錄在腦袋裡，他擁有 150 元

- 流程圖

- 程式碼

let wallet = 0;

wallet += 150;
console.log(`小華錢包有${wallet}元`)

### 範例二 - if 在流程圖中的使用
- 情境
> 小華想出門，但不確定自己的錢包有沒有錢
> 於是他想打開錢包看看還有多少錢
> 如果小華發現自己有 100 元，他就吃 80 元的牛肉麵
> 如果沒有 100 元，那就不吃任何東西，也不出門
> 最後小華還想計算自己最後剩下多少錢

- 流程圖

- 程式碼

let wallet = 0;
wallet += 150;

if(wallet>=100){
  wallet -= 80;
}else{
  wallet -= 0;
}

console.log(`小華錢包還有${wallet}元`); // 小華錢包還有70元