使用场景

当 AI Agent 检测到以下需求时，可以启用该技能：

• 需要生成系统架构图、业务流程图、部署图等图表
• 需要将 DSL 内容渲染到 JVS-Draw 网页中
• 需要在本地开发环境中自动打开 ​​https://draw.bctools.cn​​
• 需要通过脚本将临时 DSL 文件传入网页渲染工具

动态安装流程

1. 创建本地技能目录

在当前工作区根目录下创建技能目录：

.agents/skills/jvs-draw-architect/scripts/

该目录用于存放 JVS-Draw 的自动化拉起脚本。

2. 下载自动化脚本

从远程地址下载脚本：

https://draw.bctools.cn/scripts/open-draw.cjs

并保存为：

.agents/skills/jvs-draw-architect/scripts/open-draw.cjs

该脚本负责读取本地 DSL 文件，并将内容传递给 JVS-Draw 网页进行渲染。

3. 创建技能描述文件

在本地创建：

.agents/skills/jvs-draw-architect/SKILL.md

文件内容如下：

---
name: jvs-draw-architect
description: 调用 open-draw.cjs 打开 https://draw.bctools.cn 渲染 DSL
---
# Action:
1. 将生成的 DSL 写入 temp_diagram.dsl
2. 执行: node .agents/skills/jvs-draw-architect/scripts/open-draw.cjs temp_diagram.dsl

执行机制

安装完成后，AI Agent 的执行流程如下：

1、根据用户需求生成 JVS-Draw DSL

2、将 DSL 内容写入当前工作区的临时文件：

temp_diagram.dsl

3、调用本地 Node.js 脚本：

node .agents/skills/jvs-draw-architect/scripts/open-draw.cjs temp_diagram.dsl

4、脚本读取 ​​temp_diagram.dsl​​

5、自动打开 ​​https://draw.bctools.cn​​

6、将 DSL 内容传入页面并完成图表渲染

文件结构

安装完成后的推荐目录结构如下：

当前工作区/
├─ .agents/
│  └─ skills/
│     └─ jvs-draw-architect/
│        ├─ SKILL.md
│        └─ scripts/
│           └─ open-draw.cjs
└─ temp_diagram.dsl

关键文件说明

文件	作用
​​.agents/skills/jvs-draw-architect/SKILL.md​​	定义技能名称、描述和执行动作
​​.agents/skills/jvs-draw-architect/scripts/open-draw.cjs​​	自动打开 JVS-Draw 并加载 DSL 的 Node.js 脚本
​​temp_diagram.dsl​​	临时 DSL 文件，由 AI Agent 根据绘图需求生成

注意事项

• 本地环境需要安装 Node.js。
• ​​open-draw.cjs​​ 需要从可信地址下载，避免使用来源不明的脚本。
• ​​temp_diagram.dsl​​ 是临时文件，可根据每次绘图需求覆盖写入。
• 如果网页无法打开，需要检查网络访问、浏览器权限或脚本执行权限。
• 如果 DSL 渲染异常，应优先检查 DSL 语法是否符合 JVS-Draw 的格式要求。

总结

​​jvs-draw-architect​​ 技能通过“本地技能描述文件 + 自动化 Node.js 脚本 + 临时 DSL 文件”的方式，将 AI Agent 生成图表与 JVS-Draw 网页渲染能力连接起来。

它的价值在于让绘图流程从“手动复制 DSL、打开网页、粘贴内容”转变为“生成 DSL 后自动打开并渲染”，适合用于技术文档、产品方案、系统设计和业务流程表达等场景。