Excalidraw 与作息可视化：用一张手绘图看懂你的睡眠规律
在快节奏的现代生活中，越来越多的人开始关注自己的睡眠质量和作息规律。但翻看手机里的健康 App 数据表格，密密麻麻的时间戳和数字往往让人无从下手——我们真正需要的不是原始数据，而是一眼就能看明白的生活模式。
有没有一种方式，能把“我每天七点起床、十一点睡觉”这样的日常描述，自动变成清晰直观的图表？而且这张图还不死板，带点手绘感，像随手画在便签纸上的那种自然？
答案是：有。而且它已经存在，并且完全开源、免费可用——这就是Excalidraw结合 AI 能力后带来的新可能。
想象这样一个场景：你在晨间笔记里写下一句：“最近总是睡得晚，想看看自己到底几点睡。” 接着系统自动为你生成一张横向时间轴图，从左到右标着 00:00 到 24:00，不同颜色的方块代表起床、工作、吃饭、入睡等事件，箭头连成生活流。你可以拖动方块调整时间，也可以让 AI 帮你对比过去一周的变化趋势。
这并不是未来设想，而是今天就能实现的工作流。核心工具就是Excalidraw—— 那个看起来像是草图、实则极其聪明的虚拟白板。
它为什么不像传统图表工具那么“机械”？
打开任何一个主流图表软件，你会看到整齐划一的线条、标准字体、对称布局。这些固然专业，但也容易让人产生距离感。而 Excalidraw 的特别之处，在于它的“不完美”。
这一切的背后，其实是技术精心设计的结果。Excalidraw 并没有直接使用 SVG 或 Canvas 绘制规则图形，而是引入了一个叫rough.js的库。每当你要画一条线或一个矩形时，这个库会主动给图形加一点点“扰动”——让直线微微弯曲，让角变得不那么锋利，模拟真实纸笔书写时的轻微抖动。
import { Excalidraw } from "@excalidraw/excalidraw"; function MyWhiteboard() { return ( <div style={{ height: "600px" }}> <Excalidraw /> </div> ); }就这么几行代码，就能在一个 React 项目中嵌入整块可编辑的手绘风画布。开发者不需要操心渲染细节，所有图形都自带“人文气息”。这种视觉风格降低了心理门槛，让人更愿意去修改、标注、分享，而不是觉得“这图一旦画出来就不能动了”。
更重要的是，整个应用运行在浏览器端，数据默认存在本地。你的作息记录不会上传到任何服务器，隐私得到了天然保障。如果需要协作，再选择性开启同步功能即可。
让 AI 听懂你说的“大概十点多睡”
最惊艳的部分来了：现在你不用手动画图了，只要说话就行。
比如输入这样一段文字：
“我一般七点起床，九点上班，中午十二点吃饭，晚上十一点左右睡觉。”
背后会发生什么？
- 系统调用大语言模型（如 GPT-3.5 或本地部署的 Llama 3），进行语义解析；
- 模型识别出关键事件及其时间点，即使表达模糊也能合理推断；
- 输出结构化数据：
json [ {"event": "起床", "time": "07:00"}, {"event": "上班", "time": "09:00"}, {"event": "吃饭", "time": "12:00"}, {"event": "睡觉", "time": "23:00"} ] - 这些数据被送入布局引擎，计算每个元素在画布上的位置；
- 最终生成对应的
rectangle、arrow和text元素，注入 Excalidraw 场景中完成绘图。
Python 示例代码如下：
import openai import json def generate_sleep_schedule(text): prompt = f""" 请从以下作息描述中提取事件和时间： "{text}" 输出格式为JSON数组，每个对象包含event和time字段。 时间请统一转换为HH:MM格式。 """ response = openai.ChatCompletion.create( model="gpt-3.5-turbo", messages=[{"role": "user", "content": prompt}], temperature=0.3 ) try: data = json.loads(response.choices[0].message.content.strip()) return data except Exception as e: print("解析失败:", e) return []这段逻辑看似简单，但意义重大。它意味着非技术人员也能轻松创建专业级图表。一位产品经理可以用它快速画出用户旅程图，一位心理咨询师可以帮来访者可视化情绪波动周期，而现在，我们把它用在了最贴近生活的场景之一：睡眠监测。
一张图如何帮你发现隐藏的作息问题？
很多人以为自己“规律作息”，直到把数据画出来才发现真相。例如：
- 明明说“每天十一点睡”，结果图表显示周三、周五经常拖到凌晨；
- 午休时间不稳定，有时 12 点吃午饭，有时推迟到两点；
- 工作启动时间波动大，缺乏固定的“早晨仪式”。
当这些片段并列呈现在一条横轴上时，肉眼就能看出断点和异常。更进一步，系统还可以自动检测：
- 是否存在连续三天以上熬夜（>23:30 入睡）？
- 白天是否有长时间空窗期（>3 小时不活动）？
- 睡眠时长是否低于建议值（<7 小时）？
然后给出提示：“建议将入睡时间提前至 22:30，以提升深度睡眠比例。” 或者，“你周二的午休比其他日子晚 90 分钟，是否与会议安排有关？”
这类反馈不再是冷冰冰的数据报告，而是基于可视化的对话起点。你可以直接在图上添加注释：“这天加班写 PPT”，“朋友聚会”，从而建立起行为与情境之间的关联。
实际架构怎么搭？一个四层模型就够了
要实现上述功能，系统可以分为四个层次协同工作：
[用户输入] ↓ (自然语言描述) [NLU 模块（LLM）] ↓ (结构化作息数据) [布局引擎] ↓ (Excalidraw 元素对象) [Excalidraw 画布渲染] ↓ [用户查看/编辑/分享]- 前端层：Excalidraw 提供交互界面，支持缩放、拖拽、导出 PNG/SVG；
- AI 层：负责理解自然语言，推荐使用本地模型处理敏感健康信息；
- 逻辑层：决定图形排布策略，比如按天排列还是合并为周均值；
- 存储层：可选加密保存历史记录，支持多设备同步。
其中最关键的一步是“布局规划”。时间轴怎么画？活动区块多宽？颜色怎么区分？
这里有个实用技巧：把一天当作 1440 分钟处理，每分钟对应画布上的 1px，那么一整天就是 1440px 宽。再通过 CSS 缩放容器，让用户能在屏幕上完整浏览。每个活动区块宽度 = 持续时间（分钟），高度固定为 60px，垂直间距 20px。多个日期则纵向堆叠，形成甘特图式视图。
生成后的元素可以直接通过 Excalidraw 的importFromJSON方法批量插入，无需逐个绘制。
设计上容易忽略，但必须考虑的几个点
1. 隐私优先：健康数据不该轻易外传
虽然调用 OpenAI API 很方便，但个人作息属于敏感信息。理想做法是在客户端运行小型本地模型（如 TinyLlama、Phi-3-mini），全程离线处理。即便使用云端服务，也应做脱敏处理，去掉姓名、具体日期等标识信息。
2. 容错机制不可少
LLM 并非百分百可靠。可能出现：
- 输出非法 JSON 格式；
- 时间写成 “25:00” 或 “8:75”；
- 漏掉重要事件。
因此必须加入校验层：
- 使用正则验证时间格式/^([01]\d|2[0-3]):[0-5]\d$/；
- 对时间排序检查是否存在倒序；
- 提供“手动编辑”按钮，允许覆盖 AI 结果。
3. 性能优化：别让图表卡住
当展示两周以上的作息数据时，元素数量可能超过 100 个，Canvas 渲染压力增大。解决方案包括：
- 虚拟滚动：只渲染当前可见区域；
- 合并短时段活动（如 <10 分钟的刷手机）；
- 导出静态图用于分享，避免加载完整交互环境。
4. 可访问性支持
为图形添加 alt text 描述，例如：“作息图：周一至周五，起床时间 6:30–7:00，入睡时间 22:30–23:30”，帮助视障用户理解内容。同时提供深色模式，适应夜间查看需求。
它的价值不止于“画张图”
Excalidraw 表面上是个绘图工具，实际上正在演变为一种新型的知识表达媒介。
在医疗咨询中，医生可以让患者口述作息，现场生成图表辅助诊断；在团队管理中，项目经理可以通过类似方式分析成员的工作节奏；在个人成长领域，它可以成为复盘日记的一部分，每月生成一张“生活节律图”，观察变化轨迹。
更重要的是，这种结合 AI 与可视化的模式，代表了一种新的交互范式：从“操作工具”转向“对话式创造”。你不再需要知道“怎么画流程图”，只需要说出“我想表达什么”，剩下的交给系统完成。
这种高度集成的设计思路，正引领着个人健康管理向更直观、更人性化、更可持续的方向演进。一张看似简单的手绘图，背后承载的是技术对日常生活的温柔介入——不打扰，却始终在场。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
