AI in use

Visualizing Chrome Recorder Workflows with Claude and Mermaid

Transform Chrome Recorder's JSON workflows into visual Mermaid diagrams using Claude. Capture every click, scroll, and interaction—then make that granular detail visible and useful for UX analysis.

Fearghal

Fearghal

— 3 min read
Visualizing Chrome Recorder Workflows with Claude and Mermaid

Chrome Recorder captures user workflows as structured JSON. That's useful for automation, but JSON isn't how humans think about workflows. We think in diagrams, flows, and visual sequences. Here's how to transform Chrome Recorder's JSON output into visual workflow documentation using Claude and Mermaid.

Why Visualize Workflows?

JSON files sitting in a downloads folder don't help anyone understand the workflow. Visual diagrams serve different purposes: they communicate flows to stakeholders, document user journeys for analysis, and help teams identify friction points at a glance.

AI makes this transformation straightforward. Rather than manually mapping each step from JSON to diagram syntax, you hand Claude the recording and ask for a visual representation.

The Workflow

1. Record in Chrome Recorder

Follow the steps in Chrome Recorder: A UX Designer's Tool for Documenting User Workflows to capture your workflow. When finished, export the recording as JSON (the download icon in Chrome Recorder's interface).

2. Generate the Mermaid diagram

Open a new Claude chat and upload your JSON file. Ask Claude to create a Mermaid diagram:

Here's a Chrome Recorder workflow JSON. Create a Mermaid diagram that visualizes this user flow.
Tip: You can upload the JSON file directly in the same chat where you're asking for the diagram. No need to copy and paste the contents.

Claude will analyze the recording and output Mermaid syntax. The code describes your workflow as a flowchart—each click, navigation, and form input represented as connected nodes.

3. View and export the diagram

Here is a copy of that code generated by Claude so you can see what the diagram looks like.

flowchart TD
    Start([User Opens Browser]) --> SearchFear[Navigate to Google Search: 'fear']
    SearchFear --> GoogleHome[Navigate to Google Homepage]
    GoogleHome --> ClickSearch1[Click Search Box]
    ClickSearch1 --> ClickForm[Click Form Area]
    ClickForm --> ClickSearch2[Click Search Box Again]
    ClickSearch2 --> TypeNetflix[Type 'netflix']
    TypeNetflix --> PressEnter[Press Enter]
    PressEnter --> SearchResults[Google Search Results for Netflix]
    SearchResults --> ClickResult[Click Netflix Result Link]
    ClickResult --> NetflixHome[Netflix Homepage
netflix.com/gb/]
    NetflixHome --> BrowsePage[Browse/Scroll Page
1.3s interaction]
    BrowsePage --> SelectPlan[Click Plan Option
List Item 1]
    SelectPlan --> ConfirmPlan[Click Plan Details
Span Element]
    ConfirmPlan --> GetStarted[Click 'Get Started' Button]
    GetStarted --> End([Sign-up Process Initiated])
    
    style Start fill:#e1f5e1
    style End fill:#e1f5e1
    style NetflixHome fill:#e8f4f8
    style GetStarted fill:#fff4e1
Fun, additional use case. Claude helped me figure out how to render this very Mermaid code in this page.

You have two options:

Option A: Use Mermaid Live Editor
Copy Claude's Mermaid code and paste it into Mermaid Live Editor. The editor renders your diagram instantly. From there, export as PNG, SVG, or other formats.

Option B: Have Claude render it directly
If you're using Claude with extended tools enabled, ask Claude to render the Mermaid diagram itself. Claude can generate the visualization within the chat interface, no external tools needed.

Learn more about Mermaid syntax and capabilities in the official Mermaid documentation.

Additional Analysis

The workflow visualization is just the starting point. Once you have the diagram, you can ask Claude to:

  • Describe the workflow in plain language
  • Identify potential friction points
  • Suggest improvements to the user journey
  • Compare against best practices

I'll cover these analysis approaches in a future post on running UX evaluations with LLMs.

What This Enables

Chrome Recorder captures every click, every page view, every scrolling event. The granularity far exceeds what you'd document manually. When you visualize this data through Mermaid diagrams, you see the complete picture of how users navigate your application—not just the major steps, but the micro-interactions that often reveal the real friction points.

When you document workflows by hand, you naturally focus on the main path—the intended journey. Chrome Recorder catches everything: the back-button press, the hesitation scroll, the form field re-entry. Claude and Mermaid make that detail visible and useful.

Read more