google
Agent Visualization
Is your feature request related to a problem? Please describe.
While developing and debugging multi-agent systems using the Agent Development Kit (ADK), it can be challenging to visualize the relationships and interactions between agents, tools, and handoffs. This lack of visualization makes it harder to understand complex agent architectures and to debug issues effectively.  
Describe the solution you’d like
I propose adding a built-in agent visualization feature to ADK, similar to the draw_graph functionality in the OpenAI Agents SDK. This feature would generate a structured graphical representation of agents and their relationships using Graphviz. Agents could be represented as yellow boxes, tools as green ellipses, and handoffs as directed edges between agents. Such a visualization would aid in understanding and debugging agent workflows. 
Describe alternatives you’ve considered
Currently, developers might manually create diagrams to represent agent relationships, but this is time-consuming and prone to errors. Alternatively, one could attempt to integrate external visualization tools, but a native solution within ADK would provide a more seamless and efficient experience.
Additional context
The OpenAI Agents SDK provides an example of such a visualization feature: https://openai.github.io/openai-agents-python/visualization/  
Implementing a similar feature in ADK would enhance its usability and align it with other agent development frameworks.
We have the visualization in adk web, have you checked it out? https://raw.githubusercontent.com/google/adk-python/main/assets/adk-web-dev-ui-function-call.png
@boyangsvl thank you for your prompt comment! Yes, I checked out visualization tool which is a very handy event tracing when we chatting with our agents through ADK's WebUI. However, there will be cases that our agents are deployed through API service or CLI, in that case we cannot see the visualization of our agents. Also since we're planning to use Google ADK as our Enterprise agentic framework to create all kinds of agents across different teams, it's good to generate a graphviz diagram similar to what OpenAI SDK's feature and put it next to our source code. So that it's easier to collaborate across different teams~
I see. We can provide an API that returns the graphviz code, or even a rendered PNG.
@boyangsvl fantastic! And looking forward to use this new feature. Would be cool if calling the new API can generate a rendered graph PNG!
@rwang1987 I believe there is a function that can help you achieve this. You could try importing the get_agent_graph from google.adk.cli.agent_graph.
Below is the code snippet I used to generate the graph:
image = get_agent_graph(root_agent,[], image=True)
with open("agent_graph.png", "wb") as f:
f.write(image)
print("Agent graph saved as agent_graph.png")
get_agent_graph(root_agent,highlight_pairs, image=False)
- The first argument asks you to add the root agent (this will be the root of the graph).
- The second argument asks you the add the highlight_pairs. This will include the exact names of the agent and tool you want to be highlighted.
- The third argument takes in a boolean. If True the function returns the image in bytes for a png extension, else just returns the Digraph object from the graphviz python library
Let me know if you encounter any issues, or you want something else on top of this.
Thank you so much @BhadrakshB ! Using the provided gen_agent_graph, yes, we can now generate the same graph as we have in WebUI! I just have one question, that our generate graph doesn't seem to capture different agent pattern very nicely. For example, I have a Loop Agent with Architecture looks like:
But when use the gen_agent_graph, it seems to lose the loop part:
Can the graph tool be enhanced so that it can capture different patterns more accurately?
Okay, I have changed the code locally to show ParallelAgent, SequentialAgent and LoopAgent this way. Could you please let me know if this would work as a good UI?.
Okay, I have changed the code locally to show ParallelAgent, SequentialAgent and LoopAgent this way. Could you please let me know if this would work as a good UI?.
Yes, @BhadrakshB I think this looks awesome! Thank you so much!
@boyangsvl I have changed the code to show the graph view of LoopAgent, SequentialAgent and ParallelAgent in this way as shown in the image. Could I be assigned this issue so that I can make a pull request on this?
This looks great! Thank! Yes, you are more than welcome to work on this feature. Just some nit, why is there an arrow from Dummy2 to JobTitleGenerationAgent?
Actually that is a loop agent. Since I was just testing I copy pasted the Sequential agent, Made it into a loop agent and worked on making the right graph. That cluster is actually supposed to be "JobTitleGenerationLoopAgent".
Thanks, it makes sense! Is there a way to show the type of agent in the box so we don't depend on just the name of the agent to guess the workflow time? I've assigned this issue to you @BhadrakshB . Thanks for your contribution!
Ya sure. I could make an isinstance check and add it to the label in brackets.
Does this final graph give a good visual picture of AI Agent Architecture?
I created a PR. Could you please review that when you have time. Thanks @boyangsvl
This looks awesome fits our use case too. Any timeline we can expect https://github.com/google/adk-python/pull/482 to be merged?
