generateVisualization()

import { generateVisualization } from "agentopology";

Generates a self-contained interactive HTML visualization of a parsed topology. The output shows agents as nodes, flow edges as connections, and conditional routing as labeled edges.

Signature

function generateVisualization(ast: TopologyAST): string

Parameters

Returns

A string containing a complete HTML document. The visualization is self-contained with no external dependencies -- all CSS and JavaScript are inlined.

Usage

import { parse, generateVisualization } from "agentopology";
import { readFileSync, writeFileSync } from "fs";

const source = readFileSync("my-topology.at", "utf-8");
const ast = parse(source);

const html = generateVisualization(ast);
writeFileSync("topology.html", html);

Open topology.html in a browser to see the interactive graph.

What the visualization shows

• Agent nodes -- Each agent is rendered as a node with its name and role
• Flow edges -- Connections between agents show the routing
• Conditional labels -- Edges with when conditions display the condition text
• Loop indicators -- Edges with max guards show the retry limit
• Orchestrator -- If present, the orchestrator is displayed as a distinct node
• Entry and exit points -- intake and done endpoints are marked

Combining with parse and validate

A typical pipeline parses, validates, then visualizes:

import { parse, validate, generateVisualization } from "agentopology";
import { readFileSync, writeFileSync } from "fs";

const source = readFileSync("my-topology.at", "utf-8");
const ast = parse(source);
const result = validate(ast);

if (!result.valid) {
  console.error("Fix errors before visualizing:", result.errors);
  process.exit(1);
}

const html = generateVisualization(ast);
writeFileSync("topology.html", html);
console.log("Visualization saved to topology.html");

CLI equivalent

The CLI wraps this API:

agentopology visualize my-topology.at

To save as a static image:

agentopology visualize my-topology.at --format png --output graph.png

What's next

• Parse topology files into ASTs
• Validate topologies before visualizing
• Learn about bindings to scaffold platform configs