Drawio 中文官网

Mac版Drawio-desktop 桌面最新版 31.4.4

Mon, 07 Sep 2026 16:07:54 +0800

中文drawio 类似 visio，它是一款开源的在线图表绘制工具，可以绘制各种类型的图表，如流程图、组织结构图、网络拓扑图等。
它适合应用在企业、学校、科研机构等，用于项目管理、技术文档、教学演示、业务流程梳理等场景。

优势

价格：开源免费
无需安装：基于浏览器运行，在线直接打开
零门槛上手：中文drawio 非常适合推荐给新手使用，它支持拖拽、自动布局等功能，能够快速完成绘图
超市级模板库：架构图、UML、泳道图，拖进来就能直接改

入门教程

首先，访问中文Drawio 的官方网站 https://www.drawio.com.cn/

打开后，你将看到以下界面，由于我们是第一次使用，因此请选择【创建新绘图】选项。

在【创建新绘图】界面中，
你可以看到对话框的左侧是一个丰富的分类列表，而右侧展示了该分类下的业务模板。
在本例中，我们选择了【基本】分类下的第2个业务模板【类图】，确认无误后，点击【创建】按钮即可完成模板创建。
注：在本地模式下，会弹出一个文件选择框让你选择保存到哪个文件中。

接下来，您会在主界面看到一个已创建好的【类图】。
该类图包含了一些常见的类图图形元素，以及相应的文本标注和连接线。

在开始修改【类图】之前，我们先来熟悉一下中文drawio 的主界面及其功能。
主界面的左侧是图形元素列表，里面提供了丰富的图形元素供我们选择。
我们可以通过单击或拖拽的方式，将所需的图形元素添加到画布上。

主界面右侧区域为属性面板，其功能会根据选中目标而变化：
当选中某个目标时，该面板会显示为选定目标的属性面板，用于调整该目标的相关属性。
当未选中任何目标时，该面板则会显示为画布的属性面板，其中包含了网格、背景、宽高、缩放等画布相关设置选项。

接下来我们回到左侧的【图形元素】列表，尝试为【类图】添加新的图形元素。
在本例中，我们选择新增一个正方形到类图中。
将它直接拖到画布中，如下图所示：

双击该正方形的中心点，即可输入自定义文本
在本列中，我们输入了：boss

编辑文本完成后，按下 Esc 键或点击画布的空白区域，即可退出文本编辑模式。
此时，中文drawio 会重新选中该图形，右侧面板也会切换为图形的属性面板。
在属性面板中，您可以对图形的外观样式（如颜色、边框等）和文本样式（如字体、字号等）进行修改。
在本例中，我们将图形的样式修改为绿色。

在样式调整完成后，我们接下来将把这个图形与类图连接起来。
如下图所示，图形周围有四个方向的箭头。点击任意方向上的箭头，
中文drawio 会自动识别该方向上的最近图形，并自动为其建立一条连接线。

最后你可以根据需求，拖动图形或连接线的位置，中文drwaio 会自动修正，如下示例。

以上就是本次中文drawio 的使用教程，
它轻松实现了创建了一个类图的工作，并对其进行新增，编辑，修改样式等操作。

Windows 版Drawio-desktop 桌面最新版 31.4.4

Mon, 07 Sep 2026 15:59:37 +0800

优势

价格：开源免费
无需安装：基于浏览器运行，在线直接打开
零门槛上手：中文drawio 非常适合推荐给新手使用，它支持拖拽、自动布局等功能，能够快速完成绘图
超市级模板库：架构图、UML、泳道图，拖进来就能直接改

入门教程

首先，访问中文Drawio 的官方网站 https://www.drawio.com.cn/

打开后，你将看到以下界面，由于我们是第一次使用，因此请选择【创建新绘图】选项。

接下来，您会在主界面看到一个已创建好的【类图】。
该类图包含了一些常见的类图图形元素，以及相应的文本标注和连接线。

双击该正方形的中心点，即可输入自定义文本
在本列中，我们输入了：boss

最后你可以根据需求，拖动图形或连接线的位置，中文drwaio 会自动修正，如下示例。

以上就是本次中文drawio 的使用教程，
它轻松实现了创建了一个类图的工作，并对其进行新增，编辑，修改样式等操作。

这个 8.6k Stars 的开源项目，彻底解放了我的绘图鼠标！一行描述，秒出专业架构图！

Mon, 31 Aug 2026 09:00:56 +0800

项目交付、方案汇报、技术评审——图是绕不开的。架构图、流程图、ER 图、时序图……每一份技术文档里，图的质量直接决定了评审的流畅度。

但问题是，画图这件事在 AI 时代之前，实在是太"原始"了。

最近发现了一个关于 draw.io 的绘图 SKill，叫 drawio-skill。

装在 CC/Codex/WorkBuddy/TraeWork 里，直接就能用。

drawio-skill 的思路是生成 .drawio 源文件。这个文件你完全可以继续在 draw.io 里手动编辑、调整、美化。

它帮你完成了"从零搭建"这最费体力的一步，剩下的精修工作全交给你。

从"手动操作"到"语言描述"，从"改图片"到"改源文件"——这才是它真正革命的地方。

drawio-skill 到底是什么？

drawio-skill 是由 Agents365-ai 团队开发的开源 Skill 插件，目前 GitHub 上已经收获了 8600+ Stars。

可以无缝接入 Claude Code、Codex 等主流 AI Agent 助手。

简单说，它干的事情就是：

你说一句话 → 它生成 .drawio XML → 导出 PNG/SVG/PDF → AI 自检 → 给你成品

但你可能没想到的是，它的能力远不止"一句话画图"。

核心能力

11 种图表预设

涵盖了开发者日常最常用的所有类型：ER 图、UML 类图、序列图、C4 模型、架构图、ML/深度学习模型图、流程图、SysML（MBSE 系统建模）、BPMN 业务流程、网络拓扑、跨职能泳道图。

每种预设都有专属的形状、样式和布局规范。

10,000+ 官方形状搜索

内置 AWS、Azure、GCP、Cisco、Kubernetes、UML、BPMN 等主流形状库的精确 style 解析。

你说"用 AWS 图标画一个无服务器架构"，它就能准确找到 Lambda、S3、API Gateway 的官方图标——不靠猜，杜绝空白框。

321 个 AI / LLM 品牌图标

专门为 AI 应用架构图准备的——OpenAI、Claude、Gemini、Mistral、Llama、Ollama、LangChain……外加 18 个数据存储品牌（Redis、Postgres、Qdrant、Milvus）。

你画一个 RAG 系统架构，再也不用纠结用什么图标代表"向量数据库"了。

Mermaid → 原生 .drawio

如果你习惯用 Mermaid 语法，直接写 Mermaid 代码也可以——28 种标准类型（思维导图、甘特图、时间线、用户旅程图、饼图、桑基图、看板……）都能自动转换成已布局、可编辑的 .drawio 文件。

结构写对了，布局自动帮你搞定。

代码库 → 结构图

给一个 Python / JS-TS / Go / Rust 项目，它能自动提取导入关系，生成带模块容器的结构图。

Python 还能生成类继承层级图。38 个类的 logging 模块，自动布局、按模块配色——一条命令的事。

IaC → 架构图

Terraform 配置、Kubernetes manifest、docker-compose 文件——解析之后直接生成架构图，每个资源用的是官方 AWS/Azure/GCP/K8s 图标，连线来自真实的 role ARN、selector、volume 挂载关系。

不是瞎连线，是真正反映基础设施配置的图。

SQL DDL → ER 图

把 CREATE TABLE 语句喂进去，自动生成带主键/外键标记的表节点和鸦爪（crow's foot）风格的外键连线。数据库设计师的福音。

C4 模型 + 下钻

一条命令生成 System Context → Container → Component 三页全套 C4 模型，父元素可以点击跳转到子层页面。写方案文档直接能用。

视觉自检 + 自动修复

导出 PNG 之后，AI 会自己读一遍图片，检测重叠、标签裁切、连线堆叠等布局问题，然后自动修复（最多 2 轮）。

不满意还能开第 3-5 轮定向优化，比如"把 Kafka 移到右边"、"给 Payment Service 换个颜色"。

安装 10 秒搞定

安装分两步——先装 draw.io 桌面版 CLI，再装 Skill 本身。

Step 1：安装 draw.io 桌面版

# macOS（推荐）
brew install --cask drawio

# Windows：下载安装包
# https://github.com/jgraph/drawio-desktop/releases

# Linux：下载 .deb / .rpm
# 无头导出需要 sudo apt install xvfb

建议 ≥ 30 版本——解锁 Mermaid → .drawio 转换和 ELK 自动布局。

Step 2：安装 Skill

方式一：插件市场（推荐）

# Claude Code
/plugin marketplace add Agents365-ai/365-skills
/plugin install drawio

方式二：npx skills

npx skills add Agents365-ai/365-skills -g

方式三：手动安装

git clone https://github.com/Agents365-ai/drawio-skill.git \
  ~/.claude/skills/drawio-skill

WSL2 用户也不用担心——CLI 通过 /mnt/c 自动识别 Windows 版 exe。

写在最后

drawio-skill 的核心价值，用一句话概括：把画图这件事，从"体力活"变回了"脑力活"。

过去你花在对齐框框、拖线条路上的时间，现在省下来了。它不是在帮你偷懒，而是把你的精力从"摆形状"收回来，聚焦在更重要的事情上——想清楚结构本身。

8600+ Stars 半年就能冲到这个数，说明它踩中了一个真实的痛点：开发者每天都要画图，却没人愿意把画图这件事好好做一遍。

从 11 种图表预设、到 13 个代码提取器、再到 39 个命令行工具脚本——它不是一个"AI 玩具"，而是一套完整的视觉化表达工具链。从架构图到代码结构，从基础设施到 SQL schema，从生成到 diff 到 CI——全都覆盖到了。

如果你也是那种"脑子里有结构、手里画不出来"的开发者，装一个试试。反正零配置，不占资源。

GitHub：https://github.com/Agents365-ai/drawio-skill

流程图别再用PPT硬画了：这个免费工具打开就能用

Fri, 28 Aug 2026 09:08:18 +0800

写论文要画研究框架，做答辩要画流程图，写项目文档还要画数据库和系统架构。

很多人会直接在PPT里插矩形、画箭头。图简单时还能用，一旦节点变多，移动一个框，后面的线和对齐就要全部重调。

这类任务可以换成 draw.io，官方在线编辑器是：

https://www.drawio.com.cn/

它适合画什么？

draw.io 是一个在线制图工具。截至2026年8月27日，官方网页明确写着“free online diagram software”，在线编辑器可以直接进入，没有强制注册步骤。

它内置了流程图、UML、ER数据库图、网络图等常见图形。对大学生和初入职场者来说，常用场景包括：

论文研究框架、毕设系统流程、答辩PPT配图、业务流程、软件模块关系和数据库表结构。

新手用四步就够了

第一步，打开官网后选择文件保存位置。只想快速画一张图，可选“本机”或“浏览器”；需要多设备编辑，可选择已授权的 Google Drive、OneDrive 等云存储。

第二步，选择空白图或模板。第一次用不必研究全部功能，选一个与目标最接近的流程图模板再修改更快。

第三步，从左侧拖入图形，双击输入文字。鼠标指向图形边缘时会出现连接点，向外拖动就能连线。之后移动节点，连线会跟着调整，这正是它比PPT省时的地方。

第四步，完成后先保存 .drawio 源文件，再根据用途导出。PPT配图可选PNG，需要放大仍清晰可选SVG，提交文档可选PDF。

还有两个快捷操作很值得记住：按住 Ctrl 拖动图形，可以快速复制一个同样的节点；选中多个图形后，使用对齐和分布功能，能一次统一间距。比起用鼠标一个个挪，这两步更稳定。

三个让图更清楚的细节

第一，一张图只表达一件事。如果流程需要不停缩小才能看全，就应该拆成总图和子图。

第二，颜色不要太多。一个主色、一个强调色再加黑白灰通常已经足够，颜色应该用来区分类别或状态。

第三，不要只保存导出的图片。PNG和PDF适合使用，.drawio 文件才方便以后继续修改。官方也提醒，如果选择“稍后决定”让数据暂存在浏览器中，在选择“另存为”之前可能并未永久保存。

draw.io 的优势不是一键帮你做出漂亮大图，而是连线、对齐、修改和导出都比通用办公软件更适合制图。下次遇到论文框架或项目流程，可以先用它完成结构，再放进PPT或Word。

告别手动画流程图！AI 一句话生成，直接拿到 draw.io 源文件

Tue, 18 Aug 2026 09:17:51 +0800

如果你经常画流程图，下面这个工具真的建议先收进收藏夹。

以前画一张稍微复杂的流程图，最烦的不是“不会画”，而是一个个节点拖、连线、调位置、改颜色，最后还得手动整理布局。

现在可以直接换个玩法：

你只需要把想画的东西告诉 AI。

比如输入一句：

画一个用户登录流程图，包含账号密码验证、短信验证码两步。

几秒钟后，节点、连线、颜色、布局全都自动生成。

更爽的是，它不是给你一张只能看的图片，而是可以直接生成可编辑的 draw.io 源文件。

拿到手以后，想改哪个节点就改哪个，想调整结构就拖一下，完全不用从头重画。

所以它真正厉害的地方不是“AI会画流程图”，而是：

把原本几十分钟的拖拽排版，变成一句话生成。

对于程序员、产品经理、架构师，甚至平时要做汇报和整理复杂逻辑的人来说，这种工具真的属于用了就很难回去的效率外挂。

如果你还在手动拖 draw.io，这个工具可以直接试试。

PART 01

它是什么，一句话讲清楚

Next AI Draw.io 是一个基于 Next.js 开发的开源 Web 应用，作者 DayuanJiang。它的核心只有一句话：

把大模型接进 draw.io，让你用自然语言创建、修改、增强专业图表。

你可以把它理解成「draw.io 的 AI 增强版」。它没有重复造轮子，而是直接站在了 draw.io 这个 10 年老牌工具的肩膀上——生成的每一张图都是标准 draw.io XML，可以导出、可以二次编辑、可以塞进 Confluence/Notion/飞书文档。

项目地址：https://github.com/DayuanJiang/next-ai-draw-io

PART 02

6个核心功能，每一个都是打工人的刚需

1. 自然语言生成图表：嘴替手画

在左侧聊天框输入需求，右侧实时出图。

示例提示词：

生成一个 RAG 聊天应用的架构图，包含数据摄取、向量数据库、LLM、推理链路。

AI 会自动生成节点、连线、标签、布局，并且调用正确的 AWS/GCP/Azure 官方图标。

2. 图片/手绘草图转可编辑图表

拍一张白板草图或 PPT 截图上传，AI 自动识别结构，生成可编辑的 draw.io 图。再也不用照着图片手搓一遍。

3. PDF/文本文件一键转图

上传技术文档、论文、Markdown 文件，AI 提取核心逻辑，自动转成流程图或架构图。项目 README 明确标注：支持 PDF 与文本文件上传。

4. 版本历史：AI 改坏了能回滚

每次 AI 修改都会留下版本记录。你可以随时查看、恢复到 AI 编辑前的状态——这个设计非常务实，因为 AI 画图不是每次都完美。

5. 云架构图专属优化

对 AWS、GCP、Azure 三大云厂商做了专门支持。官方 README 特别提示：Claude 系列模型在训练数据中见过大量带 AWS/Azure/GCP 图标的 draw.io 图，画云架构时效果最稳。

6. 动画连接器

给节点之间的连线加动态效果，演示架构数据流向、流程运转时，比静态图直观得多。

PART 03

省心玩法：把它塞进Claude/Cursor/VS Code

Next AI Draw.io 不只是网页工具，它还有一个 MCP Server（Model Context Protocol）。

这意味着你可以直接在 Claude Desktop、Cursor、VS Code 里调用它画图。

配置方式简单到离谱：

MCP 配置（JSON）

{  "mcpServers": {    "drawio": {      "command": "npx",      "args": ["@next-ai-drawio/mcp-server@latest"]    }  }}

Claude Code 一行命令

claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest

然后你可以对 Claude 说：

创建一个展示用户认证流程的流程图，包含登录、MFA 和会话管理。

图表会实时弹窗显示在你的浏览器里。

这一举动真正改变了工作流：你正在写代码、改文档、开评审会，AI 直接在你屏幕上把图产出了。

PART 04

模型支持：豆包赞助Demo，但不止豆包

项目官网明确说明：

演示站点现已接入强大的 glm-4.7 模型，新用户注册火山引擎 ARK 平台可领 50 万免费 Token。

但项目本身是模型中立的，支持 14+ 家主流 AI 提供商：

字节跳动豆包 · OpenAI · Anthropic（Claude）· Google AI / Vertex AI
AWS Bedrock（默认）· Azure OpenAI · DeepSeek · SiliconFlow
Ollama（本地模型）· OpenRouter · ModelScope · SGLang · Vercel AI Gateway

官方推荐模型：Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1。

为什么强调 Claude 画云架构更稳？因为 draw.io XML 是长文本+严格格式约束，Claude 在这类带云厂商 Logo 的图上训练量更大，出图成功率更高。

PART 05

4种用法，从打开即用到私有化部署

方式一：在线 Demo（零门槛）

直接访问：https://next-ai-draw-io.jiang.jp/

支持 BYOK（Bring Your Own API Key），密钥只保存在浏览器本地，不上传服务器。

方式二：桌面应用（离线可用）

从 GitHub Releases 下载 Windows / macOS / Linux 原生客户端。

方式三：Docker / 本地部署（数据安全）

本地部署命令

git clone https://github.com/DayuanJiang/next-ai-draw-iocd next-ai-draw-ionpm installcp env.example .env.local

适合企业内网、对数据隐私有要求的团队。

方式四：一键云端部署

Vercel（官方推荐）
腾讯云 EdgeOne Pages（部署还送每日 DeepSeek 免费额度）
Cloudflare Workers

适合人群与用法

PART 06

3个提示词模板分享

模板 1：流程图

画一个电商下单流程图，包含浏览商品、加入购物车、提交订单、支付、发货、确认收货、售后 7 个节点，标出异常分支。

模板 2：云架构图

生成一个 AWS 架构图：用户通过 CloudFront 访问 React 前端，API Gateway 调用 Lambda，Lambda 读写 RDS PostgreSQL，使用 S3 存储静态资源。

模板 3：图片复刻

（上传一张手绘草图或 PPT 截图）请把这张图转成可编辑的 draw.io 流程图，保持原结构，自动美化布局。

几个小提醒:

1. Demo 站有额度限制。高频使用建议配置自己的 API Key，或本地部署。

2. 模型能力决定出图质量。小模型容易把 XML 写错，导致图渲染失败。建议用官方推荐的 Claude / GPT / Gemini / DeepSeek 系列。

3. 复杂图仍需人工微调。AI 出的是「80 分初稿」，边界情况、品牌规范、特殊布局还要人过一遍。

4. 美/欧等地区有合规限制。部分模型提供商对使用区域有单独授权要求，企业部署前先查 Provider 配置文档。

PART 07

写在最后

很多人会疑惑：AI 画图工具那么多，为什么偏偏 next-ai-draw-io 火了？

我觉得答案就两点：

第一，它不造新轮子，而是把 AI 接进了最成熟的轮子。 draw.io 用了十几年，生态、格式、习惯都在，next-ai-draw-io 没有让用户换战场。

第二，它真的懂工作流。从自然语言到图片复刻，从网页到桌面到 MCP Server，从豆包 Demo 到自己私有部署——它覆盖了想试试到团队规模化使用的完整路径。

如果你还在用鼠标一个个拖流程图节点，不妨花 3 分钟打开 Demo 试试。

毕竟，能说话解决的事，就别动手了。

流程图、网络图、方案图怎么画？用draw.io Desktop在本地完成

Thu, 13 Aug 2026 09:18:52 +0800

这个工具解决什么问题

/ PROBLEM

draw.io Desktop解决的是“把结构关系画清楚”：把步骤、设备、数据流、责任边界或网络节点整理成可编辑的图，再导出为图片、PDF等成果。它适合流程图、组织结构图、软件架构图、网络拓扑、平面布局和通用工程示意。

它不是专业CAD，也不是P&ID、继电保护整定或电气设计软件。图中放入泵、阀门、服务器等图形，并不会自动完成工艺计算、设备选型、标准校验或安全审查。它更适合沟通方案、梳理逻辑和制作通用示意图。

— draw.io Desktop官方编辑界面，图片来自jgraph/drawio-desktop官方GitHub仓库

draw.io Desktop是什么

/ SECTION

draw.io Desktop是draw.io编辑器的官方桌面版本，由JGraph维护，采用Apache-2.0许可证，核心软件免费开源。截至2026年8月13日，官方桌面仓库约有6.26万颗Star，最近一次提交为2026年8月7日；核验到的最新正式版本为v31.1.8，同日发布，项目仍在维护。

官方仓库为Windows提供安装版、MSI和免安装版，同时发布macOS与Linux构建。MSI按用户安装，不要求管理员权限；Windows免安装版可以直接运行，但不会注册文件关联。单位电脑仍应先确认软件白名单、来源校验和终端策略，不应把“免安装”理解为可以绕过管理要求。

本文依据官方仓库、Release和项目文档核验，未在单位指定Windows终端安装并跑通业务样例。下文用于帮助选型和规划试用，实际界面、导入导出能力及兼容性应以目标版本和本机测试为准。

适合哪些使用场景

/ USE CASES

· 技术人员用公开流程和脱敏节点，梳理设备巡检、问题闭环或技术攻关步骤，形成可讨论的流程图。

· 信息化人员把公开网络结构和示例地址整理成拓扑图，用于方案沟通；正式配置仍回到受控台账和专业工具。

· 培训教师把操作步骤、角色分工和判断分支画成教学图，插入课件或讲义。

· 科研与创新团队把技术路线、模块关系、实验流程和方案对比画成统一风格的图。

· 综合办公人员制作组织图、时间线、会议流程和汇报示意，减少在文档中反复拖动形状。

涉及油气工艺、电气一次二次、消防、仪控和危险区域的图，只能作为经专业人员确认后的表达载体。不要把通用图形库中的符号直接当成符合本单位标准的工程符号，也不要让示意图替代正式设计文件。

实际怎么用

/ HOW TO USE

下面五步不是对官方界面的逐按钮复刻，而是面向首次使用者的操作说明：先在编辑器外想清楚问题与节点，再搭主流程、统一样式，最后保存源文件并复核导出成果。

— 从确定问题、列节点、搭骨架、统一样式到导出复核的draw.io五步工作流，自制操作示意

1. 先确定这张图要回答什么

不要一上来就拖图标。先写出读者需要看懂的一句话，例如“问题从发现到关闭经过哪些环节”“数据从现场采集到报表经过哪些系统”。然后只保留与这句话有关的节点。

2. 用公开或脱敏材料列出节点

把步骤、角色、设备或系统名称先写成清单。涉及内部系统时，演示阶段可用“采集端A”“业务系统B”等占位名称，去掉真实IP、账号、人员信息、产量、压力和未公开方案细节。

3. 选择简单图形并统一规则

用矩形表示任务或模块，菱形表示判断，箭头表示方向。相同类型使用相同颜色、字号和边框，连接线尽量避免交叉。图形越多越要分层，不要试图把全部细节塞进一张图。

— 左侧先列出收到问题、判断资料、分析处理和复核关闭等节点，右侧再整理为带判断分支的主流程骨架，自制操作示意

4. 保存可编辑源文件

优先保留.drawio源文件，并在文件名或归档记录中写清版本、日期和编制人。导出的PNG或PDF方便查看，但不应成为唯一底稿。正式资料还要按本单位文件管理要求设置权限、备份和版本控制。

5. 导出后做一次内容复核

导出前检查箭头方向、判断分支、单位、编号、图例和敏感信息；插入WPS、Word或PPT后，再检查缩放后的字号与线条是否清楚。涉及专业流程时，应由对应专业人员复核内容，而不只是检查版式。

— draw.io导出前、保存时和插入文档后的三阶段复核清单，自制操作示意

谁用：技术、信息化、培训和科研人员；用什么材料：公开或脱敏的步骤与节点；做什么：整理关系、连线和分层；得到什么：可编辑源图及用于文档、课件的导出图。

项目信息

/ PROJECT INFO

项目名称：draw.io Desktop

主要用途：在本机绘制流程图、系统结构图、网络拓扑、组织图和通用工程示意

适合人群：技术人员、信息化人员、培训教师、科研与创新团队、综合办公人员

部署方式：Windows安装版、MSI或免安装版；同时支持macOS和Linux

使用门槛：基础流程图较低；复杂图的分层、样式规范和专业符号需要学习与复核

账号与API：桌面基础绘图不要求账号或第三方API；安装包下载和默认更新检查会联网

数据边界：官方说明桌面版除更新检查外与互联网隔离，不发送图表数据或使用分析数据；更新检查可按官方方式关闭。仍需审查文件存放、同步盘、操作系统备份和人工导出行为

费用边界：核心软件免费开源；自有终端、文件服务器、备份、运维，以及Confluence、Jira等商业集成可能产生费用

许可证：Apache-2.0；内置图标和模板另有使用条款，成品图可按官方条款使用，二次分发软件资产时需单独核验

GitHub仓库：https://github.com/jgraph/drawio-desktop

最新Release：https://github.com/jgraph/drawio-desktop/releases/tag/v31.1.8

核心编辑器仓库：https://github.com/jgraph/drawio

使用时要注意

/ CAUTIONS

· 从官方Release或单位软件分发渠道获取安装包，按单位要求核验版本、签名或哈希；不要从不明下载站获取。

· 桌面版的“本地处理”不等于文件天然安全。若把.drawio或导出图保存到公网同步盘、通过聊天工具发送，数据仍会离开受控环境。

· 官方说明应用启动时会检查GitHub更新，并从GitHub托管的存储下载更新；受控内网可依据官方参数关闭更新检查，再由管理员统一更新。

· 不在图中放真实账号口令、完整网络地址、人员隐私、SCADA数据、生产经营数据或未公开技术方案；确需处理时，应按资料分级和授权要求执行。

· 从外部收到的.drawio文件也应视为外来文件。官方项目近期曾修复与特制图表文件有关的安全问题，应保持版本更新，并在受控环境中打开不可信文件。

· 通用流程图不能替代CAD、P&ID、电气设计、保护整定和安全分析。工程符号、介质流向、联锁逻辑与设计变更必须走专业审查。

· 图形库和模板有各自条款；如果要把其中素材打包进软件、插件或商业模板库，应另行核验许可，不要只看主仓库许可证。

适不适合你

/ WHO IT FITS

如果你经常需要把流程、系统或方案关系讲清楚，希望在断网或内网环境中编辑，并愿意保留可编辑源文件，draw.io Desktop值得列入试用清单。它尤其适合先用公开或脱敏样例建立本单位的配色、字号、连接线和图例规范。

如果你的核心任务是正式机械制图、P&ID、电气设计、三维建模或需要自动校验的工程图，应该优先使用对应专业软件。draw.io Desktop可以辅助沟通，但不应承担它没有的计算、校核和设计责任。

最稳妥的起点，是先拿一张公开流程做小样：画清10个以内节点，保存源文件，导出一次，再让最终读者判断是否真的看懂。

Claude Code 里一句话出图：draw.io MCP 实操指南

Sun, 09 Aug 2026 09:27:10 +0800

一张 RAG 在线推理链路图，从「帮我画张 RAG 流程图」到浏览器弹出可编辑矢量图，只用了 30 秒。

上图是我在 Claude Code 里用一句话生成的——没有打开 draw.io、没有拖拽任何形状、没有调过任何颜色。这篇文章就来讲清楚：怎么装、怎么用、怎么用好。

一、这是什么

draw.io MCP 是一个 MCP（Model Context Protocol）服务器，让 Claude Code 可以直接操控 draw.io 画图。你只需要用自然语言描述想要什么图，Claude 就会生成 mxGraph XML，推送给你本地的 draw.io（浏览器或桌面版）渲染出来。

它有 4 个核心能力：

工具	作用
`open_drawio_xml`	用 XML 手摆节点，精确控制布局和样式
`open_drawio_mermaid`	用 Mermaid 语法快速出图
`open_drawio_csv`	从 CSV 数据生成组织结构图类图表
`search_shapes`	搜索 draw.io 内置的 ~10000 个行业图标（AWS、K8s、Cisco 等）

实际使用中，**90% 的场景用 **open_drawio_xml——它给了你像素级的控制力，画出来的图可以直接发博客、放 PPT、贴公众号。

二、安装配置

方式一：最推荐

直接告诉cluade code让他帮你安装MCP

方式二：添加 MCP 配置

在你的 Claude Code 项目配置中（.claude.json 或 .mcp.json），加入：

{
  "mcpServers": {
    "drawio": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@drawio/mcp"],
      "env": {}
    }
  }
}

两种配置方式：

全局生效（所有项目都能用）：

# 编辑 ~/.claude.json，在 "mcpServers" 字段下添加
claude mcp add drawio --command "npx" --args "-y" "@drawio/mcp"

单项目生效（只对当前目录生效）：

在项目根目录创建 .mcp.json，写入上面的配置即可。

配置完成后，重启 Claude Code（或在对话中输入 /mcp 查看 drawio 是否已连接），看到 drawio 的工具出现在 MCP 工具列表中就算成功。

三、实操用法

很简单，通过一句话描述就可以了如下图：

提示词内容如下：

帮我画一张 RAG 在线推理链路图，包含查询改写、多路召回、重排序、LLM 生成四个阶段。有两个短路出口：
歧义检测→反问澄清、召回为空→兜底回复。底部加图例

效果如下：

四、总结

draw.io MCP = 零学习成本的矢量图生产工具。

以前画一张博客配图，打开 draw.io → 拖矩形 → 对齐 → 调色 → 连线 → 导出，半小时过去了。

现在对着 Claude Code 说一句话，浏览器弹出一张可以直接用的图，不满意就再描述一句让它改。关注点从「怎么画」完全转移到「画什么」——这才是 AI 工具该有的体验。

这套工具链已经成了我写技术文章和做 PPT 的标配。如果你也在用 Claude Code，强烈建议花 5 分钟配上。

画流程图还要买付费 Visio？这款开源工具全功能免费，在线离线都能用

Sun, 19 Jul 2026 08:58:40 +0800

职场办公、项目推进、技术设计里，画图表是绕不开的需求：做方案要画流程图、理架构要画拓扑图、做汇报要画组织结构图、开发要画 UML 图。可很多人都被工具卡住：专业的 Visio 价格昂贵，个人和小团队根本舍不得买；在线绘图工具要么基础功能就要开会员，导出高清图、去除水印统统收费；小众免费工具又素材少、格式不兼容，画出来的图不专业，分享给同事还打不开。

其实画专业图表根本不用花冤枉钱。今天给大家分享一款全球公认的开源绘图神器 ——Draw.io，一款完全免费开源的全能图表绘制工具，从流程图、架构图到思维导图、UML 图全覆盖，不用注册登录，在线就能用，也能下载桌面版离线使用，全功能无限制无广告，堪称付费 Visio 的绝佳替代品。

功能速览

Draw.io是一款遵循 Apache 2.0 协议的开源图表绘制工具，核心优势集中在全免费无限制、多场景图表覆盖、在线离线双模式、数据自主可控四大方面，支持 Windows、macOS、Linux 全系统，也可直接通过浏览器在线使用。它内置海量图形素材与行业模板，支持流程图、网络拓扑图、UML、组织结构图、思维导图、电路图等数十种图表类型，兼容主流云存储与协作平台，导出无水印、格式丰富，无论是个人办公还是团队协作都能轻松胜任。

✅ 适合人群职场办公族、产品经理、项目经理、程序开发者、运维工程师、教师与学生、需要绘制专业图表的设计人员

✅ 高频使用场景工作方案与业务流程梳理、项目架构与技术方案设计、团队组织结构与汇报图示、软件需求与 UML 建模、网络拓扑与机房规划、教学课件与知识梳理可视化

使用教程

Draw.io软件简单使用教程：我这里以其中一个流程图功能作为例子。简单使用一下，大家可以举一反三。

软件界面

版本说明与获取方式

软件名称:Draw.io免费、开源‌的图表绘制工具

版本:29.6.6

测试系统：Windows 11专业版

结尾总结

Draw.io是一款几乎零短板的免费绘图工具，它既有专业软件的全场景覆盖能力，又有在线工具的便捷性，再加上市面少有的完全免费、开源无广告、数据自主可控的特性，无论是个人日常办公画图，还是团队协作做技术方案，都能完美胜任，堪称电脑里值得常备的效率神器。

Draw.io是什么？免费开源流程图神器，办公、设计、项目管理都能用

Sun, 19 Jul 2026 08:58:05 +0800

很多人做流程图、架构图、思维导图时，第一时间想到的是 Visio、XMind 等软件。

但如果只是需要：

画流程图
制作网络拓扑图
设计系统架构
梳理项目流程
绘制组织结构图

其实有一款免费工具非常值得收藏——Draw.io（现称 diagrams.net）。

它免费、开源、无广告，而且支持网页端和本地客户端，不需要复杂学习成本，打开就能画。

📌 Draw.io是什么？

Draw.io 是一款专业的在线绘图工具，主要用于创建各种结构化图表。

目前官方名称为：

diagrams.net

Draw.io 这个名字依然被大量用户使用。

它最大的特点：

✅ 免费使用

✅ 开源项目

✅ 支持离线运行

✅ 支持 Windows / macOS / Linux

✅ 支持浏览器直接编辑

✅ 支持多种文件格式导入导出

简单理解：

它就是一个免费的 Visio 替代工具。

⚙️ Draw.io主要用途

1️⃣ 流程图制作

这是 Draw.io 最常用的功能。

例如：

工作流程：

开始
 ↓
提交申请
 ↓
审核
 ↓
完成

适合：

公司流程整理
产品设计
项目管理
工作汇报

相比Word里的普通形状，Draw.io调整起来更加方便。

2️⃣ 软件架构图

对于程序员、产品经理来说非常实用。

可以制作：

系统架构图
前后端结构图
数据库关系图
API调用流程

例如：

用户端

↓

服务器

↓

数据库

↓

第三方接口

整个系统逻辑一眼清晰。

3️⃣ 网络拓扑图

网络工程人员经常使用。

支持：

路由器
交换机
防火墙
服务器
云服务架构

内置大量网络设备图标。

制作机房结构图非常方便。

4️⃣ 思维导图

虽然 Draw.io 不是专业思维导图软件。

但简单整理：

学习笔记
产品规划
项目拆解

完全够用。

优势是：

思维导图和流程图可以混合制作。

🧩 Draw.io核心功能解析

📂 丰富模板库

打开软件后，可以直接选择模板。

包含：

📌 流程图

📌 UML图

📌 网络图

📌 ER数据库图

📌 甘特图

📌 组织结构图

新手不用从空白页面开始。

🖱 拖拽式编辑

操作逻辑类似PPT。

步骤：

选择图形
拖入画布
修改文字
添加连接线

学习成本非常低。

☁ 多平台同步

支持保存到：

Google Drive
OneDrive
Dropbox
GitHub

也支持：

本地保存文件。

适合团队协作。

📦 支持多种格式

可以导出：

PNG
JPEG
SVG
PDF
HTML

如果制作报告、论文、方案文档，非常方便。

🛠 实用操作技巧

技巧1：开启自动连接

制作流程图时：

拖动图形边缘连接点。

软件会自动生成连接线。

不用手动画箭头。

效率提升明显。

技巧2：使用快捷复制

大量重复节点：

直接：

Ctrl + D

快速复制。

制作：

流程节点

服务器模块

组织架构

非常省时间。

技巧3：统一调整样式

选中多个图形。

可以批量修改：

字体
颜色
边框
大小

避免一个个调整。

技巧4：保存源文件

建议保存：

.drawio

格式。

不要只导出图片。

因为：

图片无法继续编辑。

源文件可以随时修改。

🚀 版本更新变化

Draw.io不像商业软件采用传统版本号更新，而是持续迭代。

主要升级方向：

diagrams.net 新版重点

1. 界面持续优化

更新：

工具栏布局
图形搜索
编辑体验

让新用户更容易上手。

2. 模板持续增加

新增：

软件架构模板
云服务图标
企业流程模板

覆盖场景越来越丰富。

3. 文件兼容增强

不断优化：

Visio文件导入
SVG支持
PDF输出

方便企业环境使用。

4. 离线版本增强

桌面版支持：

Windows

macOS

Linux

即使没有网络，也可以继续编辑。

🆚 Draw.io VS Visio

对比	Draw.io	Visio
价格	免费	付费
开源	✅	❌
上手难度	简单	中等
企业功能	较丰富	更完整
流程图	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
架构图	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
专业企业管理	⭐⭐⭐⭐	⭐⭐⭐⭐⭐

👥 适合哪些人？

✅ 学生

适合：

课程作业
毕业设计
思维整理

✅ 程序员

适合：

架构设计
UML建模
技术文档

✅ 产品经理

适合：

产品流程
用户体验设计
需求分析

✅ 普通办公用户

适合：

工作流程图
汇报材料
项目规划

💡 使用建议

如果你的需求是：

✅ 免费画流程图

✅ 制作技术架构图

✅ 替代Visio基础功能

✅ 偶尔制作项目图表

Draw.io非常合适。

但如果需要：

大型企业流程管理
专业数据库建模
深度Office生态集成

Visio仍然更强。

✅ 总结

Draw.io最大的优势不是功能堆叠，而是简单、免费、够专业。

对于大多数用户来说，它已经覆盖了日常90%以上的绘图需求。

无论是学生整理笔记、程序员设计架构，还是职场制作流程图，都可以快速上手。

如果电脑里只想保留一款免费的流程图工具，Draw.io值得长期安装。

3 类资料变流程图：Next AI Draw.io 适合谁用

Sun, 12 Jul 2026 09:01:03 +0800

MAIN ACCOUNT NOTE

摘要：Next AI Draw.io 是一个把自然语言、PDF、文本和图片接到 draw.io 里的开源工具。它最有用的地方，不是生成一张好看的图，而是把流程图变成还能继续改的 draw.io 文件。

很多人画流程图，卡住的地方不是不知道流程是什么。

真正烦的是动手那一步。

会议纪要里已经写了一堆步骤，业务流程也大概想清楚了，但一打开 draw.io，还是要从第一个方框、第一根箭头开始拖。拖完还要调位置，改文案，补关系。你只是想把脑子里的东西摆清楚，结果先被画布消耗了一轮耐心。

Next AI Draw.io 解决的就是这个动作。

它是一个开源项目，核心做法是把 AI 接进 draw.io 图表里。你可以用自然语言告诉它要画什么，它先生成一版图；觉得不对，再继续用聊天的方式改节点、连线和布局。

这和普通 AI 画图不太一样。

普通 AI 生成一张图，很多时候结果只是看着像。你后面想改一个节点、调一条线，往往还是要重来。Next AI Draw.io 更关键的点是：它处理的是 draw.io 图，后面还可以继续手动编辑，也可以继续让 AI 改。

所以它不是一个帮我画张漂亮图的工具，更像是把流程图起草这一步，从手动拖拽改成先说清楚、再调整。

Next AI Draw.io 的 GitHub 仓库页面

按项目 README 看，它支持几类常见输入：

1. 直接用一句话生成图。比如让它画登录流程、审批流程、系统架构图。
2. 上传图片，让它参考已有图重新整理。
3. 上传 PDF 或文本文件，从现有材料里抽取内容再生成图。

这三个入口，其实对应的是同一个问题：别让我总从一张白纸开始。

Next AI Draw.io 的输入、生成和继续修改关系

我觉得它最适合的场景，是已经有材料，但材料还没有变成图的时候。

比如开完会以后，纪要里已经有谁先做、谁审批、失败怎么回退；写方案时，文档里写着输入、处理、输出、复核；梳理一个业务流程时，聊天记录里有一堆零散步骤。以前你要先读一遍，再自己画。现在可以先把材料喂进去，让它出一个初稿。

初稿不一定一次就对。

但只要它能把 60 分的结构先摆出来，后面你再补节点、改顺序、删多余关系，就比从零拖图轻很多。

我查了一下仓库信息。Next AI Draw.io 的 GitHub 仓库是 DayuanJiang/next-ai-draw-io。截至 2026 年 7 月 12 日，GitHub API 显示它有 33,369 个 stars、3,611 个 forks、18 个 release，最新 release 是 v0.4.16，发布时间是 2026 年 5 月 21 日。

这些数字不能直接证明它一定好用，但能说明它不是一个刚冒出来、没人维护的小项目。对工具分享来说，这个信息够重要：至少值得点进去看 README、试 Demo，再决定要不要放进自己的工作流。

如果你想上手，路径也不复杂。

第一步，先打开它的在线 Demo。README 里写了可以直接试用，不用先安装。Demo 有使用额度；如果想绕开额度，可以在聊天面板的设置里配置自己的模型 API key。

第二步，如果你担心线上 Demo 不稳定，或者想长期用，可以看 Releases 页面下载桌面端。项目支持 Windows、macOS 和 Linux。

第三步，如果你有部署经验，也可以自己跑。README 给了基本命令：克隆仓库、安装依赖、复制环境变量文件，然后用 npm run dev 启动。它还提供 Docker、Vercel、Cloudflare Workers 和 EdgeOne Pages 的部署方式。

我不建议所有人一上来就本地部署。

如果你只是偶尔画一个箭头、一个简单三步流程，真的没必要为了省十分钟，先给自己装一套工程环境。打开 draw.io 手动拖一下，可能更快。

但如果你经常做这几类事，它就值得试：

• 写汇报，需要把文字材料整理成流程图；

• 做方案，需要把输入、处理、输出关系画清楚；

• 开会复盘，需要把讨论结果变成可继续修改的图；

• 梳理系统或业务流程，需要反复调整节点和连线。

Next AI Draw.io 更适合高频流程图场景

它的边界也要先说清楚。

第一，复杂流程仍然要人工复核。AI 能帮你起草结构，但业务里的审批条件、异常分支、责任人关系，不能只看图顺不顺眼。

第二，模型成本和额度要考虑。在线 Demo 能试，但长期稳定使用，可能还是要配置自己的 API key 或自己部署。

第三，不要把它当成万能画图工具。它强在 draw.io 这类结构化图表，不是海报设计，也不是随手生成插画。

我会把它放进资料变结构图的工具箱里，而不是放进 AI 画图那一类。

这个区别挺关键。

AI 画图解决的是视觉结果。Next AI Draw.io 更像解决工作中间层：先把文字、PDF、旧图里的关系整理出来，再让人继续改。对真正要拿图去沟通、开会、写方案的人来说，这比一张漂亮但改不动的图更实用。

所以我的使用建议很简单：如果你手里经常有成堆文字材料，却总要手动画流程图，可以先用在线 Demo 试一次。拿一段会议纪要或业务步骤喂进去，看它生成的图能不能帮你省掉第一轮拖拽。

如果只是偶尔画图，就不用急着装。