dsh-capmap-viz

CapMap 文档体系可视化 DSH 插件（双半）：选中本地工作区 → 读 capmap.yaml → 定位 docs_root → 渲染 Obsidian Graph View 风格语义图谱 + 能力面板。

方案见本仓 docs/_archive/方案/文档体系/CapMap可视化-DSH插件V3.md（V1/V2 同目录）。

目录

src/
├── index.ts          # Host 插件体（CapMapService + /capmap RPC）
├── client/           # Client：侧栏 DOM 入口 + 中栏面板 + canvas 图谱
├── parser/           # CapMapParser（Cordis-free 纯函数 + 单测）
└── invariant.ts      # 包级 invariant 伴生
cordis.patch.yml      # web profile 的 Host 插入层

安装（已发布 npm）

dsh plugin --profile web add @chenjh12/dsh-capmap-viz
dsh web --dump-config

组成树应有 # == @chenjh12/dsh-capmap-viz 与 id: capmap-viz。然后 dsh web。

打开工作区后若提示 未找到 docs_root：点 一键安装 Skill 并初始化：先装 skill（npx skills add，失败则 git sparse 回退拷贝 skills/capmap-*），再写 <工作区名>-docs 骨架。仅有 capmap.yaml、没有 SKILL.md 会视为未安装并重试。安装失败会在面板标红（骨架仍可能已写入）。

npx skills add 1741505640/capmap-skills --skill '*' -y

完成后自动重新加载图谱。手动命令仍可在面板「手动命令（备用）」展开。

本地开发（Web GUI）

在 dsh-capmap-viz/：

npm install
npm run build

Windows： 不要用 link:D:/... 绝对路径。用 profile 内相对 junction：

$web = "$env:USERPROFILE\.dsh\profiles\web"
New-Item -ItemType Directory -Force -Path "$web\vendor" | Out-Null
cmd /c mklink /J "$web\vendor\dsh-capmap-viz" "D:\python\capmap-skills\dsh-capmap-viz"
dsh plugin --profile web add link:vendor/dsh-capmap-viz
dsh web --dump-config

校验：# == @chenjh12/dsh-capmap-viz、id: capmap-viz。若未进 bundles，把 @chenjh12/dsh-capmap-viz 加进 $web\package.json 的 dsh.profile.bundles，并保证 node_modules\@chenjh12\dsh-capmap-viz 指向 vendor\dsh-capmap-viz。

发布到 npm

需已 npm login（账号 chenjh12）。在 dsh-capmap-viz/：

npm run build
npm publish --access public --registry https://registry.npmjs.org

升版：改 package.json 的 version 后再 npm publish。

使用

1. dsh web 后侧栏可见「能力底图」入口（宽栏文字 / 折叠轨图标）。
2. 点入口 → 选 Workspace → 图谱加载；类型填色、状态描边；hover / 1-hop / 缩放平移 / Fit。
3. 「关闭」交回会话；可「更换工作区」。

改源码后 npm run build 并重启 dsh web（Host 不热更）。

图谱配色

权威源码：src/client/graph/colors.ts（节点 填充=类型，描边=生命周期状态；已归档另用虚线描边）。

类型填充

| 类型 | 色值 | 观感 | |------|------|------| | map（底图） | #3b82f6 | 蓝 | | scheme（方案） | #22c55e | 绿 | | test（测试） | #eab308 | 黄 | | norm（规范） | #a855f7 | 紫 | | index（索引） | #9ca3af | 灰 | | archive（归档路径节点） | #6b7280 | 深灰 | | 未知 | #9ca3af | 灰（默认） |

状态描边

相邻阶段刻意拉开色相：灰(构思) → 紫(规格) → 橙(开发中) → 青(已开发) → 黄(验证) → 绿(落地)。

| 状态 | 色值 | 观感 | |------|------|------| | 方案中 | #e2e8f0 | 浅灰 | | 已确认 | #94a3b8 | 石板灰 | | 规格中 | #818cf8 | 靛紫 | | 已拆分 | #c084fc | 浅紫 | | 开发中 | #f97316 | 橙 | | 已开发 | #22d3ee | 青 | | 验证中 | #eab308 | 黄 | | 已验证 | #4ade80 | 亮绿 | | 落地中 | #2dd4bf | 青绿 | | 已落地 | #34d399 | 翠绿 | | 已归档 | #6b7280 | 深灰 + 虚线 | | 测试中 | #fbbf24 | 琥珀（测试文轨） | | 无状态 | #111827 | 近黑（默认描边） |

目录「生命周期」条与详情状态 pill 与上表同一套色。

单测（无需 GUI）

npm test