Drawio 中文官网

AI + Draw.io + PPT，拿去直接部署，解放你的双手！

Mon, 08 Jun 2026 15:13:17 +0800

画不过来，真画不过来。小手✋🏻画麻了，也画不过来呀😂。一个是自己写东西，包括推文、课程、视频，里面所需的绘图素材。另外一个是工作中有很多的架构设计要通过 draw.io 流程图来体现，以及配套的用 PPT 来讲解。真的，这画图要占掉整个内容创作的40%时间。咋弄？

好在，俺自己会做，还能分享给你！

我需要的这种 draw.io 画图、ppt 制作，不是说市面上的网页工具，随便给我来一下就行了。而是要深度的结合我所在场景的，设计文档、工程代码、会议记录等各项资料信息综合绘制的设计图和ppt讲解/分享内容，做深度绑定后的绘制处理。否则只是自嗨，感觉好看而已，是不行的。

除此之外，往往这类的内容，还有一定的安全考量，很多信息资料是不能对外的。我有深度测试，qwen3.6:35b 绘制出来的 draw.io/ppt 完全没问题。所以，像是个人或者公司有点点能力部署下本地 ollama 内部自己做一些绘图或者写代码（轻量一些的）完全可以。

如果能拿下一台黄仁勋 DGX Spark 128G 那部署个本地模型自己玩，还是挺爽的。

好啦，那接下来小傅哥就来分享下这套自研的绘图服务（提供了部署脚本）的部署，演示和演示。如果想深度折腾，还可以学习下对应的智能体源码，那你就可以做更多扩展，如 AI + Docx、AI +

临时体验地址：http://81.70.245.73:3000/ - 打开后，可以添加你的LLM进行测试。如果后面换体验地址，我会放到评论区。

1. 登录&首页

这次小傅哥扩展了 ai draw 绘图的能力，可以有更强的用户体验。此外还加入了 ai ppt 能力。
按照这样发展，以前就成了自己的一个 AI 能力的 “飞书” 了，把 AI 深度结合到自动化办公里。如果你愿意搞一下，绝对是有很多人使用的。其实是，越不懂 AI 的，也需要成熟的 AI 产品。

2. 模型配置

对话时，用户可以选择自己添加一个对话 LLM，点击添加管理模型后，可以自行配置操作。

3. draw.io

这次小傅哥还优化了关于 draw.io 画图的操作，增强了画图交互，可以一步步的像人一样帮你绘制出来。
注意，模型越好，绘制出来的图的效果越榜。如图，使用的是 qwen3.6:35b 绘制出来的，也还不错。

4. ppt

绘制 ppt 操作是小傅哥本次在 ai + draw.io 的智能体项目中，新增加的内容。后续还会陆续迭代其他场景。你也可以自己结合这套项目进行扩展，做一款自己的 AI 智能飞书。

二、部署脚本

# /usr/local/bin/docker-compose -f /docs/dev-ops/environment/environment-docker-compose-2.4.yml up -d
version: '3.8'
# docker-compose -f docker-compose-app.yml up -d
# 你需要修改system为你自身系统的仓库名
services:
## 后端服务，注意修改 智能体 DRAWIOAGENT 配置。
  ai-draw-io-app:
    image: registry.cn-hangzhou.aliyuncs.com/fuzhengwei/ai-draw-io-app:1.8
    container_name: ai-draw-io-app
    restart: on-failure
    ports:
      - "8091:8091"
    environment:
      - TZ=PRC
      - SERVER_PORT=8091
      # 智能体 DRAWIOAGENT 配置，更换 base_url、api_key、model、以及百度搜索的 api_key 「https://console.bce.baidu.com/iam/?_=1753597622044#/iam/apikey/list」
      - AI_AGENT_CONFIG_TABLES_DRAWIOAGENT_MODULE_AI_API_BASE_URL=https://apis.itedus.cn
      - AI_AGENT_CONFIG_TABLES_DRAWIOAGENT_MODULE_AI_API_API_KEY=sk-S2YffPknMOEbapquA84c9004294248568d1a3fDdAfA137C9
      - AI_AGENT_CONFIG_TABLES_DRAWIOAGENT_MODULE_AI_API_COMPLETIONS_PATH=v1/chat/completions
      - AI_AGENT_CONFIG_TABLES_DRAWIOAGENT_MODULE_CHAT_MODEL_MODEL=gpt-4.1
      - AI_AGENT_CONFIG_TABLES_DRAWIOAGENT_MODULE_CHAT_MODEL_TOOL_MCP_LIST_0_SSE_NAME=baidu-search
      - AI_AGENT_CONFIG_TABLES_DRAWIOAGENT_MODULE_CHAT_MODEL_TOOL_MCP_LIST_0_SSE_BASE_URI=http://appbuilder.baidu.com/v2/ai_search/mcp/
      - AI_AGENT_CONFIG_TABLES_DRAWIOAGENT_MODULE_CHAT_MODEL_TOOL_MCP_LIST_0_SSE_SSE_ENDPOINT=sse?api_key=bce-v3/ALTAK-WjK8NIh3txZo7rXXEjhri/e2f09d53de961bcaf2609b76c7c7a7e6d0f05da3
      - AI_AGENT_CONFIG_TABLES_DRAWIOAGENT_MODULE_CHAT_MODEL_TOOL_MCP_LIST_0_SSE_REQUEST_TIMEOUT=500000
      - AI_AGENT_CONFIG_TABLES_PPTAGENT_MODULE_AI_API_BASE_URL=https://apis.itedus.cn
      - AI_AGENT_CONFIG_TABLES_PPTAGENT_MODULE_AI_API_API_KEY=sk-S2YffPknMOEbapquA84c9004294248568d1a3fDdAfA137C9
      - AI_AGENT_CONFIG_TABLES_PPTAGENT_MODULE_CHAT_MODEL_MODEL=gpt-4.1
      - AI_AGENT_CONFIG_TABLES_PPTAGENT_MODULE_AI_API_COMPLETIONS_PATH=v1/chat/completions
      - AI_AGENT_CONFIG_TABLES_PPTAGENT_MODULE_CHAT_MODEL_TOOL_MCP_LIST_0_SSE_NAME=baidu-search
      - AI_AGENT_CONFIG_TABLES_PPTAGENT_MODULE_CHAT_MODEL_TOOL_MCP_LIST_0_SSE_BASE_URI=http://appbuilder.baidu.com/v2/ai_search/mcp/
      - AI_AGENT_CONFIG_TABLES_PPTAGENT_MODULE_CHAT_MODEL_TOOL_MCP_LIST_0_SSE_SSE_ENDPOINT=sse?api_key=bce-v3/ALTAK-WjK8NIh3txZo7rXXEjhri/e2f09d53de961bcaf2609b76c7c7a7e6d0f05da3
      - AI_AGENT_CONFIG_TABLES_PPTAGENT_MODULE_CHAT_MODEL_TOOL_MCP_LIST_0_SSE_REQUEST_TIMEOUT=500000
    volumes:
      - ./log:/data/log
    logging:
      driver: "json-file"
      options:
        max-size: "10m"
        max-file: "3"
    networks:
      - my-network

## 前端服务，注意 image 如果你有自己的镜像，记得更换。
  ai-draw-io-front:
    image: registry.cn-hangzhou.aliyuncs.com/fuzhengwei/ai-draw-io-front:1.7
    container_name: ai-draw-io-front
    restart: always
    ports:
      - "3000:3000"
    environment:
      # 修改 http://192.168.1.110:8091/api/v1 为你的IP地址。
      - NEXT_PUBLIC_API_BASE_URL=${NEXT_PUBLIC_API_BASE_URL:-http://81.70.245.73:8091/api/v1}
      - NODE_ENV=production

networks:
  my-network:
    driver: bridge

【可选】ai-draw-io-app 下的 LLM 相关的，地址、key、模型，可选修改。如果修改了，则会作为默认模型使用。如果不修改，就是项目启动后，你要自己添加一个模型使用。
【必须】ai-draw-io-front 前端应用，要访问你的服务端地址，NEXT_PUBLIC_API_BASE_URL 的IP 是必须修改为你的服务器的 IP
【必须】云服务器开放安全组开放端口 8091、3000

好啦，拿去体验吧。如果想把源码也学习，扩展自己的功能，那么可以访问项目地址：https://bugstack.cn/md/project/ai-agent-scaffold/ai-agent-scaffold.html

三、工程介绍

ai + draw.io/ppt 是一套基于 ai agent 脚手架（spring ai + google adk）实现的智能体，这套智能体可以为很多业务场景提供基础服务，快速完成智能体的构建。

项目01；《ai + draw.io/ppt》，地址：https://t.zsxq.com/035hj
项目02；《MobileOpenClaw 智能手机》，地址：https://t.zsxq.com/dx4wS
项目03；《walissh ai shell 智能终端》，地址：https://t.zsxq.com/s83De

1. 后端工程

智能体的核心流程都在后端，而且可以通过配置的方式进行使用，这也是这套脚手架的魅力。

2. 前端工程

前端工程主要负责渲染操作，对接服务端接口。这样的会，以后想做一些安全控制也会非常容易。同时如果想对智能体统一的加 skills、mcp，也更加方便。

Next AI Draw.io：用自然语言画出专业架构图

Thu, 04 Jun 2026 15:15:09 +0800

导语

在 AI 时代，我们每天都在和数据打交道——论文、报告、架构设计……但你有没有想过：能不能像和 ChatGPT 聊天一样，直接用一句话就画出一张专业的架构图？

这就是 Next AI Draw.io 想要解决的问题。它是一个开源的 Next.js Web 应用，把 AI 大模型的能力和 draw.io 图表引擎深度整合，让你用自然语言就能创建、修改和增强各类图表。

最近，我在分析「AI 对全球就业市场的结构性影响」时，用这个工具完成了从数据收集、图表设计到可视化呈现的全流程。下面就把这个宝藏工具介绍给大家。

成果展示：

项目介绍：Next AI Draw.io

项目概览

Next AI Draw.io（GitHub: DayuanJiang/next-ai-draw-io）是一个开源的AI驱动图表创建工具，Star数持续增长，版本v0.4.16。它将AI大模型的自然语言理解能力与draw.io的图表渲染引擎深度整合。

核心特性

- LLM驱动的图表创建：通过自然语言命令直接创建和操控draw.io图表

- 图片图表复制：上传现有图表或图片，AI自动复制并增强

- PDF/文本文件上传：从文档中提取内容并生成图表

- AI推理显示：支持OpenAI o1/o3、Gemini、Claude等模型的思考过程展示

- 版本历史：完整的版本控制，追踪所有图表修改

- 多提供商支持：OpenAI、Anthropic、DeepSeek、Ollama、Google、Azure等14+AI提供商

- MCP Server集成：可与Claude Desktop、Cursor、VS Code等AI IDE联动

快速上手

git clone https://github.com/DayuanJiang/next-ai-draw-io

cd next-ai-draw-io && npm install

cp env.example .env.local && npm run dev

然后打开 http://localhost:6002，在Settings中配置AI API Key即可使用。

未来可实现项目推荐

1. AI 学术论文架构图自动生成器

描述：输入论文摘要或大纲，AI自动生成研究框架图、技术路线图、因果关系图等学术图表。

技术栈：Next AI Draw.io + LangChain + 学术数据库API

难度：中等

2. AI 数据仪表盘联动系统

描述：将Next AI Draw.io与实时数据源对接，用户用自然语言描述需求，AI自动生成交互式仪表盘。

技术栈：Next AI Draw.io + D3.js + WebSocket + 数据库

难度：较高

3. AI 产品原型快速生成器

描述：输入产品需求文档（PRD），AI自动生成线框图、用户流程图、系统架构图。

技术栈：Next AI Draw.io + Figma API + 代码生成

难度：中等

4. AI 教学可视化助手

描述：为教师和培训师设计，输入知识点自动生成概念图、思维导图、对比表格，支持导出为PPT/PDF。

技术栈：Next AI Draw.io + 教育知识图谱 + PPT导出

难度：中等偏低

5. AI 企业流程自动化看板

描述：通过自然语言描述业务流程，AI自动生成BPMN流程图、组织架构图、系统集成图，支持多人协作。

技术栈：Next AI Draw.io + 协作引擎 + 企业SSO

难度：较高

总结

Next AI Draw.io 是一个非常实用的开源工具，它让「用自然语言画图」从概念变成了现实。无论是技术架构图、业务流程图还是学术研究框架，都可以通过对话式交互快速生成。

本次任务中，我不仅安装和使用了这个工具，还用它辅助完成了「AI对就业市场影响」的分析可视化。从数据收集（WebSearch）到图表设计（Write draw.io XML），再到HTML可视化和Word文档生成，整个流程展示了AI Agent在知识工作中的强大能力。

如果你经常需要画图但苦于工具复杂，或者想探索AI与图表结合的新玩法，强烈推荐试试Next AI Draw.io。开源免费，上手简单，潜力无限。

6万星的开源图表工具drawio-desktop，完全免费可离线使用

Tue, 02 Jun 2026 15:16:13 +0800

6万星的开源图表工具drawio-desktop，完全免费可离线使用

jgraph团队开发的drawio-desktop是一款桌面端图表绘制工具，目前在GitHub上获得61,082个Star。该工具基于Electron框架开发，封装了核心的draw.io编辑器，支持用户离线创建各类流程图、架构图、思维导图等图表。

核心特性

drawio-desktop遵循Apache 2.0开源协议，用户可以免费使用，包括商业场景。工具不会发送任何图表数据到外部服务器，也不会收集用户使用数据。安全是该项目的首要设计目标，除了更新检查功能外，应用完全与互联网隔离。用户可以通过设置环境变量DRAWIO_DISABLE_UPDATE=true，或者启动时添加--disable-update参数，完全关闭更新检查功能。

安装方式

Windows平台提供三种安装包，用户可以根据自身权限选择：
第一种是NSIS安装程序，会安装到Program Files目录，需要管理员权限。第二种是MSI安装包，仅安装到当前用户目录，无需管理员权限。第三种是便携版，无需安装即可直接运行，不会注册文件关联。用户也可以通过微软商店安装应用，同样无需管理员权限。

Mac和Linux平台的安装包可以在项目的GitHub Releases页面下载。用户数据存储在系统应用目录下，Windows路径为C:\Users<用户名>\AppData\Roaming\draw.io\，Mac路径为~/Library/Application Support/draw.io。

开发说明

如果需要二次开发，可以递归克隆项目仓库，命令为git clone --recursive https://github.com/jgraph/drawio-desktop.git。安装依赖后执行npm start即可启动应用，添加--enable-logging参数可以开启调试日志。

该项目目前不接受外部代码贡献。项目维护团队表示，工具复杂度较高，即使简单修改也可能影响大量功能，测试成本远超预期。如果提交PR，团队也会按照自身需求重写实现。项目欢迎用户提交bug报告和功能建议。

适用场景

drawio-desktop适合需要绘制各类图表的用户，无论是产品经理画流程图，架构师画系统架构图，还是普通用户做思维导图，都可以满足需求。离线使用的特性，适合对数据安全有要求的企业用户，所有数据都保存在本地，不会上传到第三方服务器。

工具功能足够覆盖日常图表绘制需求，没有多余的付费功能，也没有广告。用户无需注册账号，下载即可使用。

简单易学的绘图软件-draw.io(diagrams.net）

Fri, 29 May 2026 15:17:17 +0800

今天给打开推荐一款简单易学的免费绘图软件-draw.io。

软件介绍：

draw.io是一款免费、开源、跨平台的图表绘制工具，支持流程图、UML、ER图、网络拓扑、组织结构图等数十种图表类型，可在线或离线（Windows/macOS/Linux 桌面版）使用，无广告、无功能限制。‌

‌开源免费‌：基于 Apache 2.0 许可证，源码在 GitHub，可私有化部署。
‌全平台支持‌：网页端无需安装；桌面版为独立 Electron 应用，支持离线安全绘图；集成 Confluence、Jira、VS Code 等插件。
‌丰富图形库‌：内置流程图、UML、ER、网络、电路、思维导图等模板，支持自定义形状与样式。
‌多格式导出/导入‌：可导出 PNG、JPEG、SVG、PDF、XML；支持导入 Visio（.vsdx）文件（部分高级特性可能丢失）。
‌协作与存储灵活‌：支持本地保存、Google Drive、OneDrive 或 Dropbox 同步；网页版启用 PWA 可离线使用。
‌隐私优先‌：桌面版默认完全离线，不上传数据；网页版绘图内容也仅在本地浏览器处理（除非手动连云）

软件功能展示：

drawio-desktop 30.0.0 版本发布说明

Tue, 12 May 2026 16:26:24 +0800

Windows Intel x32 版本以 -ia32- 标记。

更新日志：

主要版本：新安装默认使用auto自适应颜色（与基于网页的 draw.io 相匹配）；升级保留此设置simple。可通过“附加功能”→“配置”进行更改。
Windows 签名证书已更改，https://github.com/jgraph/drawio-desktop/discussions/2415
使用电子 42.0.1
draw.io 核心更新至30.0.0 。

Windows 版Drawio-desktop 桌面最新版 30.0.0

Tue, 12 May 2026 16:25:37 +0800

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

优势

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

入门教程

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

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

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

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

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

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

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

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

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

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

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

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

Mac版Drawio-desktop 桌面最新版 30.0.0

Tue, 12 May 2026 16:25:11 +0800

优势

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

入门教程

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

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

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

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

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

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

在线Web版Drawio-desktop 桌面最新版 30.0.0

Tue, 12 May 2026 16:24:03 +0800

优势

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

入门教程

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

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

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

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

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

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

AI 终于开始"替你画图"了：draw.io-mcp 使用体验 + 实操教程

Fri, 08 May 2026 15:58:23 +0800

最近有一个小东西开始在开发者圈子里慢慢传开。

draw.io-mcp

draw.io （也就是 diagrams.net ）官方做了一个 MCP 接口，让像 Claude Code 、 Claude.ai 这样的 AI ，可以直接生成 draw.io 图表文件。

你不再需要拖框、拉线、对齐、调样式。

你只需要：把你脑子里的结构说清楚。

这件事看起来很小，但实际用下来，它改变的不是"画图方式"，而是建模方式。

一，它解决的不是"画图"，而是"表达结构"

先说我的真实体验结论：

以前你画图，大致流程是这样的：

1.想清楚结构（最难的一步）

2.用 draw.io 手动搭框

3.调整布局（反复拖）

4.对齐、配色、命名

现在变成：

1.想清楚结构

2.写一句话 / 一段描述

3.AI 给你一个完整图

从操作 → 描述 → 生成

二、实际效果长什么样？

举几个真实能用的场景。

1 ）系统架构图（最实用）

你只需要说：

帮我画一个系统架构图：
用户 → API Gateway → 后端服务（用户服务、订单服务） → MySQL + Redis
再加一个 Kafka 做异步消息

AI 会直接给你一个 draw.io 文件结构（ XML ），打开就是图。

2 ）流程图（写文档效率直接翻倍）

比如你写一个 Skill 的执行流程：

用户输入 → Agent 判断 → 调用向量库 → 是否命中 →
是：生成内容 → 输出
否：调用 Python → 再生成

以前你要画 10 分钟，现在：

👉 一句话 + 回车

3 ）概念模型图

比如我之一直在讲的：

Personalizable APP ：

协议层（统一消息） + 客户端层（个性化） + AI 生成能力

这种"偏思想表达"的图，反而更适合 AI 生成，因为：

•你脑子里是结构，不是形状

•AI 比你更擅长"排版结构"

三、怎么用（核心教程）

这里我给你讲最实用的一条路径，不是官方文档那种复杂版本。

Step 1 ：准备环境

你需要：

•一个支持 MCP 的 AI （例如： Claude Code ）

•直接告诉 claudecode 帮你安装 drawio-mcp （ GitHub 上开源）

核心本质是：

drawio-mcp = 一个"让 AI 可以生成 draw.io 文件"的工具接口

Step 2 ：让 AI 知道它能"画图"

👉 在 Claude Code 里，让它加载 MCP server

然后你就可以直接说：

帮我生成一个 draw.io 图：
一个典型的微服务架构：
用户 -> 网关 -> 服务 A 、服务 B -> 数据库

Step 3 ：生成 draw.io 文件

AI 会返回一种结构（通常是 XML 或 JSON ）

你只需要：

1.保存为 .drawio 或 .xml

2.用 draw.io 打开

就完成了。

Step 4 （关键技巧）：不要一次说太复杂

这是使用体验里最重要的一点：

❌ 一次说完整系统

✅ 分阶段生成 + 迭代

比如：

第一步：

先画主流程

第二步：

在订单服务下面加一个 Kafka

第三步：

把数据库拆成主从

这其实就是：

👉 把"画图"变成"对话式建模"

四、真实体验：优点 & 不足（不吹）

优点（很明显）

1 ）节省的是"体力"，不是"脑力"

你还是要想清楚结构，但不用做重复操作。

2 ）特别适合你这种"写系统/写模型"的人

你现在在做：

•Agent 体系

•Skill 设计

•Personalizable APP 架构

这些东西，本质都是"结构表达"。

drawio-mcp 正好卡在这个点上。

3 ）统一表达方式

以后可能会变成：

文档 + 图 = 同一个来源（语言）

这点很关键。

不足（目前也很真实）

1 ）布局有时候不美

AI 会"对"，但不一定"好看"。

2 ）复杂图容易失控

一旦你描述太复杂：

👉 图会乱

3 ）还是需要你有结构能力

如果你说不清楚：

👉 AI 也画不清楚

五、你可以怎么用（结合你现在在做的事情）

我直接给你几个你可以马上用的点：

1 ）你的 Skill 架构图

你可以这样让 AI 画：

一个 Agent 系统：
用户输入 → Skill Router →
• 报告 Skill （调用向量库）
• 计算 Skill （调用 Python ）
最终输出结果

2 ）你的向量库 + MCP 体系

MCP Server
• 向量检索
• 规则查询
Agent 调用这些服务

3 ）你那个核心概念（非常适合）

Personalizable APP 模型：
• 协议层（消息传输）
• 客户端层（ AI 生成）
• 用户个性化逻辑

这个用 drawio-mcp 出图，会非常适合你做"思想传播图"。

六、最后说一句更本质的变化

drawio-mcp 本身不重要。

重要的是它代表了一件事：

软件开始从"操作工具"，变成"表达工具"。

你以后可能会越来越少去：

•拖 UI

•点按钮

•对齐图形

而是更多去：

•描述结构

•定义逻辑

•说清楚关系

然后让 AI 去"实现表达"。

飞牛 fnOS 部署 Draw.io：在线流程图编辑器搭建全攻略

Sat, 02 May 2026 15:56:35 +0800

飞牛 fnOS 部署 Draw.io：在线流程图编辑器搭建全攻略

很多团队在用流程图、架构图时，要么依赖在线编辑器（数据上云、不隐私），要么依赖桌面软件（无法协同、版本混乱）。今天教你在 fnOS 上用 Docker 部署 Draw.io，数据完全自托管，随时随地通过浏览器访问，团队成员共用同一套图表库。

本文覆盖内容：

Docker 一键部署 Draw.io
持久化存储配置，图表保存到 NAS 目录
反向代理配置，域名访问
团队协作和版本管理最佳实践
常见问题排查

一、Draw.io 是什么

Draw.io（现更名为 diagrams.net）是开源免费的流程图/架构图编辑器，支持离线使用，图表以 .drawio 格式保存（本质是 XML）。把它部署在 NAS 上，团队成员通过浏览器访问，数据完全在本地，隐私安全。

适合场景：

系统架构图、网络拓扑图
业务流程图、UML 图
产品原型草图
技术文档配图

二、Docker 快速部署

fnOS 支持 Docker，直接用命令行跑起来。

2.1 一键启动


docker run -it --rm \
  --name="drawio" \
  -p 8080:8080 \
  -p 8443:8443 \
  jgraph/drawio

参数说明：

--rm：容器停止后自动删除（初次测试用）
-p 8080:8080：HTTP 访问端口
-p 8443:8443：HTTPS 访问端口

启动后浏览器访问：http://<fnOS主机IP>:8080

2.2 离线模式

如果只想用本地存储，不希望任何网络通信，访问时加参数：


http://<fnOS主机IP>:8080/?offline=1&https=0

offline=1 会禁用所有云存储功能。

三、持久化存储（推荐配置）

上面的命令容器重启后数据会丢失。生产环境必须做持久化存储，把图表目录映射到 NAS。

3.1 启动命令


docker run -d \
  --name="drawio" \
  -p 8080:8080 \
  -p 8443:8443 \
  -v /fnos/data/drawio:/data \
  --restart unless-stopped \
  jgraph/drawio

解释：

-v /fnos/data/drawio:/data：将容器内 /data 目录映射到 NAS 路径 /fnos/data/drawio
--restart unless-stopped：开机自动重启

提示：首次部署前先在 fnOS 文件管理中创建好 /fnos/data/drawio 目录。

3.2 目录结构建议

在 NAS 存储池上建立如下结构，方便分类管理：


/fnos/data/drawio/
├── projects/
│   ├── architecture/    # 架构图
│   ├── network/         # 网络拓扑
│   └── workflow/        # 流程图
├── templates/           # 常用模板
└── exports/             # 导出的 PDF/PNG

Draw.io 图表文件扩展名是 .drawio，可以用任意文本编辑器打开查看 XML 源码，方便接入 Git 版本控制。

四、通过反向代理域名访问

有了反向代理，可以用域名 + HTTPS 访问，配合 fnOS 自带的 Nginx Proxy Manager（见之前文章）效果更好。

4.1 Nginx 配置示例


server {
    listen 443 ssl;
    server_name drawio.yourdomain.com;

    ssl_certificate /etc/ssl/certs/drawio.crt;
    ssl_certificate_key /etc/ssl/private/drawio.key;

    location / {
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

4.2 常用 URL 参数

参数	用途
`?offline=1`	离线模式，禁用云存储
`?https=0`	强制 HTTP 模式
`&create=yes`	打开时创建新文件
`&embed=`	嵌入模式

五、团队协作和版本管理

Draw.io 不支持实时多人协作，但通过 NAS 文件共享可以优雅地解决团队使用场景。

5.1 通过 SMB/NFS 共享

fnOS 创建好共享目录后，团队成员直接在 Draw.io 里打开/保存 NAS 上的 .drawio 文件：

浏览器打开 Draw.io
文件 → 打开 → 选择「设备」→ 输入 NAS 路径 \\fnOS主机IP\drawio\projects\architecture\
打开后直接编辑，保存即可写回 NAS

5.2 文件锁机制

Draw.io 自带文件锁，打开文件时会在同目录生成 .<filename>.lock 文件，防止其他人同时编辑。如果你的同事已打开文件，你会看到锁定提示。

5.3 接入 Git 版本控制

因为 .drawio 文件是 XML，可以用 Git 管理图表版本：


# 在图表目录初始化 Git 仓库
cd /fnos/data/drawio/projects
git init
git add .
git commit -m "初始化架构图"

# 每次修改后提交
git add architecture/system-overview.drawio
git commit -m "更新网络拓扑"

建议：多人协作时采用「分支开发 → Pull Request 合并」的工作流，避免版本冲突。

5.4 备份方案

图表文件很小，用 rsync 定时备份到另一块硬盘或远程服务器：


# 每天凌晨 3 点增量备份
rsync -avz --delete /fnos/data/drawio/ /fnos/backup/drawio-backup/

六、高级技巧

6.1 键盘快捷键

快捷键	功能
`Ctrl+D`	复制并向下偏移（快速复制元素）
`Ctrl+Shift+D`	复制并水平偏移
`Ctrl+G`	编组
`Ctrl+Shift+G`	取消编组
`Ctrl+R`	旋转 90°
`F2`	编辑选中文字
`Alt+Enter`	打开形状格式面板

6.2 多页面管理

一个 .drawio 文件可以包含多个页面（标签页在最底部），适合将同一系统的不同视角放在一个文件里，比如「网络拓扑」「物理拓扑」「逻辑架构」放在一起管理。

6.3 导出为 PNG/PDF/SVG

Draw.io 支持导出多种格式：

PNG/SVG：图片格式，适合嵌入文档
PDF：矢量格式，适合打印
VSDX：Visio 格式，方便给使用 Visio 的同事

文件 → 导出 → 选择格式即可。

七、常见问题排查

Q1：容器启动成功但无法访问


# 检查容器是否在运行
docker ps

# 查看容器日志
docker logs drawio

# 检查端口占用
netstat -tlnp | grep 8080

Q2：提示「连接被拒绝」

确认 fnOS 防火墙已放行 8080 端口，或在 fnOS 控制台添加入站规则。

Q3：图表文件打开空白

清除浏览器缓存，或尝试无痕模式。旧版本创建的图表在新版本中打开时有时需要转换格式。

Q4：多人同时编辑冲突了

Draw.io 不支持实时协作。如果两人同时打开，先保存者会生成锁文件，后者会看到提示。冲突时通过 Git 版本历史恢复：


git log --oneline
git diff <commit-id>  # 查看改动
git checkout <commit-id> -- file.drawio  # 恢复到某个版本

Q5：想导出 Visio 格式（.vsdx）

需要启用 EMF 转换器。在 docker-compose 中启用导出服务器功能：


git clone https://github.com/jgraph/docker-drawio.git
cd docker-drawio
docker-compose -f docker-compose-full.yml up -d

八、完整命令汇总


# 1. 创建存储目录
mkdir -p /fnos/data/drawio/projects

# 2. 启动容器（持久化版）
docker run -d \
  --name="drawio" \
  -p 8080:8080 \
  -p 8443:8443 \
  -v /fnos/data/drawio:/data \
  --restart unless-stopped \
  jgraph/drawio

# 3. 访问地址
# http://<fnOS主机IP>:8080
# 离线模式：http://<fnOS主机IP>:8080/?offline=1&https=0

# 4. 查看日志
docker logs -f drawio

# 5. 停止/重启
docker stop drawio
docker start drawio

总结

通过 Docker 在 fnOS 上部署 Draw.io，整个过程不超过 5 分钟。数据存在本地 NAS，访问只需浏览器，团队成员可以共用同一套图表库，通过 SMB 共享访问，通过 Git 做版本控制。

对于技术团队来说，架构图、拓扑图、流程图全部集中管理、版本可追溯，比散落在各人桌面或者依赖在线服务要安全方便得多。