// CONTACT FLOW VISUALIZER
Last updated: — built against the Amazon Connect Flow Language (spec version 2019-10-30)
Turn exported 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
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
StartActionto 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.ActionMetadatacanvas 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
.jsonfile you can drag straight into this tool. - AWS CLI / SDK: call
describe-contact-flow(ordescribe-contact-flow-module) — the response wraps the flow JSON as a string inContactFlow.Content. Paste the whole API response and this tool automatically unwraps it. - Infrastructure as code: Terraform's
aws_connect_contact_flow.content, CloudFormation'sAWS::Connect::ContactFlow Content, and the CDK'sCfnContactFlowall 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