Skip to content
Amazon Connect · Contact flows

Amazon Connect Contact Flow Visualizer

Turn exported contact flow JSON into an interactive diagram, then trace paths, find missing error branches and loops, list dependencies, extract the prompt script and compare versions.

Last updated

CLIENT-SIDE ONLY NO DATA UPLOADED SUPPORTS FLOWS & MODULES
// CONTACT FLOW VISUALIZER
Amazon Connect Contact Flow Visualizer: turn flow JSON into a readable diagram

Paste or upload a contact flow exported from the Amazon Connect console (or fetched via DescribeContactFlow) and instantly see it as an interactive, zoomable node graph — success paths, error branches, conditions and loop-backs all colour-coded. Use it as a fast visual QA pass before you deploy a flow change. Nothing is ever uploaded to a server.

FLOW INPUT
Drag & drop a flow .json file here
or click to browse — file never leaves your browser
Entry point auto-detected
Unreachable blocks detected
Exceeds the 250-block-per-flow limit
100%

Free Amazon Connect Contact Flow Visualizer

Amazon Connect flows are authored as JSON in the Connect Flow Language: an ordered list of Actions, each with a Type, a Parameters object, and a Transitions object pointing to the next Action by NextAction, plus optional Errors and Conditions branches. That structure is easy for a machine to run and painful for a human to read as raw text — especially on flows with 50, 100 or the maximum 250 blocks. This tool parses that JSON entirely in your browser and draws it as a proper diagram: boxes for blocks, coloured arrows for success/error/condition/loop-back transitions, so you can visually confirm a flow looks right before you import or deploy it — no editor, no server round-trip, no account required.

What you can check with it

  • Confirm the flow actually connects from StartAction to a terminal block (Disconnect, End Flow Execution, Transfer) with no dead ends.
  • Spot orphaned blocks — Actions present in the JSON that nothing transitions into, which the Connect designer often leaves behind after edits.
  • See every error branch (Transitions.Errors) and condition branch (Transitions.Conditions) at a glance, colour-coded and labelled.
  • Trace loop-backs — transitions that point to an earlier block — which are drawn as distinct curved edges so they don't get mistaken for the main path.
  • Render either an auto-generated layered layout, or the original Metadata.ActionMetadata canvas positions exported from the console, so the diagram matches what the designer actually looked like.

How to export flow JSON to use here

  • Console: open the flow in Flow Designer → menu (⋮) in the top-right → Export as → downloads a .json file you can drag straight into this tool.
  • AWS CLI / SDK: call describe-contact-flow (or describe-contact-flow-module) — the response wraps the flow JSON as a string in ContactFlow.Content. Paste the whole API response and this tool automatically unwraps it.
  • Infrastructure as code: Terraform's aws_connect_contact_flow.content, CloudFormation's AWS::Connect::ContactFlow Content, and the CDK's CfnContactFlow all use this same JSON string — paste it directly.
Is my contact flow JSON uploaded anywhere?
No. Parsing, layout and rendering all happen with JavaScript running in your own browser tab. Nothing is sent to Kloudmint or any third-party server — you can verify this by disconnecting from the network after the page loads and the tool still works.
What is the Actions, Transitions and Metadata structure in a Connect flow?
Every flow has a top-level Version, a StartAction identifier, an Actions array, and an optional Metadata object. Each Action has an Identifier, a Type, a Parameters object specific to that Type, and a Transitions object. Transitions.NextAction points to the default next Action; Transitions.Errors is a list of error-type-to-Action mappings; Transitions.Conditions is an ordered list of condition-to-Action mappings evaluated top to bottom. Metadata.ActionMetadata can store each block's canvas x/y Position, which this tool can reuse for layout.
Why does a block appear disconnected or orphaned in the diagram?
A block is flagged orphaned when no other Action's NextAction, Errors[].NextAction or Conditions[].NextAction references its Identifier, and it isn't the StartAction — meaning the flow can never actually reach it at runtime. This commonly happens after a block is deleted and re-added in the designer, or after a manual JSON edit removes a transition without removing the block it pointed to.
What counts as a terminal or dead-end block?
Per the Flow Language spec, an Action that ends the flow's run defines Transitions as an empty object — no NextAction, no Errors, no Conditions. Blocks like Disconnect / Hang Up and End Flow Execution are typically terminal this way. This tool detects terminal blocks structurally (an empty Transitions object) rather than by name, so it stays accurate even for block types introduced after this page was published.
What is the maximum size of a Connect flow?
A single flow may have no more than 250 Actions defined, per the AWS Connect Flow Language documentation. This tool warns you when a parsed flow exceeds that limit so you know it will be rejected by CreateContactFlow / UpdateContactFlowContent before you try to deploy it.
Can this tool visualize Contact Flow Modules, not just flows?
Yes. Contact Flow Modules use the same Actions/Transitions/Metadata structure as flows. If the JSON has no StartAction field, the tool falls back to the first Action in the Actions array as the visual entry point and shows a notice, since modules invoked by InvokeFlowModule can have multiple valid entry points depending on the calling flow.
Does the diagram tell me if ARNs, Lambda functions or queues are valid?
No — this tool focuses purely on structure and layout. For ARN format validation, broken-reference detection, duplicate identifiers and per-action-type error-branch coverage checks, use the companion Contact Flow JSON Validator, which is designed to pair with this visualizer in an export → visualize → validate workflow.
What do the dashed vs solid lines mean?
A solid teal line is the default NextAction path. A dashed red line is an error transition, labelled with its ErrorType. A dashed blue line is a condition transition, labelled with the matched value. A dashed grey curved line is a loop-back — a transition pointing to a block earlier in the flow, typically a retry or re-prompt loop.
Will this tool need updating when AWS adds new block types?
No. Known block Types are shown with friendly display names, but any Type the tool doesn't recognize is still rendered correctly — it's auto-categorized from its structure (terminal vs branching) and its name is auto-formatted for readability, so new Amazon Connect block types render sensibly without any code changes.
Can I export the diagram to share with my team?
Yes. Use the SVG button for a scalable vector file you can drop into documentation, or the PNG button for a raster image suitable for tickets, pull requests or Slack. Both are generated locally from the current view — nothing is uploaded.
BLOCK TYPE
Block name
Practical guide

Reviewing a flow before go-live: a worked example

The Connect flow designer is good for building a flow but poor for reviewing one. Large flows sprawl across the canvas, and it is easy to miss a branch that leads nowhere. Exporting the flow and loading it here gives you a clean diagram you can walk through with the team. This is the review checklist we use, applied to a typical main IVR.

The example flow

A main inbound flow that: sets logging and the voice, checks hours of operation, plays a greeting, offers a three-option menu (Sales, Support, Billing), sets the working queue for each option and transfers to queue. Load the Advanced sample from the dropdown (queue transfer, Lambda and a loop-back) to follow along.

1. Start at the entry point

The first blocks should be Set logging behavior (logging enabled) and Set voice. If logging is not enabled at the very start, the first part of every contact will be missing from CloudWatch exactly when you need it for troubleshooting.

2. Follow every branch to an end

Each path must finish at a terminal action: Transfer to queue, Transfer to flow, Disconnect or a phone transfer. The diagram highlights blocks with no outgoing connection. A Get customer input block needs a path for every option, plus Timeout, Default and Error. A missing timeout branch is the classic cause of callers hearing silence and then being dropped.

3. Check the order of routing blocks

  • Check hours of operation should run before the caller is queued, with a separate path for closed hours and holidays.
  • Set working queue must run before Transfer to queue on every branch. A branch that skips it transfers to whatever queue was set earlier, or fails.
  • Set contact attributes that routing depends on (language, tier, intent) must come before the block that reads them.

4. Look for loops

Retry loops ("Sorry, I didn't get that") are normal, but each one needs an exit after a fixed number of attempts, usually through a Loop block or a counter attribute. An unbounded loop keeps a caller in the IVR until they hang up, and every minute is billed.

5. Check every Error branch

Invoke AWS Lambda function, Get customer input with Lex, and Transfer to queue (queue full or closed) all fail sometimes. Route Error branches to a sensible fallback, such as a default queue or a short apology and a callback offer, rather than straight to Disconnect.

Flow insights: beyond the diagram

Below the diagram, the Flow insights panel analyses the flow in five ways. None of them are available in the Amazon Connect flow designer.

  • Checks: lists every block that can fail but has no error branch connected (Lambda calls, customer input, queue transfers, Lex bots), missing Default, Timeout and At capacity branches, links to blocks that no longer exist, and loops with no Loop block to limit retries. Choose Error handling to colour the diagram green, amber or red.
  • Path tracer: pick any block to highlight every route that leads to it and everything that can happen after it, with the shortest route from the start listed step by step. That answers "how does a caller end up here?" in seconds.
  • Dependencies: every Lambda function, Lex bot, queue, prompt, flow, module, hours of operation and contact attribute the flow uses, with the blocks that use them. Download it as CSV for a migration or change-review checklist.
  • Prompt script: every prompt in the order a caller hears it, including menu options and where each one goes. Download it as text or CSV for business sign-off, translation or a recording vendor.
  • Compare versions: load an older export of the same flow to see which blocks were added, removed or changed, and exactly which parameters and branches changed. Choose Changes to colour the diagram.

Common design problems this view exposes

  • Orphan blocks: blocks left on the canvas with no incoming connection. They are harmless, but they confuse the next person who edits the flow, so remove them.
  • Duplicate logic: the same set-attribute and prompt sequence copied into several branches. Move it into a flow module so a change happens in one place.
  • Hardcoded ARNs: queue, prompt and Lambda ARNs that point at one instance. They break when you import the flow into another environment. Run the flow through the ARN Parameterizer before promoting it.
  • Very large flows: flows with hundreds of blocks are hard to test and slow to edit. Split them into a main flow and modules by function: authentication, menu, queueing.

Getting the JSON

In the flow designer choose Export flow (this downloads JSON), or use the API: aws connect describe-contact-flow --instance-id <id> --contact-flow-id <id>. The tool accepts both the raw flow content and the full API response. Everything is drawn in your browser, so you can safely review production flows.

Official references

Runs 100% in your browser. Your files and data never leave your machine. Nothing is uploaded or stored.

Stuck on an Amazon Connect problem?

Get help from an architect with 8+ years in contact centres and 4+ years on Amazon Connect: flows, CCP and CRM integrations, Lex and Q in Connect, migrations and go-lives.