draw.io 入门指南：核心功能、部署方式与安全制图全解析

是什么

draw.io 是一款功能灵活的图表绘制与数字化白板工具，主要用于创建流程图、系统架构图、业务流程以及组织结构图等。从技术底层来看，它是一款客户端 JavaScript 编辑器，这意味着编辑界面完全在用户的网页浏览器或本地桌面环境中运行，无需在外部服务器上执行计算。

该软件由 draw.io Ltd（原名 JGraph）与 draw.io AG 共同持有并积极维护。团队作为一家独立的私营企业运作，未接受风险投资，因此更专注于软件的长期生命力，而非追求投机性的增长目标。除了开源代码库之外，团队还提供了可直接访问的官方网页版（app.diagrams.net）。根据官方网站数据，draw.io 自 2005 年创立至今已深耕 20 年，在全球拥有超过 1 亿用户。

以安全为先的用户信息保护机制是 draw.io 的核心设计理念。在此模式下，该服务秉承“自带存储”（Bring Your Own Storage）哲学，图表文件完全保存在用户指定的位置——无论是本地硬盘，还是关联的云端网盘。平台开发者无法查看、拦截或存储用户的图表内容。此外，开始制图时无需注册账户、填写表单或提供支付信息，从源头上杜绝了供应商锁定。

能做什么

draw.io 在其宽广的画布上为用户提供了一整套用于梳理思路、设计工作流和规划视觉方案的工具，既能满足日常快速绘图，也可胜任规范的技术文档编写：

• 文件的长期兼容性：官方网站表示，2005 年创建的早期图表至今仍可在最新版本中正常打开和渲染，确保视觉资产不会因软件更新而失效。
• 无障碍的文档共享：图表采用开放格式，跨不同操作系统的用户均可自由查看和编辑 draw.io 文件，无需担心授权或许可冲突。
• 协同工作模式：官方网站指出，draw.io 支持团队成员在同一画布上通过共享光标进行实时协作；不过，该项目 GitHub 仓库的 README 中注明，该特定仓库版本并不支持实时协同编辑功能。
• 丰富的导出格式：用户可以将成品导出为 PNG 位图、PDF 文档或 SVG 矢量图，亦可保留可编辑格式以便日后修改。
• 专注于图表而非通用矢量设计：开发团队在项目文档中明确强调，draw.io 的定位是图表制作与白板协作平台，而非通用型 SVG 矢量编辑器。其导出的 SVG 主要用于直接嵌入网页展示，并不适合导入第三方矢量软件中进行多图层艺术创作。
• 广泛的生态工具集成：编辑器能够无缝连接多种主流办公、研发与协作平台，省去繁琐的文件导入步骤。支持的服务包括 Google Drive、Google Docs、Google Slides、Microsoft Teams、SharePoint、OneDrive、Atlassian Jira、Confluence、Notion、Google Chrome 扩展程序，以及专用的 Visual Studio Code（VS Code）代码编辑器插件，同时还能直接与 GitHub 代码仓库及 Markdown 文件集成。
• 面向开发者的嵌入能力：软件工程师和技术文档作者可通过标准 HTML iframe 标签，将可编辑或静态的图表直接嵌入到网页应用、内部 Wiki 或文档页面中。

怎么开始

无论是注重数据隐私、有特殊技术环境要求，还是基于基础设施考虑，draw.io 都提供了多种便捷的上手途径：

1. 使用在线编辑器：最快捷的方式是直接访问托管在 app.diagrams.net 的网页版或通过官方网站进入。由于没有任何注册门槛或付费限制，打开网页即可立即开始绘制。绘制完成后，你可以选择将文件直接保存到本地计算机，或者关联 Google Drive、Microsoft OneDrive 等个人云存储服务。
2. 安装桌面客户端（draw.io Desktop）：对于需要完全离线工作，或须遵循严格本地数据留存合规要求的用户，可以前往 get.diagrams.net 下载独立的桌面版客户端。
3. 通过 GitHub Pages 自建托管：如果希望拥有专属的 Web 实例，可以 Fork 官方 GitHub 仓库，并通过 GitHub Pages 免费发布。根据仓库文档说明，该方式可提供功能完整的图表编辑器，但不支持外部第三方集成。
4. 使用 Docker 部署：系统管理员若想在内网或私有服务器上自建完全隔离的实例，可以直接拉取开发团队提供的官方 Docker 镜像进行部署。
5. 通过 Web 归档包（WAR）运行：在采用 Java Servlet 容器的运行环境中，可直接从项目的 GitHub Releases 页面获取预构建好的 .war 文件进行部署。

如果开发者希望在网页或内部文档门户中嵌入交互式图表，官方网站提供了如下标准 HTML 实现代码：

<!-- Embed an editable diagram -->
<iframe src="https://viewer.diagrams.net/? edit=_blank& layers=1& nav=1#Uhttps://..." style="width:100%; height:400px; border:0;">
</iframe>

社区支持、问题排查及使用交流主要通过项目的 GitHub Discussions 讨论区和 Stack Overflow 进行。需要注意的是，核心开发团队不接受 GitHub 上的外部 Pull Request，所有代码变更均在团队内部统一管理。

价格与门槛

当前的具体收费档位、授权结构以及商业方案详情可能会有变动，建议直接前往 draw.io 官方网站 查看最新资讯。

根据项目相关资料，底层应用程序并未设置人为的功能限制、付费墙，也没有针对单点登录（SSO）等功能设立企业级专属门槛。项目代码仓库中发布的核心源代码遵循 Apache License 2.0 开源协议，引入的第三方 JavaScript 依赖库也严格符合 Apache 2.0 兼容条款，未包含 GPL 或 AGPL 等强传染性开源协议。此外，开发者不会对最终用户创作的图表主张任何版权所有权。

不过，平台的图形素材与品牌标识受到明确的许可与商标条款约束：

• 图形组件与模板使用限制：软件内置的图形库、图标集和图表模板有着明确的分发限制。未经明确书面许可，严禁将这些素材（以及基于其衍生的视觉格式、描摹复制品或 AI 生成变体）打包为软件资产，亦不得集成到 Atlassian 产品或 Atlassian Marketplace 插件应用中。但这一规则并不限制普通用户在导出的图表或日常文档中使用这些图形。
• 商标保护规范：“draw.io” 是已注册的欧盟商标（编号 #018062448）。官方团队明确禁止未经授权使用或篡改 draw.io 的名称及 Logo 用于外部商业宣传、域名注册、社交媒体资料，或任何暗示官方赞助与背书的场景。

在系统兼容性方面，在浏览器中运行 draw.io 需要现代浏览器环境。根据项目 README，支持的浏览器最低版本如下：

• Google Chrome 123 或更高版本
• Mozilla Firefox 120 或更高版本
• Apple Safari 17.5 或更高版本
• Opera 109 或更高版本
• Microsoft Edge 123 或更高版本
• Android WebView 137 或更高版本
• Apple iOS Safari 18.5 或更高版本

适合谁

得益于灵活自如的制图画布与多样化的部署方式，draw.io 能够很好地满足各类不同群体的需求：

• 注重数据安全的企业与团队：对于在合规、数据保密或数据治理方面有严格要求的团队，纯客户端运行架构能够保证文件只留存在内网存储或经认证的企业云盘中。
• 软件工程师与系统架构师：可在现有开发工作流中轻松绘制数据库 ER 图、微服务架构图和状态机图表，并充分利用其与 VS Code、GitHub 仓库及 Markdown 文件的深度整合。
• 产品经理与业务分析师：无需订阅付费，也无需繁琐的上手流程，即可快速梳理用户旅程、绘制组织架构图与业务流程图。
• 跨职能协作办公团队：深度使用 Google Workspace（Docs、Slides）或 Microsoft 365（Teams、OneDrive、SharePoint）的组织，可直接将图表无缝嵌入到日常协同办公中。
• 学生、教育工作者与轻度个人用户：无需提供信用卡信息，无需注册账号，即可随开随用，获得稳定高效的绘图体验。

替代品

• Excalidraw 是一款开源的手绘风格白板与草图绘制工具。
• Mermaid 是一款开源的图表绘制工具，支持通过文本定义直接渲染生成图表。

来源

• https://github.com/jgraph/drawio
• https://www.drawio.com/
• https://github.com/excalidraw/excalidraw
• https://github.com/mermaid-js/mermaid