Claude Code 的 Skill 很适合封装成“一键生成 AST 可视化 HTML”。

可以，Claude Code 的 Skill 很适合封装成“一键生成 AST 可视化 HTML”。

常见做法有两种：

方案1：Skill 调用 Tree-sitter + Mermaid

输入：

 

/analyze-ast drivers/pci/device.c

 

Skill 自动执行：

 

tree-sitter parse device.c

 

生成：

然后嵌入 HTML：

<html>

<head>

  https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.jsscript>

</head>

<body>

<div class="mermaid">

graph TD

...

</div>

<script>

mermaid.initialize({ startOnLoad:true });

</script>

</body>

</html>

最终得到：

 

ast_report.html

 

浏览器直接打开即可。

---

方案2：Skill 一键生成交互式 AST 页面

很多人更喜欢：

 

clang -Xclang -ast-dump=json

 

输出 JSON：

 

clang -Xclang -ast-dump=json </span>

      -fsyntax-only file.c </span>

      > ast.json

 

然后 Skill 自动运行：

 

python json2html.py ast.json

 

生成：

 

ast.html

 

页面支持：

• 树状展开/折叠
• 搜索节点
• 点击节点显示源码位置
• 高亮 FunctionDecl
• 高亮 StructDecl
• 高亮 CallExpr

效果类似 VSCode AST Explorer。

---

方案3：最实用的一键 Command

例如放到项目脚本：

 make ast FILE=drivers/pci/device.c

 实际执行：

 clang -Xclang -ast-dump=json </span>

      -fsyntax-only $(FILE) </span>

      > /tmp/ast.json

 python tools/ast_viewer.py </span>

       /tmp/ast.json </span>

       ast.html

 xdg-open ast.html

 

开发人员只需要：

 

make ast FILE=test.c

 

即可弹出浏览器。

---

Claude Skill 示例

目录：

 

.claude/

└── skills/

    └── ast-viewer/

        ├── SKILL.md

        ├── ast_viewer.py

        └── template.html

 

SKILL.md

---

name: ast-viewer

description: Generate AST visualization HTML

---

 

When user asks for AST analysis:

 

1. Run clang -ast-dump=json

2. Convert json to html

3. Save ast.html

4. Open ast.html

然后在 Claude 中直接： 

 $ Generate AST visualization for drivers/pci/device.c 

或者： 

 $ Show me AST of this file

 Skill 自动生成： 

ast.html

 

---

如果你做 Linux Kernel、PCIe、Driver 开发，我更推荐： 

clang AST JSON

        ↓

D3.js Tree Viewer

        ↓

单文件 ast.html 

因为比 Mermaid 更适合几万行代码，支持折叠、搜索和节点定位源码行号。对于 PCIe Driver、Protocol Stack、HAL 代码分析效果非常好。