小帅 Excalidraw 手绘图 Skill

npx degit xstongxue/best-skills/skills/excalidraw-diagram ~/.claude/skills/excalidraw-diagram

excalidraw-diagram 输出标准的 .excalidraw JSON，能直接在 Excalidraw、 Obsidian 的 Excalidraw 插件、或 VS Code 扩展里打开。输出是完全可编辑的， 不是扁平的图片。

支持图类型

• 系统架构图：用户 / 前端 / 后端服务 / 数据库 / 外部系统
• 业务流程图 / 近似时序图：步骤顺序自上而下或自左向右
• 数据结构 / 模块依赖图：实体关联与依赖
• 自由白板草图：研究框架、任务分解、思维导图

工作方式

skill 期望（或引导你提供）一份结构化输入：

【图类型】：架构图 / 流程图 / 数据结构图 / 自由草图
【内容来源】：自由描述 / 论文大纲 / 代码结构 / 接口列表
【节点】：主要模块 / 实体 / 步骤（可分组）
【关系】：谁连谁、方向、标签
【布局偏好】：自上而下 / 自左向右 / 分层
【颜色规则】：不同类型节点的颜色偏好

先建抽象模型（节点 + 关系 + 层级），然后用一个简单可读的布局给出坐标—— 不追求自动布线，只求”足够清楚”。

适合什么场景

• 手绘感重要：非正式团队文档、README 图、研究笔记
• 后续要修：你会手动调整图
• 跨工具便携：.excalidraw 哪儿都能用

搭配使用

• drawio-diagram：需要正式风格时用那个（严肃场合）
• Obsidian / Logseq 笔记：把 .excalidraw 直接放进库里

→ GitHub 安装

用 excalidraw-diagram 画一张典型 RAG pipeline 架构图：
用户 → 前端 → API 网关 → 向量化 → 向量库 → 大模型。
自上而下布局，按层分组（客户端 / API / 数据）。