织图节点编辑器 Quan-Chan/Weave-for-DSH

Weave-for-DSH

纯网页的节点式图编辑器 —— 自由摆放节点，拖拽 socket 连线，构建思维导图、流程图与逻辑树。

DeepSeek Harness 插件版

本仓库在原版 Weave 之上做了插件化封装，编辑器本体原样打包（当前捆绑 Weave v2.0.3）、未做任何修改：

- 页面内嵌 — 编辑器作为会话的第三个页面视图（chat / trajectory / Weave）嵌入 DeepSeek Harness，用户可直接拖拽节点、连线、编辑
- 离屏常驻 — 编辑器 iframe 始终存活，AI 在任意页面视图下操作的都是同一份画布
- 双画布模式 — 节点图与时序图（v2.0+）两份独立文档，AI 经 weave.setMode 切换并在任一模式下操作
- weave AI 工具 — AI 可直接操控画布，见下文
- AI 教学 skill 与文档 — 内置 skills/weave/SKILL.md 与 docs/weave-api.md；skill 在插件 apply 时以运行时技能（source: 'plugin'）注册，装好即可用，无需手动复制

Harness 兼容性 — 声明并验证到 DeepSeek Harness 0.2.1-rc.5。peerDependencies 按历次验证过的版本逐段累加，harness 启动时的插件兼容性预检直接拿运行时版本比对这串范围。

安装（声明了 dsh.bundle 的组合包，一条命令装进 Web profile）：

dsh plugin --profile web add github:Quan-Chan/Weave-for-DSH

dsh plugin 转发给 pnpm，需先安装 pnpm（npm install -g pnpm 或启用 corepack）。安装来源可为 git 仓库、npm registry 包名、tgz 文件或本地目录；这些来源都匿名可装，不需要 npm 账号（npm 账号只在发布时使用）。本包是纯 JS + 静态资源，无构建脚本，git 直装不触发 pnpm 的构建审批。

各来源对应命令：

dsh plugin --profile web add github:Quan-Chan/Weave-for-DSH # git 仓库
dsh plugin --profile web add weave-for-dsh # npm registry（发布后）
dsh plugin --profile web add ./weave-for-dsh-0.3.0.tgz # npm pack 产物
dsh plugin --profile web add ./weave-for-dsh # 本地 checkout

无 pnpm 时也可手工安装：把包目录复制到 $DSH_HOME/profiles/node_modules/weave-for-dsh，并在 profile 的 cordis.patch.yml 中插入插件行（见包内 cordis.patch.yml）。安装后重启 dsh web 并刷新会话页面，会话页面上方出现 Weave 页面选项，agent 工具集中出现 weave 工具。

功能

- 节点 — 添加、删除、选中（单击 / 框选 / 多选）、拖拽移动、内联编辑、复制粘贴、收起 / 展开节点串（隐藏沿连线可达的后代，保存相对位置，展开时恢复）
- 时序图 — 与节点图并列的第二种画布模式（v2.0+）：参与者垂下时序线，消息是两条时序线之间的水平箭头；两份文档各自独立保存；v2.0.3 修正了同高链式消息弯折与垂直排列参与者消息落点
- 关联高亮 — 按住 Alt 单击节点，高亮该节点及其直接关联的节点与连线，其余内容模糊（Alt 点击其他节点可切换高亮对象）
- 分区 — 顶栏「分区」按钮或 Shift+R / Alt+拖拽绘制可嵌套分区框，整框收编节点，名称 / 颜色可编辑，移动分区随动其节点；v2.0.2 起节点图与时序图两种模式都可用分区
- 连线 — socket 拖拽创建、删除、标签编辑、贝塞尔曲线自定义调整
- 画布 — 平移（拖拽 / 中键）、滚轮缩放、适应视图、坐标 HUD 编辑
- 颜色 — 5 种预设色（blue / cyan / green / yellow / orange）+ 自定义色轮选择器，Ctrl+滚轮切换新建节点的默认色
- 导入/导出 — JSON 导入导出（含分区、收起记录与视口信息）、PNG 导出（内嵌文档存档，拖回画布可还原）、拖拽 JSON 文件导入
- 其他 — 撤销/重做（最多 50 步）、只读模式、专注模式（Ctrl+H）、对齐设置（节点/分区位置与大小 4 项，含一键重置）、键位设置（首次启动自动弹出，快捷键可自定义）、语言切换（设置内：中文 / English）、自动保存到 localStorage

AI 工具

插件注册 weave 工具，把一段 JavaScript 表达式送进编辑器执行并返回 JSON，AI 据此切换画布模式、增删改节点/连线/时序消息、整体读写画布、导出 PNG：

- code（必填）— JavaScript 表达式，支持 await
- timeoutMs（可选）— 超时，默认 60000 表达式内可用的全局：App（编辑器应用对象）、Weave（工具库：Util / Color / Geom）、weave（桥接对象：getMode / setMode / addNode / addConnection / addMessage / addRegion / removeRegion / collapseNode / expandNode / toggleCollapse / canCollapse / getData / setData / exportPng / count）。

weave.getMode() // 当前画布模式 "graph" | "sequence"
weave.setMode("sequence") // 切换画布模式（两份文档独立）
weave.addNode({ label: "需求分析", color: "blue", x: 0, y: 0 }) // 加节点
weave.addConnection(a.id, b.id, { label: "依赖" }) // 节点图：建连线
weave.addMessage(c.id, d.id, 360, { label: "查询" }) // 时序图：建消息
weave.addRegion({ x: -80, y: -120, w: 600, h: 280, label: "模块" }) // 画分区（两种模式都可用）
weave.collapseNode(id) // 收起节点后代（仅节点图）
weave.getData() // 读当前文档（格式随模式）
weave.setData({ nodes: [...], connections: [...], regions: [...] }) // 整体替换（带模式标记自动切换）
await weave.exportPng() // 导出 PNG，返回 {dataUrl, name}
weave.count() // 数量

完整接口与示例见 docs/weave-api.md，AI 教学版见 skills/weave/SKILL.md。

技术栈展示

Weave 用纯前端技术构建，零框架、零依赖、零构建步骤，一个 HTML 文件构成完整产品：

- 纯 JavaScript — 全部逻辑内联在单文件中，无框架、无构建，源码即产品
- HTML5 + CSS3 — 结构标记 + CSS 变量主题，界面风格统一易维护
- Canvas 2D — 绘制网格背景与连线，缩放平移时流畅重绘
- SVG — 叠加层承载贝塞尔曲线控制手柄与连线标签，可精确交互
- localStorage — 画布数据自动持久化，刷新或重开不丢失

贡献与主仓库

本项目分两层，修改目标不同：

- 编辑器本体（画布、节点、连线、分区、收起/展开等编辑功能）— 主仓库 Quan-Chan/Weave
- DSH 插件封装（页面嵌入、weave AI 工具、桥接方法、skill 与文档）— 本仓库 Quan-Chan/Weave-for-DSH

问题与改动建议按上述归属提交到对应仓库的 issue 与 pull request。编辑器本体以 release 资产形式捆绑进本包（见上文版本说明），上游发版后由本仓库同步更新。

许可证

本项目采用 Apache License 2.0 开源。

Copyright © 2026 Quan-Chan