[Docs] Convert Mermaid Diagrams to Images in User Guide

[harishmohanraj]

During the recent rewrite of the basic guide and new group chat documentation in the user guide, we created several Mermaid diagrams to illustrate concepts and workflows. These diagrams need to be converted to proper images that adhere to our brand guidelines to ensure consistency across all documentation.

Diagrams to update:

• [x] Basic Concepts / Overview / Workflow: #1710
• [x] Basic Concepts / Human in the Loop: Adding Human Oversight / Financial Compliance Example #1712
• [ ] Basic Concepts / Agent Orchestration: Coordinating Multiple Agents / Understanding the Group Chat Workflow
• [ ] Basic Concepts / Agent Orchestration: Coordinating Multiple Agents / Updated Flow with Automatic Termination
• [ ] Basic Concepts / Tools: Extending Agent Capabilities / How Tool Usage Works in AG2
• [ ] Basic Concepts / Tools: Extending Agent Capabilities / Understanding the Enhanced Workflow
• [ ] Basic Concepts / Structured Outputs: Ensuring Consistent Responses / Understanding the Enhanced Workflow
• [ ] Advanced Concepts / Agent Orchestration Deep Dive / Group Chats / Overview / What Happens During Execution
• [x] Advanced Concepts / Agent Orchestration Deep Dive / Group Chats / Handoffs / Configuring LLM-Based Handoffs
• [x] Advanced Concepts / Agent Orchestration Deep Dive / Group Chats / Handoffs / Configuring Context-Based Handoffs
• [x] Advanced Concepts / Agent Orchestration Deep Dive / Pattern Cookbook / Context-Aware Routing – https://docs.ag2.ai/latest/docs/user-guide/advanced-concepts/pattern-cookbook/context_aware_routing/#agent-flow

[allisonwhilden]

@harishmohanraj I found the ten diagrams above from clicking thru the latest version of the documentation. I'll see if I notice more, but will get started on updating these. It might take some time to make all of these, but I'll create PRs as I have them so we can incrementally replace them. Thanks!

[Lancetnik]

@harishmohanraj @allisonwhilden @kumaranvpl hi! Can you suggest a tool to generate our styled images from mermaid? People can't help us without this information

[allisonwhilden]

There is not a tool to generate them. I made the few we have by hand modifying assets that were made for our website using Figma. I've thought a little bit about if there was a better way to automate it as the current assets are very tedious to customize, but haven't had time to investigate that.