@haydenull/code-canvas 1.1.0 → 1.2.0

package/README.md

@@ -4,85 +4,31 @@ Code Canvas 将代码的控制流和调用关系转换为可交互的流程图
 
 项目包含：
 
-- `@haydenull/code-canvas`：通过 CLI 校验 `.logic.json` 产物，并在 Web Viewer 中展示节点、分支、调用关系、模块分组和源码片段。
-- `code-canvas-generator` Skill：阅读真实源码并生成符合约定的流程图产物。
+- `@haydenull/code-canvas`：校验 `.logic.json` 产物，并在 Web Viewer 中展示节点、分支、调用关系、模块分组和源码片段。
+- `code-canvas-generator` Skill：让支持 Agent Skill 的编码助手阅读真实源码，并生成可被 Code Canvas 展示的流程图产物。
 
-## 环境要求
+## 安装 CLI
 
-- 使用 CLI：[Node.js](https://nodejs.org/) 20 或更高版本。
-- 本地开发：[Bun](https://bun.sh/)。
-
-## 快速开始
-
-安装依赖：
-
-```bash
-bun install
-```
-
-打开仓库内的示例流程图：
-
-```bash
-bun run view
-```
-
-命令会启动本地服务并输出访问地址。默认监听 `127.0.0.1`，端口由系统自动分配。
-
-## CLI 用法
-
-无需安装即可通过 `npx` 执行已发布的 CLI：
+推荐本地全局安装 CLI：
 
 ```bash
-npx @haydenull/code-canvas validate artifacts/example.logic.json
-npx @haydenull/code-canvas view artifacts/example.logic.json
-npx @haydenull/code-canvas artifact path
+npm install -g @haydenull/code-canvas@latest
 ```
 
-开发环境下可以直接运行源码校验产物：
+## 安装 Skill
 
-```bash
-bun src/cli.ts validate artifacts/example.logic.json
-```
-
-启动 Viewer 前需要先构建静态资源。`view` 支持指定监听地址和端口：
-
-```bash
-bun run build
-node dist/cli.js view artifacts/example.logic.json --host 0.0.0.0 --port 4173
-```
+`code-canvas-generator` Skill 位于仓库的 [`skills/code-canvas-generator`](skills/code-canvas-generator/SKILL.md) 目录。
 
-构建后也可以通过产物运行：
+可以使用 `npx skills` 安装：
 
 ```bash
-bun run build
-node dist/cli.js validate artifacts/example.logic.json
-node dist/cli.js view artifacts/example.logic.json
+npx skills add haydenull/code-canvas --skill code-canvas-generator
 ```
 
-## 生成流程图产物
+也可以使用 [haydenull/skills-manager](https://github.com/haydenull/skills-manager) 安装。
 
-仓库内置的 [`code-canvas-generator`](skills/code-canvas-generator/SKILL.md) Skill 会读取指定代码入口及必要的调用链，调用 CLI 获取系统临时目录下的 `.logic.json` 输出路径，并将生成的流程图产物写入该路径。
 
-## 开发命令
+## 文档
 
-```bash
-bun run test   # 运行测试
-bun run check  # TypeScript 类型检查
-bun run build  # 构建 CLI 并执行类型检查
-```
-
-发布 npm 包见 [发布文档](docs/publishing.md)。
-
-## 项目结构
-
-```text
-src/
-├── cli.ts              # CLI 入口和本地 Viewer 服务
-├── shared/
-│   ├── flow.ts         # Artifact 到 React Flow 数据的转换与布局
-│   └── schema.ts       # Artifact 数据结构与校验
-└── viewer/             # React 可视化界面
-skills/
-└── code-canvas-generator # Code Canvas 产物生成 Skill
-artifacts/              # 生成的流程图产物和示例
-```
+- [开发说明](docs/development.md)
+- [发布 npm 包](docs/publishing.md)

package/dist/cli.js

@@ -217,6 +217,11 @@ var viewerContentTypes = {
   ".js": "text/javascript; charset=utf-8",
   ".svg": "image/svg+xml"
 };
+function loadVersion() {
+  const packagePath = fileURLToPath(new URL("../package.json", import.meta.url));
+  const packageJson = JSON.parse(readFileSync(packagePath, "utf8"));
+  return packageJson.version;
+}
 function loadArtifact(path) {
   if (!existsSync3(path)) {
     throw new Error(`Artifact not found: ${path}`);
@@ -299,16 +304,26 @@ async function view(artifactPath, { host, port }) {
       resolveListen();
     });
   });
+  const stop = () => {
+    console.log(`
+Stopping viewer...`);
+    server.close(() => {
+      process.off("SIGINT", stop);
+      process.off("SIGTERM", stop);
+    });
+  };
+  process.once("SIGINT", stop);
+  process.once("SIGTERM", stop);
   const address = server.address();
   const listeningPort = typeof address === "object" && address ? address.port : port;
   console.log(`Local: http://${host}:${listeningPort}/`);
   console.log(`Serving artifact: ${artifactPath}`);
 }
 var program = new Command;
-program.name("code-canvas");
-program.command("validate <artifactPath>").action(validate);
+program.name("code-canvas").description("validate and visualize Code Canvas .logic.json artifacts").version(loadVersion(), "-v, --version", "display version number");
+program.command("validate <artifactPath>").description("validate a .logic.json artifact").action(validate);
 program.command("artifact").description("manage logic artifact files").command("path").description("print a new temporary .logic.json path").action(printArtifactPath);
-program.command("view <artifactPath>").option("--host <host>", "host", "127.0.0.1").option("--port <port>", "port", parsePort, 0).action(view);
+program.command("view <artifactPath>").description("serve a .logic.json artifact in the local viewer").option("--host <host>", "host", "127.0.0.1").option("--port <port>", "port", parsePort, 0).action(view);
 program.parseAsync().catch((error) => {
   console.error(error instanceof Error ? error.message : error);
   process.exit(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haydenull/code-canvas",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "代码流程产物校验与可视化 CLI",
   "type": "module",
   "engines": {