告别繁琐！用 Excalidraw 绘制手绘风格的技术图，让你的文档更有“温度”
我们都懂，图表是技术沟通的“万金油”。传统的绘图工具要么显得过于“严肃刻板”，缺乏亲和力；要么操作复杂、学习曲线陡峭；再或者就是那烦人的版权限制，让人望而却步。
今天要介绍是一个能彻底改变你绘图体验的神器——Excalidraw！
github已经超过恐怖的 100K 地址：https://github.com/excalidraw/excalidraw
官方地址：https://excalidraw.com/ 由于官方没有提供中文字体，个人也搭建了一个，提供一套免费手绘字体 https://ai-bar.cn/tools/drawboard
1 你的技术文档，可以更有“温度”
Excalidraw 是什么？简单来说，它是一款手绘风格的轻量级在线白板工具。它让你像在真实白板上用马克笔涂鸦一样，轻松绘制出各种技术图表、流程图、UI 草图，甚至只是简单的想法草稿。
1.3 Excalidraw：手绘风格的轻量级白板工具，你的新选择！
它最大的魅力在于：
手绘风格：自带“灵魂草图”的独特韵味，让你的技术图表充满亲和力，告别冷冰冰的机器感。 极简操作：学习成本几乎为零，拿起就用，效率奇高。 开源免费：你可以自由使用，甚至将其部署到自己的服务器上。 跨平台：无论是PC、平板还是手机，只要有浏览器就能用。 协作支持：多人实时在线编辑，团队头脑风暴神器！
2 核心功能与干货技巧：绘制你的“灵魂草图”
是时候亲自动手了！Excalidraw 的强大，藏在它极简的界面之下。
2.1 极简上手：用 Excalidraw 画出你的第一张图
当你打开 Excalidraw.com，你会发现界面出奇的干净。
工具栏（左侧）：这里有绘制图形的基本工具，比如矩形、圆形、箭头、文字等。你还可以切换“手绘模式”和“规整模式”，让线条更流畅或更标准。 属性面板（顶部）：选中图形后，这里会显示它的属性，你可以调整颜色、线条粗细、填充方式、字体等。 画布区域：你自由发挥的舞台！鼠标滚轮缩放，按住空格键拖拽平移。
2.1.1 界面概览：一目了然的操作区
Excalidraw 简洁直观的界面，主要操作区一目了然。
干货：快捷键，效率的“核武器”！
记住这些字母，你的绘图速度能提升好几倍：
R：矩形 (Rectangle)O：圆形 (Oval)A：箭头 (Arrow)T：文本 (Text)L：直线 (Line)
熟练运用快捷键，你会发现，绘制复杂的图表也能行云流水！
2.1.2 基本图形与线条：构建你的视觉骨架
点击左侧工具栏的图形，直接在画布上拖拽即可绘制。
干货：画出规整图形和特殊线条！
想画正方形或正圆？在拖拽矩形或圆形时，按住 Shift键！想画水平、垂直或45度斜线？在拖拽直线或箭头时，按住 Shift键！想从中心点开始绘制图形？在拖拽时，按住 Alt键！
按住 Shift 和 Alt 键绘制的规整图形，是不是很方便？
连接线会自动吸附到图形的边缘，让你轻松构建复杂的流程图。
2.1.3 文字与标注：让图表会“说话”
点击文本工具 T，在画布上点击即可输入文字。你可以调整字体大小、粗细、颜色，当然，默认的手绘字体是 Excalidraw 独特的魅力所在。
干货：用文本框展示代码片段！
你可以把文本框拉宽，甚至把代码复制粘贴进去。它的手绘字体能让你的代码示例看起来更像手稿，充满程序员的“草稿本”风格。你甚至可以选中文本框，在属性面板调整其旋转角度，做出独特的标注效果！
2.2 进阶操作：让你的图表更“专业”
当你的图表变得复杂时，一些进阶功能能帮你更好地管理。
2.2.1 图层与组合：管理复杂图形
组合/解散组：选中多个图形后，右键选择“Group selected elements” (或按 Ctrl/Cmd + G)，它们就变成了一个整体，方便移动和编辑。再次右键选择“Ungroup elements”即可解散。图层顺序：选中图形后，使用 Ctrl/Cmd + [(下移一层) 和Ctrl/Cmd + ](上移一层) 调整图层顺序。
干货：快速复用组件！
你可以把一个服务器图标、一个数据库图标，加上它们的名字组合成一个“组件”。这样，当你需要多个相同的服务器时，直接复制粘贴组合好的组件，比每次单独绘制和添加文本快多了！
2.2.2 样式与颜色：点亮你的图表
选中图形后，顶部属性面板的颜色、描边、填充选项让你随心所欲。
干货：利用颜色和填充区分图表元素！
在复杂的架构图中，你可以：
用不同颜色区分不同的微服务（例如，用户服务用蓝色，订单服务用绿色）。 用斜线填充表示外部系统或第三方服务，与内部系统区分开来。
这样，一张图就能清晰地传达更多信息，提升可读性。
2.2.3 图形库（Library）：高效复用你的创意
这个功能简直是效率神器！你可以把你经常用的、或者精心设计的图形组合保存到图形库中，下次直接拖拽复用。
干货：导入和使用公共图形库！
Excalidraw 社区有大量贡献者创建的高质量公共图形库，例如：
AWS、GCP、Kubernetes 图标库：直接拖拽云服务图标，告别找图烦恼。 流程图、UML 图形库：标准化的图形，让你的图表更规范。
在 Excalidraw 界面左下角点击“Library”图标，然后选择“Browse Libraries”就可以探索并导入这些宝藏了！
Excalidraw 的图形库功能，让你轻松复用组件和图标。
2.3 协作与导出：分享你的智慧结晶
Excalidraw 不仅仅是个人工具，更是团队协作的利器。
2.3.1 实时协作：团队协同绘图
点击右上角的“Live Collaboration”图标，创建一个在线房间，分享链接给你的队友，大家就能在同一个画布上实时绘制、修改。
干货：远程架构评审和头脑风暴的最佳拍档！
想象一下，你和远程的队友在视频会议中，同时在 Excalidraw 上绘制架构图，大家可以实时指出问题、添加想法。这比传统的屏幕共享效率高出N倍，简直是远程协作的天花板！
2.3.2 导出与分享：将成果发布出去
当你绘制完成，Excalidraw 提供了多种导出选项：
PNG 图片：适合文章配图、演示文稿。你可以选择是否透明背景。 SVG 矢量图：超级干货！ SVG 是一种矢量图格式，无论放大多少倍都不会失真，在Web开发中尤其常用。你可以直接将 SVG 代码嵌入到HTML中，或者作为图片资源。 .excalidraw文件：这是 Excalidraw 的源文件格式，方便你下次导入继续编辑，或者分享给其他 Excalidraw 用户。
干货：SVG 在技术文章中的妙用！
如果你将 Excalidraw 导出的 SVG 图直接嵌入到你的技术博客或公众号文章中（作为图片链接），不仅加载速度快，而且无论用户屏幕分辨率多高，图片都清晰锐利，能极大提升阅读体验。
2.4 （进阶）Excalidraw 的生态与集成
Excalidraw 的强大，不止于其本身。作为一个开源项目，它已经融入了许多开发者的工作流。
2.4.1 开源与自部署：定制你的专属工具
Excalidraw 在 GitHub 上完全开源 (https://github.com/excalidraw/excalidraw)，你可以查看它的源码，甚至贡献自己的力量。
干货：自己部署 Excalidraw！
如果你对数据隐私有极高要求，或者想深度定制 Excalidraw，完全可以将其部署到自己的服务器上。结合 Docker 等技术，几条命令就能搞定，拥有一个完全属于自己的在线白板！
# 简单的 Docker 部署示例
docker run -d -p 8080:80 excalidraw/excalidraw
# 访问 http://localhost:8080 即可2.4.2 与其他工具集成：发挥更大的威力
Excalidraw 的强大生态使得它能无缝融入你的日常工作流：
Obsidian / Notion / VS Code 插件：如果你是这些工具的用户，会发现有专门的 Excalidraw 插件。例如，在 Obsidian 中直接创建 .excalidraw文件，就能在笔记中编辑和预览手绘图，让你的知识管理更立体！Jira / Confluence 插件：许多企业级协作平台也提供了 Excalidraw 集成，方便团队在项目管理中直接进行绘图。
干货：让技术笔记真正“所思即所得”！
通过这些插件，你可以把 Excalidraw 变成你技术笔记的“画笔”。在构思一个复杂功能时，边写代码边画图，或者在笔记中直接绘制算法流程，真正实现“所思即所得”的绘图体验，大大提高学习和工作效率。
3 让你的技术表达更具“手作感”
到这里，相信你已经对 Excalidraw 有了深入的了解，甚至已经迫不及待地想打开它，绘制你的第一张图了！
3.1 核心价值再强调
极简高效：告别繁琐的学习曲线，快速产出高质量、有美感的图表。 手绘美学：用独特的风格让你的技术图不再冷冰冰，更具亲和力与表达力。 开源协作：免费、开放、支持实时协同，赋能个人与团队的知识共享。
3.2 适用场景
架构设计：画出清晰的系统分层、模块交互。 流程梳理：理清业务逻辑、数据流向。 教学演示：生动形象地解释复杂概念。 会议记录：快速捕捉头脑风暴的闪光点。 技术文章配图：让你的文章更具吸引力，内容更易消化。
Excalidraw 都能成为你的得力助手。
Excalidraw 还在不断发展，我们期待它未来能集成更多AI绘图辅助功能，比如自动识别文字生成图表、智能布局优化等，进一步提升绘图效率。
技术分享，除了代码，更需要图。图是视觉的语言，是思维的体现。希望 Excalidraw 能让你爱上绘图，让你的技术表达充满“手作感”和温度！