1. Problem Statement

The Webex Contact Center (WxCC) 2.0 Flow Control provides a powerful, node-based graphical interface for designing and managing customer call flows. While this interface is excellent for creation and real-time modification, it lacks a native function to export the visual layout into a standard documentation format, such as a PNG, JPEG, PDF, or Visio diagram. This capability is critical for several business processes, including:

• Business User Review and Sign-off: Non-technical stakeholders require easily digestible diagrams to review and approve call flow logic.
• Technical Documentation: Maintaining accurate, version-controlled documentation of IVR flows is essential for support and future development.
• Agent and Supervisor Training: Visual aids are crucial for training contact center staff on how calls are routed and what customers experience.

Manually recreating these diagrams is inefficient, introduces the risk of discrepancies between the documentation and the active flow, and becomes unmanageable as flows increase in complexity.

2. Core Technical Principle: The Underlying Data Structure

The key to solving this problem, as identified in the community discussion, is to recognize that the visual representation of the flow in the WxCC portal is rendered from a structured data object, specifically a JSON (JavaScript Object Notation) payload. This JSON object contains all the necessary information about the flow: every node (e.g., “Play Message,” “Menu,” “Get Digit String”), their specific properties and configurations, and the connections (links) that define the logical path between them.

Our solution, therefore, is not to “screenshot” or “scrape” the visual interface, but to intercept this underlying JSON data and use a programmatic tool to translate it into a standard flowchart diagram.

3. Detailed Implementation Guide

This solution leverages browser developer tools to capture the flow’s JSON definition and a third-party diagramming library, Mermaid.js, to render the visual chart. Mermaid.js is a lightweight, JavaScript-based library that generates diagrams from text and markdown-style syntax, making it ideal for this programmatic approach.

Step 1: Extracting the Flow JSON from WxCC

1. Log in to the WxCC Management Portal: Access your WxCC tenant with administrative privileges.
2. Navigate to the Flow: Go to Routing Strategy -> [Your Target Flow]. Open the flow in the editor.
3. Open Browser Developer Tools: Press F12 (or Ctrl+Shift+I on Windows, Cmd+Option+I on Mac) to open the developer tools in your browser (Chrome or Firefox recommended).
4. Select the Network Tab: Click on the “Network” tab within the developer tools. This tab monitors all network requests made by your browser.
5. Filter Network Requests: To easily find the relevant data, filter the requests by “Fetch/XHR”. This will show only the API calls made in the background.
6. Trigger the API Call: To ensure the flow data is loaded, either refresh the browser page or make a minor, non-destructive change in the flow (like moving a node slightly) and click “Publish” or “Save”. This action will trigger an API call to fetch or update the flow’s definition.
7. Identify and Copy the JSON Payload: Look for a network request in the log, typically a GET or PUT request, that contains the flow’s unique ID in its URL. For example, the request might look like .../v1/flows/execution/{flow-id}.
   • Click on this request.
   • In the details pane, go to the “Response” or “Preview” tab.
   • You will see the complete JSON structure of your flow. Copy this entire JSON object to your clipboard.

Step 2: Parsing the JSON and Generating Mermaid Syntax

The extracted JSON contains two primary components we care about: a list of nodes and a list of links.

• nodes array: Each object in this array represents a block in your flow. It will have properties like id (a unique identifier), type (e.g., playMessage, menu), and label or name.
• links array: Each object represents a connection. It will have source and target properties, which correspond to the id of the nodes being connected. It may also contain label information for conditional branches (e.g., “Press 1,” “Timeout”).

We will use a simple script (JavaScript is ideal) to parse this JSON and convert it into Mermaid’s flowchart syntax.

Conceptual Script Logic (JavaScript):

// Paste the copied JSON here
const wxccFlowJson = { ... }; 

let mermaidSyntax = 'graph TD;\n'; // 'TD' for Top-Down graph

// Process each node
wxccFlowJson.nodes.forEach(node => {
    // Sanitize node labels for Mermaid syntax (remove special characters)
    const sanitizedLabel = node.label.replace(/"/g, '#quot;');
    // Create the Mermaid node definition: ID["Label (Type)"]
    mermaidSyntax += `    ${node.id}["${sanitizedLabel}<br><i>(${node.type})</i>"];\n`;
});

// Process each link
wxccFlowJson.links.forEach(link => {
    // Create the Mermaid link definition: sourceId -->|Label| targetId
    if (link.label) {
        mermaidSyntax += `    ${link.source} -->|${link.label}| ${link.target};\n`;
    } else {
        mermaidSyntax += `    ${link.source} --> ${link.target};\n`;
    }
});

console.log(mermaidSyntax);

Step 3: Rendering the Visual Diagram

Once you have the generated Mermaid syntax, you can render it in several ways:

1. Mermaid Live Editor: The easiest method. Go to https://mermaid.live. Paste the generated syntax into the editor, and it will render the diagram in real-time. From there, you can export it as a PNG or SVG file.

2. Local HTML File: Create a simple HTML file and include the Mermaid.js library. This gives you a self-contained, shareable document.

   <!DOCTYPE html>
   <html>
   <body>
       <div class="mermaid">
           <!-- Paste your generated Mermaid syntax here -->
           graph TD;
               node1["Start"];
               node2["Play Welcome Message"];
               node1 --> node2;
       </div>
       <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
       <script>mermaid.initialize({startOnLoad:true});</script>
   </body>
   </html>
   

3. Markdown Integration: Tools like GitHub, GitLab, and many modern documentation platforms natively support Mermaid syntax within markdown files.

4. Benefits and Limitations

Benefits:

• Accuracy: The diagram is generated directly from the flow’s source data, ensuring a 1:1 match with the production logic.
• Efficiency: Automates a previously manual and lengthy process, saving significant time and effort.
• Version Control: The source JSON can be stored in a version control system (like Git) alongside the generated Mermaid syntax, providing a complete history of changes.
• Scalability: Works for even the most complex flows where manual diagramming would be impractical.

Limitations:

• Unsupported Method: This is not an official Cisco-supported feature. Future changes to the WxCC API or JSON structure could break the process.
• Technical Skill Required: Requires a user comfortable with browser developer tools and basic scripting concepts.
• Script Maintenance: The parsing script may need adjustments to handle new node types or complex branching logic more elegantly.

Conclusion

While awaiting a native export feature from Cisco, this programmatic approach provides an immediate, powerful, and reliable solution to a critical documentation and communication gap for WxCC 2.0 administrators. By leveraging the flow’s underlying JSON data, we can automate the creation of accurate, easy-to-read visual diagrams, thereby improving collaboration, reducing errors, and streamlining the entire lifecycle management of IVR call flows.