三款开源工具实战：Slidev、Excalidraw、Draw.io 架构图与PPT制作指南

1. 三款工具的整体定位与选型逻辑做技术分享这些年被问得最多的问题之一就是“有没有能自动做PPT或者画架构图的工具”。尤其是最近两年AI能力爆发之后各种生成式工具层出不穷但真正能打、能落地到日常工作流里的其实并不多。我前后试了不下二十款相关工具踩了不少坑也沉淀下来几个真正在用的开源项目。这篇文章就把我目前主力在用的三款开源工具完整拆解一遍从它们各自解决什么问题、为什么选开源而不是商业产品、到具体的部署步骤和实操细节全部讲透。先明确一下这三款工具各自的定位方便你对号入座。第一款是Slidev面向开发者群体的PPT制作工具用Markdown写幻灯片支持代码高亮、主题定制、导出PDF和图片适合技术分享、项目汇报这类场景。第二款是Excalidraw手绘风格的架构图和白板工具开源版本可以自部署支持实时协作画出来的图有一种“随手画但很专业”的质感特别适合画系统架构图、流程图、思维导图。第三款是Draw.io现名diagrams.net老牌的开源绘图工具功能极其全面支持各种架构图模板、UML图、网络拓扑图可以完全离线使用数据存在本地对于有保密要求的团队来说非常友好。为什么我优先推荐开源方案而不是那些在线的AI生成PPT网站原因很实际。第一数据安全。很多在线工具你上传的内容会被用于训练或者存在泄露风险尤其是公司内部的架构图、业务数据放到第三方平台心里不踏实。第二可定制性。开源工具你可以改源码、加插件、定制主题商业产品只能用它给你的功能。第三长期可用。在线服务说关就关开源项目只要社区还在你随时可以自己部署。第四成本。这三款工具全部免费自部署也不需要额外授权费用。当然开源工具也有它的门槛比如需要自己部署、需要学习配置、遇到问题得自己排查。但这恰恰是这篇文章的价值所在——我会把每个工具的部署步骤、配置要点、常见坑都讲清楚让你少走弯路。提示选择工具时先想清楚你的核心场景。如果是技术分享类PPTSlidev最合适如果是画架构图做技术方案Excalidraw和Draw.io各有优势前者适合快速草图和白板讨论后者适合正式的输出文档。2. Slidev用Markdown写PPT的开发者利器2.1 为什么选择Slidev而不是传统PPT工具传统做PPT的方式无非就是PowerPoint、Keynote或者WPS图形界面拖拽所见即所得。这种方式对于非技术人群很友好但对于开发者来说有几个痛点。第一版本管理困难PPT文件是二进制格式Git diff根本看不出改了什么。第二代码展示效果差在PPT里贴代码要么截图要么手动排版高亮和字体都很别扭。第三复用性低每次做新PPT都要重新调整格式。第四协作麻烦多人编辑同一个PPT文件容易冲突。Slidev的思路完全不同。它把每一页幻灯片写成一个Markdown文件用---分隔每一页代码块直接支持语法高亮主题用CSS控制整个项目就是一个文件夹可以用Git管理。这意味着你可以像写代码一样写PPT用你熟悉的编辑器VS Code、Vim都行用Git做版本控制用npm管理依赖。我第一次用Slidev做技术分享的时候最大的感受就是“终于不用在PPT里调代码字体了”。直接写代码块Slidev自动帮你高亮支持行号、行高亮、代码块动画效果比手动排版好太多。而且做完之后可以导出PDF、PNG也可以直接部署成网页在线访问。2.2 环境搭建与项目初始化Slidev的运行依赖Node.js环境建议使用Node.js 18以上的版本。如果你还没装Node去官网下载LTS版本安装即可。安装完成后用npm或者pnpm来初始化项目。# 使用npm初始化 npm init slidevlatest # 或者使用pnpm推荐速度更快 pnpm create slidev执行后会提示你输入项目名称然后自动下载模板并安装依赖。整个过程大概一两分钟取决于网络速度。安装完成后进入项目目录运行开发服务器cd your-slidev-project npm run dev浏览器会自动打开http://localhost:3030你就能看到默认的幻灯片页面了。开发模式下支持热更新你修改Markdown文件浏览器里的内容会实时刷新这个体验非常流畅。项目结构大概是这样的your-slidev-project/ ├── slides.md # 主幻灯片文件 ├── components/ # 自定义Vue组件 ├── pages/ # 多文件幻灯片 ├── public/ # 静态资源 ├── style.css # 全局样式 ├── package.json └── vite.config.ts核心就是slides.md这一个文件所有的幻灯片内容都写在这里面。2.3 Markdown写幻灯片的语法与技巧Slidev的Markdown语法在标准Markdown基础上做了扩展用起来很直观。每一页幻灯片用---分隔第一页通常是封面用layout: cover指定布局。--- layout: cover --- # 我的技术分享 ## 基于Slidev的PPT制作实践 --- layout: default --- # 第二页标题 这里是正文内容支持**加粗**、*斜体*、行内代码。 - 列表项一 - 列表项二 - 列表项三代码块是Slidev的强项支持行高亮和动画python {1|3-5|all} def hello(): print(第一行) print(第二行) print(第三行) print(第四行) print(第五行)上面这个写法会让代码块分三步展示先高亮第1行然后高亮第3到5行最后全部显示。做技术分享的时候这种逐步展示的方式能让观众跟着你的思路走不会一上来就被一大段代码吓到。 Slidev还支持在幻灯片里直接写Vue组件这意味着你可以做交互式的演示。比如嵌入一个可点击的按钮、一个动态图表、甚至一个小的demo。这个能力在技术分享里非常有用你可以现场演示API调用、展示数据可视化效果。 ### 2.4 主题定制与导出方案 Slidev内置了多套主题包括default、seriph、bricks等在幻灯片头部用theme: seriph指定即可。如果内置主题不满足需求可以安装社区主题比如slidev-theme-geek、slidev-theme-dracula等用npm安装后在配置里引用。 自定义样式通过style.css文件控制你可以覆盖任何CSS变量来调整颜色、字体、间距。比如 css :root { --slidev-theme-primary: #3b82f6; --slidev-theme-background: #0f172a; }导出方面Slidev支持导出PDF、PNG和PPTX。导出PDF的命令是npm run export默认导出为PDF如果需要导出为PPTX格式需要安装playwright-chromium依赖然后运行npm run export -- --format pptx注意导出PPTX格式时部分复杂动画和Vue组件可能无法完整保留建议以PDF或网页形式分享。如果必须用PPTX导出后需要手动检查排版。2.5 实操心得与常见问题用Slidev做PPT有一段时间了分享几个实际踩过的坑。第一中文字体问题。默认主题的字体对中文支持一般建议在style.css里指定中文字体比如font-family: Noto Sans SC, sans-serif;。第二图片路径问题。放在public目录下的图片用绝对路径引用比如/images/arch.png不要用相对路径否则导出时可能找不到。第三代码块过长问题。如果一页幻灯片里代码太多导出PDF时会溢出建议拆分成多页或者用zoom属性缩小代码块。还有一个很实用的技巧用layout: image-right布局可以把图片放在右侧文字在左侧做产品介绍或者架构说明的时候特别清晰。Slidev的布局系统很灵活多试试不同的layout组合能找到最适合你内容的呈现方式。3. Excalidraw手绘风格架构图的快速实现3.1 手绘风格为什么适合技术架构图第一次看到Excalidraw画出来的图很多人会觉得“这不就是随手画的吗”。但恰恰是这种手绘风格在技术讨论场景里有独特的优势。正式的架构图工具画出来的图太“完美”了线条笔直、颜色规整看起来像最终稿反而让人不敢在上面改。手绘风格的图天然带有“草图”的暗示团队成员看到后更愿意提出修改意见讨论氛围更轻松。另外Excalidraw的极简设计让画图速度非常快。你不需要选形状、调颜色、对齐网格直接拖拽就能画。画一个微服务架构图用Excalidraw可能五分钟就搞定用传统工具可能要二十分钟。对于需要快速表达想法的场景这个效率差距非常明显。Excalidraw支持导出PNG、SVG也可以生成分享链接让别人在线查看和编辑。开源版本可以自己部署数据完全掌握在自己手里。3.2 自部署Excalidraw的完整步骤Excalidraw官方提供了在线版本但如果你在公司内部使用建议自部署。自部署的好处是数据不出内网而且可以定制一些配置。Excalidraw的源码在GitHub上开源用Docker部署是最简单的方式。确保你的服务器上装了Docker和Docker Compose然后创建一个docker-compose.yml文件version: 3.8 services: excalidraw: image: excalidraw/excalidraw:latest ports: - 3000:80 restart: always然后运行docker-compose up -d等容器启动后访问http://你的服务器IP:3000就能看到Excalidraw的界面了。整个过程不到五分钟。如果你需要协作功能多人同时编辑同一张图还需要部署一个协作服务器。Excalidraw提供了excalidraw-room这个组件同样可以用Docker部署version: 3.8 services: excalidraw: image: excalidraw/excalidraw:latest ports: - 3000:80 environment: - REACT_APP_WS_SERVER_URLws://你的服务器IP:3001 restart: always excalidraw-room: image: excalidraw/excalidraw-room:latest ports: - 3001:80 restart: always这样配置之后多人协作功能就可以用了。把链接分享给同事大家就能在同一张图上实时编辑。3.3 画架构图的核心技巧与快捷键Excalidraw上手很简单但要用得高效有几个技巧值得掌握。第一善用快捷键。R画矩形D画菱形E画椭圆A画箭头L画直线T插入文字V选择工具。这些快捷键用熟了画图速度能提升一倍。按住Shift画线可以保持水平或垂直按住Alt拖拽可以复制元素。第二用容器和绑定。Excalidraw支持把文字绑定到形状上移动形状时文字跟着走。操作方法是先画一个矩形然后双击矩形内部直接输入文字文字就自动绑定到这个矩形了。箭头也可以绑定到形状上移动形状时箭头自动调整。第三用图层和分组。画复杂架构图时把相关的元素编组CtrlG移动和复制都方便。图层的概念在Excalidraw里是通过元素的先后顺序实现的后画的元素在上面。第四用颜色区分层次。Excalidraw的调色板很简洁建议用不同的背景色区分不同的服务层级。比如前端用浅蓝色后端用浅绿色数据库用浅黄色中间件用浅灰色。这样一眼就能看出架构的层次关系。画一个典型的微服务架构图我的习惯是先画最外层的用户入口比如浏览器图标然后画网关层再画各个微服务最后画数据库和缓存。每一层用不同的颜色箭头标注调用关系。整个过程大概五到十分钟。3.4 导出与嵌入文档的实操方法Excalidraw画完图之后导出方式有几种。最简单的是导出PNG点击左上角菜单选择“导出图片”可以调整导出比例和背景。如果需要在文档里嵌入建议导出SVG格式矢量图放大不失真而且文件体积小。导出SVG后可以直接插入Markdown文档或者HTML页面。比如在技术方案文档里如果用的是在线版本还可以生成分享链接设置链接的有效期和编辑权限。自部署版本同样支持这个功能分享链接会指向你自己的服务器。还有一个很实用的功能是“导出到Excalidraw库”。你可以把常用的形状比如服务器图标、数据库图标、云服务图标保存到库里下次画图直接拖出来用不用每次重新画。这个功能在画重复性高的架构图时特别省时间。提示Excalidraw的默认字体是手写风格如果觉得不够正式可以在设置里切换为正常字体。但手绘风格恰恰是它的特色建议保留。4. Draw.io功能全面的专业架构图工具4.1 Draw.io的核心优势与适用场景Draw.io现在叫diagrams.net是我用得最久的绘图工具从大学画UML图到现在画系统架构图差不多有七八年了。它的核心优势是功能全面、模板丰富、完全免费、支持离线。跟Excalidraw相比Draw.io更适合画正式的、需要精确表达的图比如网络拓扑图、数据库ER图、UML类图、BPMN流程图。Draw.io的模板库非常强大内置了AWS、Azure、GCP、阿里云等云服务的图标库画云架构图的时候直接拖图标就行。还有各种网络设备图标、UML符号、流程图符号基本上你能想到的图它都能画。另一个优势是数据存储灵活。你可以把图存在本地文件、Google Drive、OneDrive、GitHub、GitLab也可以自部署一个Draw.io实例数据完全自己控制。对于有保密要求的项目自部署是最稳妥的方案。4.2 自部署Draw.io的两种方案对比自部署Draw.io有两种主流方案Docker部署和静态文件部署。两种方案各有优劣根据你的实际需求选择。Docker部署最简单一条命令搞定docker run -d -p 8080:8080 jgraph/drawio:latest访问http://你的服务器IP:8080就能用了。Docker方案的优点是升级方便docker pull拉取最新镜像重启即可。缺点是资源占用相对高一些而且需要服务器一直运行。静态文件部署适合有Web服务器的场景。从GitHub Releases下载drawio.war或者静态资源包解压后放到Nginx或Apache的目录下即可。这种方案资源占用极低一台1核1G的服务器就能跑而且可以利用现有的Web服务器做HTTPS和域名配置。对比项Docker部署静态文件部署部署难度极低一条命令中等需要配置Web服务器资源占用较高约200MB内存极低几乎不占内存升级方式拉取新镜像重启替换静态文件HTTPS支持需要额外配置反向代理直接复用Web服务器配置适用场景快速验证、内部使用生产环境、长期运行我个人的选择是静态文件部署因为公司已经有Nginx服务器直接放上去就行不占额外资源。而且Nginx配置HTTPS很方便用Lets Encrypt免费证书就行。4.3 画专业架构图的模板与技巧Draw.io画架构图有几个核心技巧掌握了能大幅提升效率。第一用图层管理复杂架构。Draw.io支持图层功能可以把不同层次的元素放在不同图层上。比如画一个微服务架构可以分“接入层”“网关层”“服务层”“数据层”四个图层每个图层用不同的颜色标注。这样图看起来清晰修改的时候也方便可以单独隐藏某个图层。第二用容器和分组。Draw.io的容器功能可以把相关元素框在一起移动容器时里面的元素跟着移动。画微服务的时候把同一个服务的多个实例放在一个容器里标注服务名称和副本数看起来非常专业。第三用连接点和路由。Draw.io的连线支持多种路由方式直线、正交、曲线。画架构图建议用正交路由线条横平竖直看起来整洁。连接点可以精确控制线条从形状的哪个位置出发避免线条交叉混乱。第四用模板和自定义形状。Draw.io支持导入自定义形状库你可以把公司内部的架构组件做成形状库下次画图直接拖出来用。这个功能在团队协作中特别有价值能保证所有人画的图风格统一。画一个Spring Cloud微服务架构图我的流程是这样的先用容器画出注册中心Eureka或Nacos然后画网关Gateway再画各个业务服务用户服务、订单服务、支付服务等每个服务用容器框起来标注副本数最后画数据库和缓存。服务之间的调用关系用箭头标注同步调用用实线异步消息用虚线。整个过程大概十五到二十分钟比Excalidraw慢一些但出来的图更正式、更适合放进技术方案文档。4.4 导出高清图片与文档集成Draw.io导出图片的选项很丰富。导出PNG时可以设置缩放比例建议选200%或300%这样在高分屏上看起来清晰。导出SVG时可以选择“包含副本”或“仅包含图表”前者会把Draw.io的编辑信息嵌入SVG方便以后重新编辑。如果要把图嵌入Word或PPT建议导出为PNG300%缩放或者EMF格式。EMF是矢量格式在Office里可以无损缩放。导出PDF时可以选择“裁剪”去掉多余的白边让图更紧凑。Draw.io还有一个很实用的功能是“发布为链接”。你可以把图发布成一个URL别人打开链接就能查看不需要登录。这个功能在做技术评审的时候很方便直接把链接发到群里大家都能看。注意自部署的Draw.io默认没有开启“发布为链接”功能需要在配置里手动开启。具体是在PreConfig里设置publishEnabled: true。5. 三款工具的协同使用与场景匹配5.1 不同场景下的工具选择策略这三款工具各有侧重实际工作中我经常组合使用。下面这张表总结了我的选择逻辑场景推荐工具理由技术分享PPTSlidevMarkdown写代码友好版本可控快速草图讨论Excalidraw手绘风格画得快氛围轻松正式架构文档Draw.io模板丰富输出专业支持精确表达在线协作白板Excalidraw实时协作链接分享方便云架构图Draw.io内置云服务图标库产品原型草图Excalidraw快速表达不需要精确项目汇报PPTSlidev可导出PDF排版统一网络拓扑图Draw.io网络设备图标齐全实际工作中我经常先用Excalidraw画草图跟团队讨论确定方案后再用Draw.io画正式的架构图放进技术文档最后用Slidev做汇报PPT。三款工具配合使用覆盖了从讨论到输出的完整流程。5.2 从草图到正式图的完整工作流举个例子说明这个工作流。假设要设计一个新的订单系统架构。第一步用Excalidraw画草图。把订单服务、支付服务、库存服务、数据库、消息队列这些核心组件画出来标注调用关系。这个阶段不追求精确重点是理清思路。画完之后分享链接给团队成员大家在图上直接标注修改意见。第二步方案确定后用Draw.io画正式架构图。参考Excalidraw的草图用规范的图标和颜色重新画一遍。加上负载均衡、服务发现、监控告警这些生产环境需要的组件。导出的SVG放进技术方案文档。第三步用Slidev做架构评审PPT。把Draw.io导出的架构图插入幻灯片配上文字说明和关键设计决策。用Slidev的代码块功能展示核心接口定义用动画逐步展示调用流程。整个流程下来从讨论到输出文档再到汇报三款工具无缝衔接。而且所有内容都是文本格式Markdown、SVG可以用Git管理团队协作效率很高。5.3 团队协作中的版本管理实践开源工具的一个巨大优势是支持版本管理。Slidev的幻灯片是Markdown文件Excalidraw的图可以导出为.excalidraw格式JSONDraw.io的图可以导出为.drawio格式XML。这些格式都是纯文本可以用Git做版本控制。我们团队的做法是建一个docs仓库里面分三个目录slides/放Slidev项目diagrams/放Draw.io文件sketches/放Excalidraw文件。每次修改都提交Git需要的时候可以查看历史版本、对比差异、回滚修改。这个实践带来的好处很明显。第一所有设计文档有历史记录谁改了什么一目了然。第二可以分支开发不同人负责不同的图最后合并。第三CI/CD可以自动构建比如每次提交Slidev的Markdown自动导出PDF并部署到内部文档站点。提示Excalidraw和Draw.io的文件格式虽然都是文本但直接Git diff可读性一般。建议在提交时附上导出的PNG或SVG方便在Git平台上预览。6. 常见问题排查与避坑指南6.1 Slidev部署与导出常见问题问题一npm run dev启动后浏览器打不开。检查端口3030是否被占用可以用lsof -i:3030查看。如果被占用在vite.config.ts里修改端口配置。问题二导出PDF时中文字体乱码。这是因为导出时使用的Chromium没有安装中文字体。解决方法是在服务器上安装中文字体包比如apt install fonts-noto-cjk然后重新导出。问题三代码块高亮不生效。检查代码块的语言标注是否正确Slidev使用Shiki做高亮支持的语言列表可以在Shiki文档里查。如果语言不支持可以安装对应的语言包。问题四导出的PPTX格式排版错乱。这是已知问题PPTX导出功能还在完善中。建议优先使用PDF格式如果必须用PPTX导出后手动调整。6.2 Excalidraw协作与性能问题问题一协作模式下多人编辑冲突。Excalidraw的协作是基于WebSocket的实时同步如果网络不稳定可能会出现冲突。建议在稳定的内网环境下使用或者减少同时编辑的人数。问题二画布元素过多导致卡顿。Excalidraw在元素超过500个之后可能会卡顿。建议把大图拆分成多个小图或者用分组功能把不相关的元素折叠起来。问题三导出的PNG模糊。导出时调整缩放比例默认是1x改成2x或3x就清晰了。如果还是模糊检查浏览器的缩放比例是否影响了导出。问题四自部署版本无法保存到本地。自部署版本默认使用浏览器本地存储清除浏览器数据会丢失。建议定期导出.excalidraw文件备份或者配置后端存储。6.3 Draw.io自部署配置问题问题一Docker部署后无法保存文件。Draw.io的Docker镜像默认没有配置文件存储后端需要配置DRAWIO_SERVER_URL和相关的存储参数。如果只是个人使用直接用浏览器本地存储即可。问题二导出SVG时字体丢失。导出SVG时选择“嵌入字体”选项这样在其他设备上打开也能正常显示。但嵌入字体会增大文件体积根据实际需求选择。问题三自部署版本缺少某些图标库。Draw.io的图标库是按需加载的自部署版本可能没有包含所有图标。可以在配置里指定图标库的CDN地址或者手动导入图标库文件。问题四HTTPS环境下无法使用某些功能。Draw.io的某些功能如剪贴板、文件保存需要HTTPS环境。配置Nginx反向代理和SSL证书即可解决。6.4 三款工具的综合避坑清单工具常见坑解决方案Slidev中文字体导出乱码服务器安装中文字体包Slidev代码块过长溢出拆分成多页或缩小字号SlidevPPTX导出排版错乱优先用PDF格式Excalidraw元素过多卡顿拆分画布或分组折叠Excalidraw协作冲突稳定网络限制同时编辑人数Excalidraw导出图片模糊提高导出缩放比例Draw.ioDocker版无法保存配置存储后端或使用本地存储Draw.ioSVG字体丢失导出时嵌入字体Draw.io缺少图标库配置CDN或手动导入这些坑都是我实际踩过的有些折腾了很久才找到解决方案。希望这份清单能帮你节省时间把精力放在内容创作上而不是工具折腾上。7. 进阶玩法与效率提升技巧7.1 Slidev的自动化构建与部署Slidev项目可以集成到CI/CD流程里实现自动构建和部署。比如用GitHub Actions每次推送到main分支时自动导出PDF并部署到GitHub Pages。name: Build and Deploy Slides on: push: branches: [main] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkoutv3 - uses: actions/setup-nodev3 with: node-version: 18 - run: npm install - run: npm run build - run: npm run export - uses: actions/upload-pages-artifactv1 with: path: dist这个配置会自动构建Slidev项目并导出PDF然后把构建产物部署到GitHub Pages。每次修改Markdown推送到仓库几分钟后在线版本就更新了。7.2 Excalidraw的素材库建设Excalidraw支持自定义素材库你可以把常用的图标和形状保存到库里。比如服务器、数据库、消息队列、负载均衡这些常用组件画一次保存到库以后直接拖出来用。建设素材库的方法画好一个组件后选中它点击左侧工具栏的“库”图标选择“添加到库”。下次使用时从库里拖出来即可。团队可以共享一个素材库文件.excalidrawlib保证所有人画的图风格统一。7.3 Draw.io的批量导出与脚本化Draw.io支持命令行导出可以用脚本批量把.drawio文件导出为PNG或PDF。安装drawio-desktop后用命令行drawio --export --format png --output ./output ./diagrams这个命令会把diagrams目录下所有的.drawio文件导出为PNG。配合CI/CD可以实现文档的自动更新。比如技术方案文档里的架构图每次修改.drawio文件后自动导出SVG并更新文档。7.4 三款工具与AI能力的结合点虽然这三款工具本身不是AI工具但可以跟AI能力结合使用。比如用AI生成Slidev的Markdown内容你只需要提供大纲和关键点AI帮你扩展成完整的幻灯片。或者用AI生成Excalidraw的JSON结构自动画出架构图。我试过用AI生成Slidev的幻灯片内容效果还不错。把技术方案的要点输入给AI让它按照Slidev的语法生成Markdown然后手动调整细节。这种方式能把做PPT的时间从两小时压缩到半小时。Draw.io的XML格式也可以由AI生成但复杂度较高目前效果一般。Excalidraw的JSON格式相对简单AI生成的成功率更高一些。随着AI能力的提升这些结合点会越来越多。提示AI生成的内容需要人工审核和调整尤其是技术类内容要确保准确性。AI适合做初稿和扩展不适合直接作为最终输出。8. 我的实际使用体会与建议这三款工具我用了很长时间Slidev大概两年Excalidraw一年多Draw.io七八年。说几个真实的体会。Slidev最大的价值是让技术分享的PPT制作变得像写代码一样自然。以前做技术分享最头疼的就是在PPT里排版代码现在直接写Markdown代码高亮、行号、动画都是自动的。而且做完之后可以导出PDF、部署网页分享给别人的方式很灵活。缺点是学习曲线有一点需要熟悉Markdown和基本的命令行操作但对于开发者来说不是问题。Excalidraw改变了我跟团队讨论架构的方式。以前讨论架构要么在白板上画要么用正式工具画前者没法保存和分享后者太慢。Excalidraw正好在中间画得快、能保存、能分享、能协作。手绘风格还有一个意外的好处就是让讨论更轻松大家更愿意提意见。Draw.io是我画正式架构图的首选。功能全面、模板丰富、输出专业而且完全免费。自部署之后数据安全也有保障。缺点是画图速度比Excalidraw慢但对于正式文档来说慢一点换来的是更专业的输出值得。如果只能选一款我会选Draw.io因为它的适用场景最广。如果做技术分享多Slidev是必装的。如果团队协作多Excalidraw的协作功能最方便。三款都装上根据不同场景切换使用效率最高。最后分享一个小技巧这三款工具都支持自定义快捷键和主题花点时间配置成自己习惯的样子长期来看能节省大量时间。比如Slidev的主题配色、Excalidraw的默认字体、Draw.io的默认线条样式配置一次以后每次画图都受益。