讲一下如何使用我的 ida-graph-exporter 把 IDA 的 graph view 导出成可交互的 HTML

# 为什么要导出成 HTML

写逆向文章时，IDA 的 graph view 比纯文本汇编更适合展示控制流。问题是截图不方便阅读，SVG/PDF 也不适合放到网页里交互查看，且可互动的图更好玩

所以我fork并改了一个很简单的 IDAPython 脚本，把当前函数的 graph view 导出成一个自包含的 HTML 文件。

导出的 HTML 可以直接用浏览器打开，也可以放到博客的 static/files/ 目录里，然后用 iframe 嵌入文章。

# Usage

先clone项目：

git clone https://github.com/HundSimon/ida-graph-exporter.git

然后用 IDA 打开要分析的二进制，进入目标函数，并切到 graph view。

注意这里必须是真正的 IDA graph view。脚本会读取当前 viewer 里的节点位置、节点大小和边的折线路径。如果只是在 text view 或 pseudocode view 里运行，导出来的结果就不对。

然后在 IDA 里运行脚本：

File -> Script file...

选择 export_ida_graph.py。

脚本会弹出保存文件的窗口，默认文件名是当前函数名，比如：

manual_add_poll.html

保存后就会得到一个单独的 HTML 文件。这个文件里已经包含了 graph 数据，不需要额外的 JSON 或图片。

# 查看

直接用浏览器打开导出的 HTML 即可。

操作方式：

• 拖动：平移 graph
• 鼠标滚轮：上下移动
• Shift + 鼠标滚轮：左右移动
• Ctrl + 鼠标滚轮：缩放
• 点击地址或名字引用：跳到对应地址锚点

# 放到博客里

如果只是想提供下载或单独查看，直接把 HTML 放到 Hugo 的 static/files/ 目录即可，例如：

static/files/reverse-async/graph-rust-manual-add-poll.html

文章里可以这样链接：

[查看 Graph HTML](/files/reverse-async/graph-rust-manual-add-poll.html)

也可以直接用 iframe 嵌入文章：

<iframe
  src="/files/reverse-async/graph-rust-manual-add-poll.html"
  style="width: 100%; height: 640px; border: 0; background: #1f2024;"
  loading="lazy"
></iframe>

实际效果：

这样读者不需要离开当前文章就能拖动和缩放 graph。缺点是如果同一篇文章里放很多个 graph，页面会变重，所以我更常用下面的 tab 形式。

{{< artifact-links graph="/files/reverse-async/graph-rust-manual-add-poll.html" pseudo="/files/reverse-async/pseudo-rust-manual-add-poll.c" asm="/files/reverse-async/rust-state-machine-x86_64.s" >}}

其中 graph 就是 Graph HTML，pseudo 和 asm 是可选的。只有文件存在时，对应 tab 才会显示。

# 它导出了什么

脚本会从当前函数里导出这些信息：

• 输入文件的 sha256
• 当前函数地址和函数名
• basic block 的位置、大小、地址范围和原始字节
• 每条反汇编文本的 IDA color token
• graph edge 的折线路径
• true/false/normal 分支类型

浏览器端会根据这些数据重新画出 graph。边的颜色目前按分支类型处理：

false/no edge       red
true/yes edge       green
normal edge         blue

这样比截图更适合看大函数，因为读者可以拖动、缩放，也可以在 iframe 里查看完整控制流。

# 注意

这个导出不是 IDA 原生 graph view 的完美复制。

目前已知限制：

• 字体不一定和 IDA 完全一致
• IDA 通过 IDAPython 暴露的一些背景色不可靠
• 节点标题栏图标没有复现
• 需要有 UI 中的当前 graph view，不能纯 headless 导出
• graph 布局来自当前 IDA viewer，所以导出前最好让 IDA 已经完成 graph 布局

如果导出后发现文字挤出节点，可以先在 IDA 里调整 graph view，再重新导出。HTML 端也会根据浏览器文本尺寸自动缩小字体和行高，尽量避免溢出。