DiagramSequence diagrams with AI, drawn from your code
A sequence diagram shows one thing happening in order: which part calls which, what comes back, and what happens when it fails. An AI coding tool can trace that through your code and draw it, so the diagram shows what the code really does rather than what someone remembers. Ask for one flow at a time, include the failure path, and check the order of the calls.
1. Open your AI tool
To trace a request it has to read the code, so use a tool that works inside the repo:
Claude Code
Codex CLI
Gemini CLIEach guide has the one-minute setup. Once Diagram is connected, every diagram the AI draws is saved at a link instead of staying in the chat.
2. Ask for it
Say what you want to see in plain words. These requests work, and each is one message:
One request, end to end
The most useful sequence diagram there is: what happens when a user does one thing.
- “Trace what happens when a user checks out, from the browser to the database and the payment provider, and draw it as a sequence diagram. Include what happens when the card is declined.”
- “Draw the sign-up flow as a sequence diagram, including the email verification and what runs in the background.”
Between services
Who calls whom across services, queues and outside APIs.
- “Draw the sequence of calls between the API, the queue and the worker when an export is requested. Show which steps are asynchronous.”
Before you build it
Agree on a new flow before writing it.
- “Draw a sequence diagram for the password reset flow we just planned, with the rate limit and the expired-token case.”
From a description
No code yet, or not your code. Any AI chat can draw this from plain words.
- “Turn this description of our login flow into a sequence diagram and give me a link: (paste the description)”
An example
3. Check it
The AI draws what it read or was told. These habits catch most mistakes:
- One flow per diagram. A sequence diagram of “the whole app” is unreadable. Name the one thing that happens.
- Ask for the failure path. The happy path is the part everyone already knows. The declined card, the timeout and the retry are why people open the diagram.
- Mark what is asynchronous. Queues, webhooks and background jobs change the order. Ask the AI to show them as separate, dashed or labelled steps.
- Check it against the logs. If you have a trace or a log of one real request, ask the AI to compare. Missing calls show up at once.
4. Share the link and keep it current
Put the link in the README, the pull request or the doc. When things change, ask for the change in plain words. It’s saved at the same link and every earlier version is kept, so nobody is looking at an old picture.
Questions
- Can AI generate a sequence diagram from code?
- Yes. Cursor, Claude Code, Codex and GitHub Copilot can follow a request through the code and draw the sequence diagram. Ask for one flow and include the error cases.
- Is this a UML sequence diagram?
- It uses the same parts: lifelines, messages, return arrows, and alt and loop blocks. Ask for strict UML notation if you need it for documentation.
- Can it use Mermaid or PlantUML?
- Yes, if you ask. By default the AI draws a web page, which reads better when there are many participants. It can also write Mermaid or PlantUML for your docs.
- How do I share it?
- With Diagram connected, it is saved at a link. Put it in the pull request or the design doc. When the flow changes, ask for the update and the link stays the same.