Ai Assistant

Code Visualization

Software Development

Claude Code

Stop Manually Reading Huge Codebases! Use AI Instead!

Recently OpenClaw just gained a lot of attention in agentic AI community. I was curious how this tool works and what features does it offer and how these features are implemented. So, I decided to read the source code.

Given that I know Go more than TypeScript, I preferred to read the Go implementation of OpenClaw called PicoClaw instead. However, there is one problem, this repository is just too big! It has over 116k lines of code!

So, instead of going back and force starting from the main function across different files, I decided to viusalize the function call trace of the code the old way, HOWEVER , this time with the help of AI Assistants.

1. Explain the task in pseudo-code

First of all, I came up with a pseudo-code written in python-like syntax that explains the process of visualization of the graph.

The idea of the visualization algorithm is simple: whenever you reach a function call, you create a box that represents that function. And a line that connects the function call to the newly created box. And if you reach regular lines of codes, just write them as they are.

Here is the Algorithm:

# A pseduo code for visualizing the function call graph starting from a function.
# until it reaches the end of the call graph.


def create_new_box(location, width, height):
    create a box with width and height at the location.
    
    return the location of the box

def open_function(previous_box, call_location, func1):
    
    title = f'{file_name}:{class_name}.{func_name}({arguments})'
    new_location = to the right of previous_box
    width = enough to cover the title
    height = enough to cover the number of lines of the body of the function
    current_location = create_new_box(new_location, width, height)
    create an arrow that connects call_location to new_location
            
    for i, line in enumerate(func1.lines()):
        if (line is a function call) AND (the function is defined in this repo):
            open_function(current_location, i, func1)
        else:
            write the line as it is

def main(starting_point_of_code):
    open_function(None, None, starting_point_of_code)

I save this piece of python-like code as a python file ( visualization_pseduo_code.py ) in the root of my cloned repository.

2. Now ask the model to visualize it for you

I use Claude Code for this task with Pro subscription and Opus 4.6. As I have also tried, Google’s AntiGravity and OpenAI’s Codex would do the job with a strong enough reasoning model.

I used the following prompt. You can also use your customize it.

I would like to create an html based on the pseudo code algorithm that I have
defined in @visualization_pseduo_code.py Imagine the start of the code that I
 would the graph for is in @cmd/picoclaw/main.go at line 122.

Note 1: Do not run or make changes to any part of code.

Note 2: Create a dark theme for this visualization of HTML and hovering over 
each box should have nice glowing effect. The boxes of the subgraph should 
be only shown when the user clicks on the function name and the focus should
be moved to the box after clicking.

Note 3: each box should have two buttons on top of them one for closing them
which would disappear the box and move back to the previous box.
And the other one should only move us back to the previous box without
closing the new box.

Note 4: make sure to keep the formatting of the code as it is.
Indentations, spaces and new lines matter.

Name the file function_trace_picoclaw.html

3. The Result

Here are some screen shots of how the generated html file looks like. Since it is only using JavaScript and html, it does not need any sort of server setup and hosting and you can open it in your custom browser.

Figure 1. Each box represents a function and its body.

By clicking on each function you can view it in a box openned to the right. And the functions that are from imported libraries such as pytorch, numpy or so on will not be opened in this manner ( although we can do that as well)

Figure 2. We can visualize functions in this way as nested as they can be.

Figure 3. The visualization style is also pleasing.

Final Thoughts

Feel free to try it yourself on your custom repos. And let me know of what you think. The interesting thing about using AI agents is that you do not need to write any program from scratch to perform specific tasks such as this one that requires several days of human thought and effort. You can just explain what you want to achieve in python-like language and it will successfully complete that.