AI突破会话框：dsl + codex 才是真的香

📅 2026/7/2 3:37:13 👁️ 次浏览

使用场景当 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 DSL2、将 DSL 内容写入当前工作区的临时文件temp_diagram.dsl3、调用本地 Node.js 脚本node .agents/skills/jvs-draw-architect/scripts/open-draw.cjs temp_diagram.dsl4、脚本读取 temp_diagram.dsl5、自动打开 https://draw.bctools.cn6、将 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 后自动打开并渲染”适合用于技术文档、产品方案、系统设计和业务流程表达等场景。

相关新闻