Visio 安全图纸:让 Agent 产出可导入 Visio 的 draw.io 与 SVG

前言

用 Codex、Cursor 等 Agent 画架构图时,常见结果是 .drawio 或 SVG 在 draw.io 里打不开、控制台报 atob/base64 相关错误,或者导入 Microsoft Visio 后连线错位、文字溢出画布。手工改 XML、重排节点往往比画图本身更耗时。

下面介绍 SkillHub 上的 Visio 安全图纸 / Visio Safe Diagrams(坐标 @user_6c3897e4/visio-safe-diagrams,当前版本 1.0.1)。它面向「生成、修复、校验」可导入 Visio 的 draw.io 与 SVG 架构图,把上述一类问题收敛到 Agent 可执行的流程里,而不是依赖临场猜格式。

这是什么

Visio 安全图纸 是社区来源(community)、分类为 dev-programming 的 Agent Skill,发布者为 user_6c3897e4。Skill 采用通用 SKILL.md 格式,页面标注 requires_api_key=false,安装后不需要额外 API Key。

一句话定位:在 Agent 需要产出 Visio 兼容架构图、或修复已有 draw.io/SVG 时,按 Skill 中的规则创建图纸、修补编码与布局问题,并做可打开性校验。

官方入口:

  • SkillHub 页面:https://www.skillhub.cn/skills/user_6c3897e4/visio-safe-diagrams
  • API 坐标页:https://api.skillhub.cn/user_6c3897e4/visio-safe-diagrams

核心功能

以下能力与官方简介一致,仅列已核实项:

  1. 创建 可导入 Microsoft Visio 的架构图,输出形态为 draw.io(.drawio)与 SVG。
  2. 修复 draw.io 常见的 atob/base64 类报错,以及自动连线乱跑等问题。
  3. 处理 SVG 文字溢出等布局问题,并将 draw.io XML 转为更稳定的 SVG(便于下游打开与导入)。
  4. 验证与排障 对 Agent 已生成但 Visio 或 draw.io 无法打开的图纸做排查与修复。

适用触发场景(与 Skill 英文说明一致):需要为 Visio 生成图、修 base64/atob 错误、防 SVG 文字溢出、做 XML→SVG 稳定化,或处理「别的 Agent 画了但打不开」的文件。

安装与启用

安装分两种方式:用 SkillHub CLI 装到当前 Agent 的 skills 目录,或把官方提示词发给 AI 由其按文档安装。

1. 安装 SkillHub CLI(若尚未安装)

先检查是否已有 CLI:

command -v skillhub && skillhub --version

未安装时,按官方安装文档执行完整安装(含 CLI 与默认 Skill):

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash

仅 CLI:

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only

说明与命令来源:https://skillhub.cn/install/skillhub.md

2. 安装本 Skill

必须用 --dir 指向当前 Agent 实际使用的 skills 目录;默认装到 ./skills/ 时,部分客户端不会加载。

skillhub install @user_6c3897e4/visio-safe-diagrams --dir <你的 skills 目录>

常用目录(来自 SkillHub 安装文档):

  • Cursor:~/.cursor/skills/
  • Codex:~/.codex/skills/ 或项目下的 .agents/skills/
  • Claude Code:~/.claude/skills/

安装完成后,按你所用客户端要求重启或刷新 Agent,使 Skill 被识别。

3. 通过对话安装

SkillHub 页面提供的提示词为:

请根据 https://skillhub.cn/install/skillhub.md,安装 `@user_6c3897e4/visio-safe-diagrams`。

将上述内容发给当前 AI 客户端即可,由 Agent 按同一安装文档完成拉取与目录配置。

典型用法

公开页面未附带逐步复制的命令行示例;实际用法是 在对话中启用 Skill 后,用自然语言描述图纸目标或问题文件。下面是可以直接复现的请求方式。

新建 Visio 兼容架构图

  1. 确认 Skill 已装入当前 Agent 的 skills 目录。
  2. 说明输出要求,例如:「用 draw.io 画三层 Web 架构,组件含负载均衡、应用池、数据库;输出 .drawio 和可导入 Visio 的 SVG,避免 SVG 文字溢出。」
  3. 让 Agent 按 Skill 规则生成文件,并在 draw.io 或 Visio 中试打开。

修复打不开的 draw.io

  1. 提供报错现象(如 draw.io 控制台 atob 报错)或附上 .drawio 路径。
  2. 请求:「按 Visio 安全图纸 Skill 修复 base64/atob 问题并校验可在 draw.io 打开。」

整理其他 Agent 生成的坏图

  1. 说明原图无法在 Visio/draw.io 打开。
  2. 请求修复连线乱跑、将 XML 转为稳定 SVG,并做可打开性验证。

经过上面的步骤,你应得到可在目标工具中打开的 .drawio 或 SVG;若仍失败,把具体错误信息继续交给 Agent,Skill 侧定位的是编码、连线与 SVG 文本布局类问题。

适用场景与注意

适合谁

  • 需要把 Agent 生成的架构图交给使用 Visio 或 draw.io 的同事。
  • 经常遇到 AI 出图后的 atob/base64、连线或 SVG 溢出问题,希望有固定修复流程。
  • 在 Codex 等环境里批量生成可导入 Visio 的示意图。

限制与注意

  • 本 Skill 不依赖 API Key;能力边界以 Skill 内 SKILL.md 与工作流为准,不能替代 Visio 桌面版本身的授权与版本差异。
  • SkillHub 统计(抓取时):评分 100000,下载 1709,分类 dev-programming;安装量等会随时间变化,以 SkillHub 页面为准。
  • 不同 Agent 的 skills 目录不同,安装时 --dir 必须对准当前环境,否则会出现「已安装但 Agent 不加载」。

结尾

Visio 安全图纸把「能画」推进到「能导入、能打开、少踩编码与布局坑」,适合把架构图交付链路放在 Visio/draw.io 上的团队。需要安装或更新时,以上文 SkillHub 页面与 https://skillhub.cn/install/skillhub.md 为准。

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜