Diagram ideas to ask Claude, ChatGPT, and Codex for

If you can describe it, your AI tool can draw it. A few ideas to get started:

For a codebase

Draw the architecture of this repo: the main services, what they talk to, and the external APIs.

Show how a login request flows from the browser through our API to the database, step by step.

Make an entity diagram of our database tables and how they relate.

Diagram the deploy pipeline from a merged pull request to production.

We just added a job queue. Update the architecture diagram to include it.

For planning and explaining

Draw the states an order goes through, from cart to delivered, with what triggers each change.

Make a timeline of the migration plan for next quarter.

Turn this list of steps into a flowchart I can send to the team.

Making it better

Ask for changes the way you'd ask a designer:

Group the third-party services together and make the database stand out.

Label every arrow with what's being sent.

Add a legend, and make it work in dark mode.

Make each box clickable to show more detail.

Anything a web page can show: boxes and arrows, sequence diagrams, timelines, charts, hand-drawn-style sketches, and interactive diagrams you can hover and click. Your tool picks the right approach, often Mermaid for flowcharts and sequence diagrams, or custom SVG for architecture maps.

A Mermaid example

For the curious, this is roughly what a simple diagram file looks like. You never have to write this yourself.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkout flow</title>
</head>
<body>
  <pre class="mermaid">
flowchart LR
  Cart --> Checkout
  Checkout -->|card| Stripe
  Checkout -->|invoice| Billing
  Stripe --> Receipt
  Billing --> Receipt
  </pre>
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true, theme: 'neutral' });
  </script>
</body>
</html>

For a codebase

For planning and explaining

Making it better

What a diagram can be

A Mermaid example