> ## Documentation Index
> Fetch the complete documentation index at: https://agency-swarm.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Agency Visualization

> Create interactive HTML visualizations and get ReactFlow-compatible data

Agency Swarm provides two visualization methods:

1. **`visualize()`** - Creates interactive HTML files
2. **`get_agency_graph()`** - Returns ReactFlow-compatible JSON

<Tabs>
  <Tab title="HTML Visualization">
    ## `visualize()`

    Creates a self-contained HTML file with interactive agency visualization.

    ```python theme={null}
    def visualize(
        self,
        output_file: str = "agency_visualization.html",
        include_tools: bool = True,
        open_browser: bool = True
    ) -> str
    ```

    ### Parameters

    | Parameter       | Type   | Default                       | Description                    |
    | --------------- | ------ | ----------------------------- | ------------------------------ |
    | `output_file`   | `str`  | `"agency_visualization.html"` | Path to save HTML file         |
    | `include_tools` | `bool` | `True`                        | Whether to include agent tools |
    | `open_browser`  | `bool` | `True`                        | Whether to open in browser     |

    ### Example

    ```python theme={null}
    from agency_swarm import Agency, Agent, function_tool

    @function_tool
    def analyze_data(data: str) -> str:
        """Analyze data"""
        return f"Analysis: {data}"

    analyst = Agent(
        name="Analyst",
        instructions="You analyze data.",
        tools=[analyze_data]
    )

    manager = Agent(
        name="Manager",
        instructions="You coordinate work."
    )

    agency = Agency(
        manager,
        communication_flows=[(manager, analyst)],
        name="Analysis Agency"
    )

    # Create visualization
    html_file = agency.visualize()
    print(f"Saved to: {html_file}")
    ```
  </Tab>

  <Tab title="ReactFlow Integration">
    ## `get_agency_graph()`

    Returns ReactFlow-compatible JSON data for custom frontend integration.

    ```python theme={null}
    def get_agency_graph(
        self,
        include_tools: bool = True
    ) -> dict[str, Any]
    ```

    ### Returns

    ```python theme={null}
    {
        "nodes": [
            {
                "id": "Manager",
                "type": "agent",
                "position": {"x": 100, "y": 50},
                "data": {
                    "label": "Manager",
                    "description": "Agent description",
                    "isEntryPoint": True,
                    "toolCount": 0
                }
            }
        ],
        "edges": [
            {
                "id": "Manager->Analyst",
                "source": "Manager",
                "target": "Analyst",
                "type": "communication"
            }
        ]
    }
    ```

    ### Node Types

    * **Agent nodes**: `type: "agent"` with agent metadata
    * **Tool nodes**: `type: "tool"` with parent agent reference

    ### Edge Types

    * **Communication**: `type: "communication"` between agents
    * **Ownership**: `type: "owns"` from agent to tool

    ## Frontend Integration

    Expose `get_agency_graph()` in your API, then use the JSON directly in React:

    ```tsx theme={null}
    import ReactFlow from 'reactflow';

    const agencyData = await fetch('/your-graph-endpoint').then(r => r.json());

    function AgencyVisualization() {
      return (
        <div style={{ height: '600px' }}>
          <ReactFlow
            nodes={agencyData.nodes}
            edges={agencyData.edges}
            fitView
          />
        </div>
      );
    }
    ```
  </Tab>
</Tabs>