告别手搓架构图！Excalidraw+AI Skills 高效绘制手绘风技术图

作为程序员，我们经常需要绘制技术架构图、流程图、状态图，用于文档撰写、方案汇报或视频创作。以往要么用复杂工具调整样式，要么纯手搓手绘，耗时又费力。直到发现抖音博主「神秘的鱼仔」分享的开源神器------Excalidraw 接入 AI Skills 后，彻底解决了手绘技术图的效率难题，今天就来详细拆解这款工具的使用方法和核心优势。

一、工具核心：Excalidraw 开源手绘白板

首先要介绍的核心工具是 Excalidraw，这是一款在 GitHub 上斩获 115K Star 的开源项目，主打手绘风格的图形绘制，无需专业设计能力，就能画出简洁美观、富有质感的技术图，是程序员的专属绘图神器。

核心特性（视频重点+补充细节）

手绘风格适配：自带手绘质感，线条、图形都贴近手写效果，避免传统工具绘制的图形过于生硬，适合技术文章、视频素材、团队沟通场景，视觉体验更自然。
丰富素材支持：社区提供大量手绘素材，可按需加载到本地，无需从零绘制基础图形，大幅节省时间。
开源协议宽松：采用 MIT 开源协议，个人、商业场景均可自由使用，无版权顾虑，开发者可放心集成或二次开发。
多场景适配：支持在线直接使用（最常用场景），也可离线部署，同时提供 npm 包，可直接引入自身项目，适配开发者多样化需求。
附加优势：支持 PWA 离线使用、多人实时协作、端到端加密，还可导出 PNG、SVG 等多种格式，适配文档、PPT 等不同使用场景。

二、效率翻倍：AI Skills 接入，告别手搓时代

Excalidraw 本身已经足够便捷，但接入 AI Skills 后，更是实现了"AI 代画+人工优化"的高效模式，彻底摆脱手动绘制的繁琐，这也是视频中最核心的亮点。

实操步骤（跟着视频一步步来）

配置 Skill：在 ClaudeCode 中提前配置好 Excalidraw 的 Skill，完成基础环境搭建，后续可直接调用（可通过输入 /excalidraw-diagram 快速唤醒）。
下达指令：直接输入绘图需求，例如"使用 Excalidraw 画一张 IAG 的运转流程图""画一幅三次握手四次挥手的状态图"，无需复杂参数设置。
AI 生成文件：系统会弹出提示，询问是否使用对应 Skills，选择"YES"后，等待片刻即可生成 Excalidraw 格式的文件。
优化使用：将生成的文件在 Excalidraw 画布中打开，即可得到完整的手绘风格技术图，无需从零绘制，只需根据自身需求微调细节即可。

核心优势：为什么推荐 AI+Excalidraw？

以往绘制一张技术图，尤其是手绘风格，需要逐一线条、图形绘制，耗时半小时以上；而通过 AI Skills 生成，只需1-2分钟就能得到基础框架，后续优化仅需几分钟，效率提升不止一倍。同时，AI 可生成多种不同版本的图形，满足多样化需求，无需重复绘制。

（注：上图为贴合视频内容的示例图，还原 AI 生成的手绘流程图效果，实际使用时可通过 Excalidraw 导出对应图片，支持直接插入文档或视频）

三、进阶使用：Excalidraw 拓展场景

除了结合 AI Skills 高效绘图，Excalidraw 还有更多实用场景，适合程序员日常使用：

技术文档配图：为接口文档、架构设计文档绘制手绘风格流程图、架构图，让文档更生动，重点更突出。
视频/演讲素材：像视频博主一样，为技术分享视频、演讲 PPT 制作手绘配图，提升内容趣味性和专业性。
团队协作沟通：支持多人实时协作，可在线共同绘制方案流程图，同步修改、实时反馈，提升团队沟通效率。
项目集成：通过 npm 安装 Excalidraw 包，将其嵌入自身项目，实现自定义绘图功能，适配产品需求（需具备基础 React 开发能力）。

四、工具获取与部署

1. 快速使用（最便捷）

在线直接访问：https://excalidraw.com/，无需下载安装，打开浏览器即可绘图，支持中文界面，小白可秒上手。

2. 项目集成（开发者专属）

通过 npm 引入 Excalidraw 包，步骤如下：

javascript 复制代码

// 安装依赖
npm install @excalidraw/excalidraw
// 或使用 yarn
yarn add @excalidraw/excalidraw

// 在 React 组件中使用
import { Excalidraw } from "@excalidraw/excalidraw";
function App() {
  return (
    <div style={{ height: "500px" }}>
      <Excalidraw />
    </div>
  );
}

3. 离线部署

支持 Docker 镜像部署，或通过 Sealos 应用商店一键部署，无需复杂配置，适合内网使用或私有化部署需求。

五、总结

对于程序员而言，Excalidraw 本身就是一款足够优秀的手绘绘图工具，而接入 AI Skills 后，更是解决了"手绘耗时"的核心痛点，实现了"AI 代画+人工优化"的高效模式。无论是日常文档配图、视频素材制作，还是团队协作沟通，这款开源工具都能大幅提升效率，告别手搓技术图的时代。

如果你也经常被绘制技术图困扰，不妨试试 Excalidraw+AI Skills 的组合，简单配置就能解锁高效绘图新方式，让更多时间投入到核心开发工作中。

参考来源：抖音博主「神秘的鱼仔」视频分享（https://v.douyin.com/cptc-C4PLzc/）