当前位置：首页 > article >正文

VSCode函数调用关系图插件开发(d3-graphviz)

article 2025/3/2 1:30:38

文章目录

- 1、如何在VSCode插件webview中用d3-graphviz绘图
- 2、VSCode插件使用离线d3.min.js、d3-graphviz
- 3、使用 `@hpcc-js/wasm` 包在 Node.js 环境直接转换dot为svg

1、如何在VSCode插件webview中用d3-graphviz绘图

我来帮你创建一个 VS Code 插件示例，实现右键菜单触发 Webview 显示函数调用图的功能。

// package.json
{
   
  "name": "function-call-graph",
  "displayName": "Function Call Graph",
  "description": "Show function call graph in webview",
  "version": "0.0.1",
  "engines": {
   
    "vscode": "^1.80.0"
  },
  "categories": ["Other"],
  "activationEvents": [],
  "main": "./out/extension.js",
  "contributes": {
   
    "commands": [
      {
   
        "command": "function-call-graph.showGraph",
        "title": "Show Function Call Graph"
      }
    ],
    "menus": {
   
      "editor/context": [
        {
   
          "command": "function-call-graph.showGraph",
          "group": "navigation"
        }
      ]
    }
  },
  "scripts": {
   
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./"
  },
  "devDependencies": {
   
    "@types/vscode": "^1.80.0",
    "@types/node": "^16.11.7",
    "typescript": "^5.1.3"
  }
}

// src/extension.ts
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
   
  let disposable = vscode.commands.registerCommand('function-call-graph.showGraph', () => {
   
    const panel