概述
Excalidraw一款轻量的手绘风格电子白板在线应用，在多种平台上均可使用，非常方便。本文分享一下自己在使用时的一点心得。
Excalidraw简介
一款轻量的手绘风格电子白板在线应用，无论是 Windows / macOS / linux，甚至是手机，打开浏览器就能使用，能简单地画出美观漂亮的流程图、示意图和开发架构图等常用图片，也可以作为会议画板使用，不仅是一款优秀的画图应用，也是一款自由便捷的电子白板应用。
使用技巧
1. 数据成图
可以从excel或csv中复制数据，并在应用页面粘贴，会自动弹出是柱状图还是折线图，根据数据表达的需求选择合适的图类型。
辽宁,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
如上测试数据为各个省的面积数据，复制粘贴到app，选择柱状图，即可生成如下图所示的柱状图。
image.png
2. Mermaid转图表
Mermaid是一种基于Javascript的绘图工具，使用类似于Markdown的语法，使用户可以方便快捷地通过代码创建图表。在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的新的功能，现在时Beta试用版本，每天的试用次数也是有限的。
1. 用户输入用户名和密码
用户打开登录页面，看到一个登录表单。通常，登录表单包括两个输入框：
用户名（或邮箱、手机号码等）：用户输入注册时提供的标识信息。
密码：用户输入自己设置的密码。
登录表单可能还会包括一些额外选项，如：
记住我：用户希望在下次访问时自动登录。
验证码：如果启用了安全措施，用户还需要输入验证码来防止恶意登录。
2. 前端表单验证
当用户填写完用户名和密码后，点击“登录”按钮时，前端会进行一定的校验：
输入格式校验：例如，检查用户名是否为空、密码是否符合格式（是否包含特殊字符、大写字母等）。
验证码校验：如果启用了验证码，前端还会检查用户输入的验证码是否正确。
如果前端验证失败（如用户名为空或密码格式错误），系统会立即提示用户修正输入内容。只有当前端验证通过，才会将用户输入的用户名和密码发送给后端进行进一步的身份验证。
3. 前端发送登录请求
如果前端验证通过，系统会通过HTTP请求（通常是POST请求）将用户名、密码和验证码（如有）发送给后端。请求中会包含：
用户名/邮箱/手机号码
密码（通常会进行加密处理，如MD5或哈希）
验证码（如果有）
4. 后端身份验证
后端收到登录请求后，会进行以下处理：
验证用户名：检查数据库中是否存在该用户名对应的记录。
验证密码：如果用户名存在，后端会将用户输入的密码与数据库中存储的密码进行比对（通常是比对加密后的密码）。
验证码验证：如果启用了验证码，后端会检查用户输入的验证码是否正确。
安全检查：后端可能还会做其他的安全检查，比如检查用户的登录次数、IP地址、设备信息等，防止暴力破解或其他攻击。
如果所有验证都通过，后端会生成一个会话标识符并将其返回给前端。
5. 前端处理后端响应
登录成功：如果后端验证通过，服务器会返回一个认证令牌或会话ID，这表示用户已成功登录。前端会：
存储会话信息：将返回的令牌或会话信息存储在本地。
跳转到主页：登录成功后，系统通常会自动跳转到用户的个人主页或其他受保护的页面。
此外，系统可能会显示欢迎消息或者根据用户的角色显示不同的权限信息。
登录失败：如果后端验证失败（如用户名或密码错误、验证码错误等），服务器会返回错误信息，通常是“用户名或密码错误”或者“验证码错误”。
前端会显示相应的错误提示，要求用户重新输入。
时系统会基于安全或其他原因强制用户登出，例如密码修改、账户异常等。
如在文本框中输入如下内容，点击生成按钮，则会根据上面的描述绘制一个登录的流程图。
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
}
// 模拟发送登录请求到后端
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
