One of my favorite new AI techniques is using Claude to transform my Temporal code into an interactive HTML diagram before I start making changes.
The goal is simple: build a clear mental model of the workflow before modifying the implementation.
The Challenge
When I’m working with a workflow, there can be many pieces to understand at once.
I may want to know:
- What starts the process?
- What triggers the next step?
- Which Workflows and Activities are involved?
- Where does a human enter the loop?
- Where is data being read?
- Where is data being mutated?
- How does data move through the system?
- Which external services are involved?
- What happens when different events occur?
All of this information exists in the code.
But sometimes a visual representation makes the relationships much easier to understand.
Turning Code Into an Interactive Workflow Diagram
Instead of manually creating an architecture diagram, I give Claude the relevant code and ask it to generate an interactive HTML visualization.
Because Claude has the implementation as context, the diagram can be directly connected to what the code is actually doing.
I can ask it to visualize things like:
- Temporal Workflows
- Activities
- Signals
- Human interactions
- External APIs
- Databases
- Events
- Data reads
- Data mutations
- Data movement
- Failure and retry paths
This gives me a high level view of the system while still keeping the visualization grounded in the implementation.
The Most Useful Part: Iterating With AI
Generating the first diagram is useful.
But the real productivity gain comes from being able to iterate on it conversationally.
If something doesn’t match what I want, I can highlight that section and tell Claude:
Rename this Workflow.
Or:
Explain this part more clearly.
Or:
Remove this step.
Or:
Show me exactly where the human enters the loop.
Claude updates the visualization automatically.
I can keep improving the diagram until the workflow fits the mental model and design I want.
The process becomes:
Code → Visualization → Understanding → Iteration → Implementation
Using the Diagram as a Design Tool
This changes the role of the diagram.
It isn’t just documentation created after the system is built.
It becomes part of the design process itself.
Before changing the implementation, I can use the visualization to reason about:
- Whether a step is necessary
- Whether responsibilities are clearly separated
- Where human interaction should happen
- How information moves between components
- Whether naming accurately describes what each part does
- Whether the overall workflow can be simplified
Once the design makes sense visually, I can move back into the code with a much clearer understanding of what I want to build.
Why This Works Well With Temporal
Temporal lets you model business processes directly in code.
Those processes can include Workflows, Activities, external services, human interactions, timers, retries, events, and long-running operations.
The code represents the application’s actual behavior.
The AI-generated visualization gives me another representation of that same behavior.
That combination is powerful.
The code gives me precision.
The diagram gives me the mental model.
A Prompt You Can Try
A starting prompt could be:
Analyze this code and create an interactive HTML diagram that visualizes how the workflow operates. Show the major Workflows, Activities, external services, human interactions, events, data reads, data mutations, and how data moves through the system. Keep the visualization easy to understand at a high level while grounding it in the actual implementation.
Then iterate from there.
Ask the model to rename components, clarify relationships, simplify sections, expose missing interactions, or restructure the visualization.
AI Isn’t Just for Writing Code
A lot of the discussion around AI development focuses on code generation.
But one of the most valuable uses I’ve found is using AI to help me understand and design systems.
An LLM can move between multiple representations of the same application:
Code → Explanation → Visualization → Design → Code
For me, this has become a significant productivity boost when designing and implementing workflows with Temporal.
AI isn’t just helping me write code.
It’s helping me visualize and reason about the system before I change it.