概述
Excalidraw一款輕量的手繪風格電子白板在線應用，在多種平臺上均可使用旺坠，非常方便乎芳。本文分享一下自己在使用時的一點心得沪编。
Excalidraw簡介
一款輕量的手繪風格電子白板在線應用宛逗，無論是 Windows / macOS / linux坎匿，甚至是手機，打開瀏覽器就能使用雷激，能簡單地畫出美觀漂亮的流程圖替蔬、示意圖和開發(fā)架構圖等常用圖片，也可以作為會議畫板使用屎暇，不僅是一款優(yōu)秀的畫圖應用进栽，也是一款自由便捷的電子白板應用。
使用技巧
1. 數(shù)據(jù)成圖
可以從excel或csv中復制數(shù)據(jù)恭垦，并在應用頁面粘貼，會自動彈出是柱狀圖還是折線圖，根據(jù)數(shù)據(jù)表達的需求選擇合適的圖類型番挺。
遼寧,14.725
吉林,19.107
黑龍江,45.276
河南,16.565
河北,18.807
四川,48.611
重慶,8.237
山東,15.585
甘肅,42.544
江蘇,10.272
寧夏,5.196
安徽,14.014
山西,15.675
內蒙古,114.618
貴州,17.61
北京,1.64
湖南,21.185
陜西,20.557
青海,69.665
湖北,18.593
天津,1.19
江西,16.695
新疆,163.057
福建,12.24
廣西,23.661
云南,38.319
上海,0.82
浙江,10.525
西藏,120.236
海南,4.032
廣東,17.796
如上測試數(shù)據(jù)為各個省的面積數(shù)據(jù)唠帝，復制粘貼到app，選擇柱狀圖玄柏，即可生成如下圖所示的柱狀圖襟衰。
image.png
2. Mermaid轉圖表
Mermaid是一種基于Javascript的繪圖工具，使用類似于Markdown的語法粪摘，使用戶可以方便快捷地通過代碼創(chuàng)建圖表瀑晒。在Excalidraw中支持流程圖、時序圖和類圖三種徘意。
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
如上示例為類圖苔悦，在app中粘貼Mermaid代碼，即可插入對應的類圖椎咧。
image.png
3. 文字轉圖表
文字轉圖表是基于AI的新的功能玖详，現(xiàn)在時Beta試用版本，每天的試用次數(shù)也是有限的勤讽。
1. 用戶輸入用戶名和密碼
用戶打開登錄頁面蟋座，看到一個登錄表單。通常脚牍，登錄表單包括兩個輸入框：
用戶名（或郵箱向臀、手機號碼等）：用戶輸入注冊時提供的標識信息。
密碼：用戶輸入自己設置的密碼诸狭。
登錄表單可能還會包括一些額外選項券膀，如：
記住我：用戶希望在下次訪問時自動登錄。
驗證碼：如果啟用了安全措施作谚，用戶還需要輸入驗證碼來防止惡意登錄三娩。
2. 前端表單驗證
當用戶填寫完用戶名和密碼后，點擊“登錄”按鈕時妹懒，前端會進行一定的校驗：
輸入格式校驗：例如雀监，檢查用戶名是否為空、密碼是否符合格式（是否包含特殊字符眨唬、大寫字母等）会前。
驗證碼校驗：如果啟用了驗證碼，前端還會檢查用戶輸入的驗證碼是否正確匾竿。
如果前端驗證失斖咭恕（如用戶名為空或密碼格式錯誤），系統(tǒng)會立即提示用戶修正輸入內容岭妖。只有當前端驗證通過临庇，才會將用戶輸入的用戶名和密碼發(fā)送給后端進行進一步的身份驗證反璃。
3. 前端發(fā)送登錄請求
如果前端驗證通過，系統(tǒng)會通過HTTP請求（通常是POST請求）將用戶名假夺、密碼和驗證碼（如有）發(fā)送給后端淮蜈。請求中會包含：
用戶名/郵箱/手機號碼
密碼（通常會進行加密處理，如MD5或哈希）
驗證碼（如果有）
4. 后端身份驗證
后端收到登錄請求后已卷，會進行以下處理：
驗證用戶名：檢查數(shù)據(jù)庫中是否存在該用戶名對應的記錄梧田。
驗證密碼：如果用戶名存在，后端會將用戶輸入的密碼與數(shù)據(jù)庫中存儲的密碼進行比對（通常是比對加密后的密碼）侧蘸。
驗證碼驗證：如果啟用了驗證碼裁眯，后端會檢查用戶輸入的驗證碼是否正確。
安全檢查：后端可能還會做其他的安全檢查讳癌，比如檢查用戶的登錄次數(shù)穿稳、IP地址、設備信息等析桥，防止暴力破解或其他攻擊床牧。
如果所有驗證都通過庶喜，后端會生成一個會話標識符并將其返回給前端涩哟。
5. 前端處理后端響應
登錄成功：如果后端驗證通過赡麦，服務器會返回一個認證令牌或會話ID，這表示用戶已成功登錄娩怎。前端會：
存儲會話信息：將返回的令牌或會話信息存儲在本地搔课。
跳轉到主頁：登錄成功后，系統(tǒng)通常會自動跳轉到用戶的個人主頁或其他受保護的頁面截亦。
此外爬泥，系統(tǒng)可能會顯示歡迎消息或者根據(jù)用戶的角色顯示不同的權限信息。
登錄失敱廊俊：如果后端驗證失斉鄯取（如用戶名或密碼錯誤、驗證碼錯誤等）却桶，服務器會返回錯誤信息境输，通常是“用戶名或密碼錯誤”或者“驗證碼錯誤”。
前端會顯示相應的錯誤提示颖系，要求用戶重新輸入嗅剖。
時系統(tǒng)會基于安全或其他原因強制用戶登出，例如密碼修改嘁扼、賬戶異常等信粮。
如在文本框中輸入如下內容，點擊生成按鈕趁啸，則會根據(jù)上面的描述繪制一個登錄的流程圖强缘。
image.png
4. 轉代碼
也提供了通過線框圖生成代碼的AI功能督惰。
image.png
如上圖，選中用戶登錄的流程圖欺旧，點擊生成代碼的功能姑丑，即可生成如右圖所示的界面，將代碼復制出來后如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用戶登錄流程</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<div id="app" class="bg-white p-8 rounded-lg shadow-md w-96">
<h1 class="text-2xl font-bold mb-6 text-center">用戶登錄</h1>
<form @submit.prevent="login" class="space-y-4">
<div>
<label for="username" class="block mb-1">用戶名</label>
<input type="text" id="username" v-model="username" class="w-full px-3 py-2 border rounded" required>
</div>
<div>
<label for="password" class="block mb-1">密碼</label>
<input type="password" id="password" v-model="password" class="w-full px-3 py-2 border rounded" required>
</div>
<button type="submit" class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600">登錄</button>
</form>
<p v-if="error" class="mt-4 text-red-500 text-center">{{ error }}</p>
<p v-if="success" class="mt-4 text-green-500 text-center">{{ success }}</p>
</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const username = ref('')
const password = ref('')
const error = ref('')
const success = ref('')
const login = async () => {
error.value = ''
success.value = ''
// 模擬前端表單驗證
if (username.value.length < 3 || password.value.length < 6) {
error.value = '用戶名或密碼格式不正確'
return
}
// 模擬發(fā)送登錄請求到后端
try {
// 這里應該是實際的API調用
await new Promise(resolve => setTimeout(resolve, 1000))
// 模擬后端身份驗證
if (username.value === 'admin' && password.value === 'password') {
success.value = '登錄成功辞友，正在跳轉到主頁...'
// 模擬跳轉到主頁
setTimeout(() => {
alert('已跳轉到主頁')
}, 2000)
} else {
error.value = '用戶名或密碼錯誤'
}
} catch (e) {
error.value = '登錄失敗，請稍后再試'
}
}
return {
username,
password,
error,
success,
login
}
}
}).mount('#app')
</script>
</body>
</html>
5. 素材庫添加
點擊右上角素材庫震肮，展開素材庫面板称龙，點擊“瀏覽素材庫”，可選擇合適的素材庫下載并添加到應用中戳晌。
image.png
