Custom Visuals: Interactive Diagrams and Charts
When you ask Claude to explain a process, compare options, or analyze data, sometimes text alone falls short. Custom visuals let Claude build interactive diagrams, charts, and visual elements directly in your conversation. You click buttons, adjust sliders, expand to full screen, and keep asking follow-up questions to refine the result.
This lesson is hands-on. You will generate visuals, interact with them, export them, and learn where this feature works and where it does not.
Custom visuals render in Claude web chat (claude.ai) and the Claude Desktop app only. They do not render in Cowork sessions, mobile apps, or API responses. Everything in this lesson happens in Claude chat, not in Cowork.
What Are Custom Visuals?
When Claude generates a custom visual, it writes HTML and renders it inline in the conversation. This is not a static image: the output is a live, interactive element built from the same building blocks as web pages. You can click elements to reveal details, hover for tooltips, drag to rearrange, or use sliders to adjust parameters.
Claude decides when a visual would help, but you can also ask directly. Phrases like "draw this as a diagram," "chart this data," or "show me a flowchart" trigger visual generation.
Three things to know before you start:
- Visuals are ephemeral. They live inside the conversation. If you close the chat without saving, the visual is gone.
- Visuals are interactive. Unlike screenshots or pasted images, you can manipulate them.
- Visuals are iterative. Ask Claude to change colors, swap layouts, add labels, or restructure. Each request refines the same visual.
Exercise 1: Generate an Interactive Workflow Diagram
Open claude.ai or Claude Desktop. Start a new conversation and type this prompt:
"Create an interactive flowchart showing the steps of hiring a new employee: job posting, resume screening, phone interview, technical assessment, final interview, offer, onboarding. Make each step clickable to reveal a short description of what happens at that stage. Use a clean, professional color scheme."
What to watch for:
- Claude generates HTML that renders as a clickable flowchart inside the conversation
- Each step should be a clickable element; click one and a description appears
- The visual appears inline, not as a separate file or link
Now interact with it:
- Click each step. Read the descriptions Claude wrote.
- Look for the expand icon (usually in the top-right corner of the visual). Click it to go full screen.
- Exit full screen and notice the visual is still embedded in the conversation.
Now iterate. Type a follow-up:
"Change the color scheme to blue and gray. Add a decision diamond after 'Resume Screening' for 'Qualified?' with Yes going to Phone Interview and No going to Rejection Email. Also add estimated timeframes to each step."
Claude rebuilds the visual with your changes. This is the core loop: generate, interact, refine.
Saving Your Work
Custom visuals disappear when you close the conversation. Three ways to preserve them:
| Method | What You Get | Best For |
|---|---|---|
| Copy as Image | Static PNG/screenshot | Dropping into slides or documents |
| Download | .svg or .html file | Editable vector graphics or interactive HTML |
| Save as Artifact | Persistent, shareable artifact | Ongoing iteration across conversations |
To download: hover over the visual and look for the download icon. Choose SVG for a clean vector image or HTML for an interactive file you can open in any browser.
To save as an artifact: ask Claude "save this visual as an artifact." The visual becomes a persistent artifact you can share, revisit, and continue editing.
Get into the habit of exporting before you refine further. If an iteration goes sideways, you can always reference the exported version and ask Claude to start from there.
Exercise 2: Visualize Data from a CSV
Custom visuals are not limited to diagrams. You can upload data and ask Claude to chart it interactively.
Option A: Upload a file. If you have a CSV file (sales data, survey results, anything tabular), drag it into the Claude chat window or use the attachment button.
Option B: Paste data directly. If you do not have a CSV handy, paste this sample data into your conversation:
"Here is quarterly revenue data for three product lines. Create an interactive bar chart that lets me hover over each bar to see the exact value. Add a toggle to switch between grouped and stacked views.
Product A: Q1 $120K, Q2 $145K, Q3 $132K, Q4 $168K Product B: Q1 $85K, Q2 $92K, Q3 $78K, Q4 $105K Product C: Q1 $200K, Q2 $215K, Q3 $240K, Q4 $228K"
What to watch for:
- Claude generates an interactive chart, not a static image
- Hover over bars to see values
- Look for any toggles or controls Claude built into the visualization
- The chart should be responsive: resize your browser window and watch it adapt
Now iterate:
"Add a line chart overlay showing the total revenue trend across all three products. Change the color palette to use our brand colors: navy (#1a365d), teal (#2c7a7b), and coral (#e53e3e). Add a title and axis labels."
Each refinement builds on the previous visual. You are directing Claude like a designer directing an illustrator.
Exercise 3: From Chat Visual to Cowork Workflow
Custom visuals do not render in Cowork, but they still play a role in Cowork-centered workflows. The pattern: generate and refine visuals in chat, then use the exported files in your Cowork projects.
Try this workflow:
- In Claude chat, generate a visual:
"Create an interactive organizational chart for a marketing team with: VP Marketing at the top, three directors (Brand, Digital, Content) reporting to the VP, and two managers under each director. Make it expandable so clicking a director shows their managers. Include role descriptions on hover."
-
Interact with the result. Click to expand. Hover for descriptions. Make sure it looks right.
-
Download the visual as both SVG and HTML:
- The SVG goes into a slide deck or document
- The HTML opens in any browser as a standalone interactive page
-
Now switch to Cowork (or plan how you would). The exported files become inputs for Cowork tasks:
- "Add this org chart SVG to page 3 of the quarterly report in my Documents folder"
- "Create a team directory document based on the roles in this org chart"
The visual generation happened in chat. The file integration happens in Cowork. Each tool does what it does best.
Platform Availability
Understanding where custom visuals work prevents frustration when you plan workflows around them.
| Platform | Custom Visuals | Notes |
|---|---|---|
| claude.ai (web) | Yes | Full interactive support |
| Claude Desktop app | Yes | Full interactive support |
| Claude iOS app | No | Text responses only |
| Claude Android app | No | Text responses only |
| Cowork sessions | No | Use chat for visuals, Cowork for file operations |
| API responses | No | HTML returned as text, not rendered |
Shared conversations: If you share a conversation that contains custom visuals, the recipient must be logged in on web or desktop to see them rendered. Otherwise they see the raw HTML.
Tips for Better Visuals
Be specific about interactivity. "Make it clickable" is vague. "Make each node clickable to reveal a 2-sentence description" tells Claude exactly what behavior to build.
Name your colors. Instead of "make it colorful," provide hex codes or describe the palette: "use a monochrome blue palette" or "match these brand colors: #1a365d, #2c7a7b."
Use Claude Opus for complex visuals. If you have model selection available, Opus produces the most sophisticated visualizations. Sonnet handles simpler diagrams well.
Iterate in small steps. Asking for five changes at once sometimes produces unexpected results. Ask for one or two changes at a time, verify, then continue.
Ask Claude to explain its visual. After generating a diagram, try: "Walk me through this visual, what does each element represent?" This catches misinterpretations early.
Try With AI
Prompt 1: Map a Process You Know
Use this prompt in Claude chat (web or desktop):
"Create an interactive flowchart of [a process from your work or studies: onboarding a client, writing a research paper, planning an event, debugging code]. Make each step clickable to show what tools or resources are needed. Add decision points where the process can branch. Use color coding: green for steps that are usually quick, yellow for steps that often cause delays."
What you're learning: Visual generation from domain knowledge. You are translating a process you understand into an interactive format, then evaluating whether Claude's interpretation matches your mental model. The color-coding forces you to think critically about where bottlenecks actually are.
Prompt 2: Chart Real Data
Upload a CSV or paste data you care about (grades, expenses, project timelines, anything with numbers) and use this prompt:
"Create an interactive chart of this data. Choose the chart type that best reveals patterns (bar, line, scatter, or combination). Add hover details for exact values. Include at least one interactive control: a filter, a toggle between views, or a time range slider. Explain why you chose this chart type."
What you're learning: Data visualization judgment. Claude chooses a chart type and you evaluate whether that choice reveals the patterns you expected. The explanation forces Claude to articulate its reasoning, giving you a chance to redirect if the choice obscures important trends.
Prompt 3: Build a Comparison Dashboard
"Create a side-by-side comparison visual for [two things you are evaluating: two software tools, two project approaches, two investment options]. Include: a feature comparison table with color-coded ratings (green/yellow/red), a radar chart showing strengths across 5-6 dimensions, and an overall recommendation section. Make the radar chart interactive so I can hover over each dimension for details."
What you're learning: Multi-component visual design. A single prompt can produce a dashboard with multiple visual elements working together. You evaluate whether the combination tells a coherent story and iterate to fill gaps. This is the skill of visual communication design, using AI as your rendering engine.
What's Next
You have explored custom visuals as a complement to your Cowork workflows: generating diagrams and charts in Claude chat, refining them through conversation, and exporting them for use in documents and presentations. The next section moves from individual tool capabilities to strategy: how to evaluate when AI tools are the right choice and how to assess your own AI collaboration skills.