1<!DOCTYPE html><html lang="en" class="geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable h-full antialiased"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/797e433ab948586e-s.p.0r6juujl39pe6.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/caa3a2e1cccd8315-s.p.0wgildi0cnwt9.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/chunks/2zpqyjczq6s41.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/3wqoepsgoj-10.js"/>
1<script src="/_next/static/chunks/1gpl7kjx9sc-x.js" async=""></script>
1<script src="/_next/static/chunks/23450f-mxwgmr.js" async=""></script>
1<script src="/_next/static/chunks/25u5cuu87p4ah.js" async=""></script>
1<script src="/_next/static/chunks/2e7n3gd4zerjj.js" async=""></script>
1<script src="/_next/static/chunks/turbopack-2rked5fdi_s-y.js" async=""></script>
1<script src="/_next/static/chunks/405rlzg65uo7z.js" async=""></script>
1<script src="/_next/static/chunks/3peschsa_l2ll.js" async=""></script>
1<script src="/_next/static/chunks/3u2c5pk4fxsmt.js" async=""></script>
1<script src="/_next/static/chunks/3t6e4rue2il0k.js" async=""></script>
1<script async="" src="https://analytics.ahrefs.com/analytics.js" data-key="kbrelMw/6TFrfuYNHjnevA"></script>
1<script src="/_next/static/chunks/08kcfm3wnpnba.js" async=""></script>
1<script src="/_next/static/chunks/0v9-5l57ry184.js" async=""></script>
1<script src="/_next/static/chunks/2992zdnkh3rcq.js" async=""></script>
1<link rel="preload" href="https://www.googletagmanager.com/gtag/js?id=G-QFW53HBV9R" as="script"/><meta name="next-size-adjust" content=""/><title>Sequence Diagram Templates â Import & Edit by Chat | VizText</title><meta name="description" content="Eight ready-made UML sequence diagram templates: OAuth sign-in, checkout callbacks, cached reads, webhook retries and more. Open one on the canvas in a click, then reshape it by chatting. Export SVG, PNG or Mermaid."/><link rel="canonical" href="https://viztext.com/sequence-diagram-template"/><link rel="alternate" hrefLang="en" href="https://viztext.com/sequence-diagram-template"/><link rel="alternate" hrefLang="zh" href="https://viztext.com/zh/sequence-diagram-template"/><link rel="alternate" hrefLang="x-default" href="https://viztext.com/sequence-diagram-template"/><meta property="og:title" content="Sequence Diagram Templates â Import & Edit by Chat | VizText"/><meta property="og:description" content="Eight ready-made UML sequence diagram templates: OAuth sign-in, checkout callbacks, cached reads, webhook retries and more. Open one on the canvas in a click, then reshape it by chatting. Export SVG, PNG or Mermaid."/><meta property="og:url" content="https://viztext.com/sequence-diagram-template"/><meta property="og:locale" content="en_US"/><meta property="og:locale:alternate" content="zh_CN"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Sequence Diagram Templates â Import & Edit by Chat | VizText"/><meta name="twitter:description" content="Eight ready-made UML sequence diagram templates: OAuth sign-in, checkout callbacks, cached reads, webhook retries and more. Open one on the canvas in a click, then reshape it by chatting. Export SVG, PNG or Mermaid."/><link rel="icon" href="/favicon.ico?favicon.1zn-p5cp-swfa.ico" sizes="256x256" type="image/x-icon"/><link rel="icon" href="/icon.svg?icon.0xngbc1s43sx3.svg" sizes="any" type="image/svg+xml"/><link rel="apple-touch-icon" href="/apple-icon.png?apple-icon.0ph69_ayudfri.png" sizes="180x180" type="image/png"/>
1<script>try{if(matchMedia('(prefers-color-scheme:dark)').matches)document.documentElement.classList.add('dark')}catch(e){}</script>
1<script defer="" src="https://vibecafe.ai/telemetry/v1.js" data-vc-product-id="cmsd99evu00000aja1uhvqeeh" data-vc-auth-key="vc_web_Z_LCCJfcbSUYZQ-ASBu7GT34l48t5f-BawA8BobXMYI"></script>
1<script src="/_next/static/chunks/0cz1d0mv5g_q7.js" noModule=""></script>
1</head><body class="min-h-full flex flex-col bg-white dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100"><div hidden=""><!--$--><!--/$--></div>
1<script type="application/ld+json">[{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://viztext.com/"},{"@type":"ListItem","position":2,"name":"Sequence Diagram Templates","item":"https://viztext.com/sequence-diagram-template"}]},{"@context":"https://schema.org","@type":"CollectionPage","name":"Sequence Diagram Templates","description":"Eight ready-made UML sequence diagram templates: OAuth sign-in, checkout callbacks, cached reads, webhook retries and more. Open one on the canvas in a click, then reshape it by chatting. Export SVG, PNG or Mermaid.","url":"https://viztext.com/sequence-diagram-template","isPartOf":{"@type":"WebSite","name":"VizText","url":"https://viztext.com/"},"mainEntity":{"@type":"ItemList","numberOfItems":8,"itemListElement":[{"@type":"ListItem","position":1,"name":"OAuth 2.0 sign-in","description":"Authorize redirect, consent, the callback with the code, and the server-side token exchange. The diagram to paste into an RFC when someone asks why the code goes to your backend and not the browser."},{"@type":"ListItem","position":2,"name":"Checkout & payment callback","description":"Storefront to order service to payment provider, with the asynchronous webhook that confirms the charge after the shopper has already seen a spinner."},{"@type":"ListItem","position":3,"name":"Cached API read","description":"CDN edge, Redis and the database, showing both the hit and the miss path. Useful for explaining exactly which layer a stale response came from."},{"@type":"ListItem","position":4,"name":"Password reset","description":"Request, single-use token, email delivery, and the token check on redemption. Draw it once and the security review gets shorter."},{"@type":"ListItem","position":5,"name":"Order fulfillment across services","description":"Event bus in the middle, warehouse and shipping reacting, customer notified last. The shape of a choreographed flow rather than an orchestrated one."},{"@type":"ListItem","position":6,"name":"Direct file upload","description":"Pre-signed URL, browser uploads straight to object storage, worker picks it up afterwards. The picture that explains why the file never touches your API."},{"@type":"ListItem","position":7,"name":"Webhook delivery & retry","description":"Queue, delivery attempt, non-2xx, backoff, and the point where a failing endpoint gets disabled and a human is told. Support asks about this flow constantly."},{"@type":"ListItem","position":8,"name":"Chat message delivery","description":"Websocket gateway, persistence, fan-out and a push notification for the recipient who is offline. Two clients on one diagram, which is where sequence diagrams earn their keep."}]}},{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"How do I change a template after importing it?","acceptedA
1nswer":{"@type":"Answer","text":"Two ways, suited to different edits. Chat is for structural changes described in words â \"add a queue between the API and the worker\", \"drop the email service\", \"move the token exchange to the backend\" â and returns a redrawn diagram each turn. The split-view editor is for surgical ones: fix a typo in a message, rename a participant, reorder two calls. Most people import, talk the shape into place, then polish in the editor."}},{"@type":"Question","name":"Does the assistant actually understand the imported diagram?","acceptedAnswer":{"@type":"Answer","text":"Yes, because the template is structured data rather than a picture or a blob of text. The imported participants and messages become the conversation's working state, so \"delete the email service\" removes that exact column and the messages attached to it â the assistant is not re-guessing your diagram from a description of it."}},{"@type":"Question","name":"What is the difference between a solid and a dashed arrow?","acceptedA
1nswer":{"@type":"Answer","text":"Solid (->>) is a request: one participant calls another. Dashed (-->>) is what comes back â a return value, a callback, an event. The convention matters because a diagram of solid arrows only shows who calls whom; adding the dashed replies is what turns it into a timeline you can reason about."}},{"@type":"Question","name":"How do I show something asynchronous?","acceptedAnswer":{"@type":"Answer","text":"Draw the reply as a dashed arrow that arrives later than the request it answers, with everything that happened in between still visible. The webhook and fulfillment templates both do this: the response to the shopper goes out before the payment confirmation arrives, which is exactly the property worth documenting."}},{"@type":"Question","name":"What is the difference between a sequence diagram and a flowchart?","acceptedAnswer":{"@type":"Answer","text":"A sequence diagram is organised by participant: the columns are services or people, and the arrows between them are messages. A flowchart is organised by step: the boxes are actions, and there is no notion of who performs them. If your question is \"which service calls which, and in what order\", draw a sequence diagram."}},{"@type":"Question","name":"How many participants can one diagram hold?","acceptedA
1nswer":{"@type":"Answer","text":"Readability, not the tool, is the limit. Past six or seven columns the arrows start crossing and the diagram gets wide enough to need horizontal scrolling. Split by phase â authentication in one diagram, fulfillment in another â rather than drawing the whole request lifecycle at once. The templates here sit deliberately at five or six."}},{"@type":"Question","name":"What export formats are supported?","acceptedAnswer":{"@type":"Answer","text":"SVG, PNG, and the raw Mermaid source. SVG stays sharp at any zoom, which matters for wide diagrams; PNG pastes cleanly into slide decks and issue trackers; and the Mermaid source can be committed alongside your code so the diagram is reviewed like everything else."}}]}]</script>
1<header class="border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 sticky top-0 z-20"><div class="max-w-[clamp(320px,96vw,1600px)] mx-auto px-2 sm:px-4 py-3 flex items-center justify-between"><a class="flex items-center gap-2 text-lg font-semibold tracking-tight hover:opacity-80 transition-opacity" href="/"><svg viewBox="0 0 72 48" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-7 w-10 sm:h-8 sm:w-12 shrink-0" aria-hidden="true"><path d="M7 8.5h28a7 7 0 0 1 7 7v13a7 7 0 0 1-7 7H18l-9 6v-6.7a7 7 0 0 1-6-6.9V15.5a7 7 0 0 1 7-7Z" stroke="#7C3AED" stroke-width="4" stroke-linejoin="round"></path><path d="M13 17h19M13 23h15M13 29h18" stroke="#C026D3" stroke-width="3" stroke-linecap="round"></path><path d="M45 24h7m-3-3 3 3-3 3" stroke="#C026D3" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"></path><path d="M57 24 64 16M57 24l7 8" stroke="#7C3AED" stroke-width="2.8" stroke-linecap="round"></path><circle cx="57" cy="24" r="3.5" fill="white" stroke="#7C3AED" stroke-width="2.8"></circle><circle cx="66" cy="14" r="3.5" fill="white" stroke="#7C3AED" stroke-width="2.8"></circle><circle cx="66" cy="34" r="3.5" fill="white" stroke="#7C3AED" stroke-width="2.8"></circle></svg><span class="hidden sm:inline">VizText</span><span class="hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold tracking-wider uppercase bg-gradient-to-r from-blue-500 to-purple-500 text-white">AI</span></a><div class="flex items-center gap-0.5 sm:gap-2"><a class="hidden sm:inline-flex items-center px-3 py-1.5 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-900 transition-colors" href="/diagram-tutorials">Tutorials</a><details class="relative group"><summary class="flex items-center gap-1 sm:gap-1.5 whitespace-nowrap cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white py-1.5 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-900 transition-colors px-1.5 sm:px-3">Templates<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" class="text-zinc-400 transition-transform group-open:rotate-180"><path d="M3 4.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></summary><div class="absolute right-0 top-full mt-1 z-50 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg shadow-lg py-1 w-64"><a class="block px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition-colors" href="/flowchart-template"><div class="font-medium">Flowchart</div><div class="text-xs text-zinc-500 mt-0.5 line-clamp-1">8 fully-branched process flows â open one and edit</div></a><a class="block px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition-colors" href="/sequence-diagram-template"><div class="font-medium">Sequence diagram</div><div class="text-xs text-zinc-500 mt-0.5 line-clamp-1">8 interaction flows, responses and all</div></a><a class="block px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition-colors" href="/class-diagram-template"><div class="font-medium">Class diagram</div><div class="text-xs text-zinc-500 mt-0.5 line-clamp-1">8 ready-made class diagrams â open one and edit</div></a><a class="block px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition-colors" href="/erd-template"><div class="font-medium">ER diagram</div><div class="text-xs text-zinc-500 mt-0.5 line-clamp-1">8 keyed database schemas with cardinality</div></a></div></details><details class="relative group"><summary class="flex items-center gap-1 sm:gap-1.5 whitespace-nowrap cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white py-1.5 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-900 transition-colors px-1.5 sm:px-3"><span class="sm:hidden">Types</span><span class="hidden sm:inline">Diagram types</span><svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" class="text-zinc-400 transition-transform group-open:rotate-180"><path d="M3 4.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></summary><div class="absolute right-0 top-full mt-1 z-50 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg shadow-lg py-1 w-64"><a class="block px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition-colors" href="/flowchart-from-text"><div class="font-medium">Text to Flowchart AI</div><div class="text-xs text-zinc-500 mt-0.5 line-clamp-1">Describe a process in plain English. Get a diagram. Export SVG or PNG.</div></a><a class="block px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition-colors" href="/sequence-diagram-from-text"><div class="font-medium">Sequence Diagram</div><div class="text-xs text-zinc-500 mt-0.5 line-clamp-1">Turn an API description into a sequence diagram with actors and arrows.</div></a><a class="block px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition-colors" href="/erd-from-text"><div class="font-medium">ERD</div><div class="text-xs text-zinc-500 mt-0.5 line-clamp-1">Describe entities and relationships. Get a Mermaid ERD with keys and cardinality.</div></a><a class="block px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition-colors" href="/state-diagram-from-text"><div class="font-medium">State Diagram</div><div class="text-xs text-zinc-500 mt-0.5 line-clamp-1">Describe a state machine. Get a Mermaid state diagram with transitions.</div></a><a class="block px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition-colors" href="/class-diagram-from-text"><div class="font-medium">UML Class Diagram</div><div class="text-xs text-zinc-500 mt-0.5 line-clamp-1">Describe classes, attributes, and inheritance. Get a Mermaid UML class diagram.</div></a><a class="block px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition-colors" href="/mindmap-from-text"><div class="font-medium">Text to Mind Map</div><div class="text-xs text-zinc-500 mt-0.5 line-clamp-1">Describe a topic hierarchy. Get a Mermaid mindmap with nested branches.</div></a><a class="block px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition-colors" href="/gantt-from-text"><div class="font-medium">Gantt Chart</div><div class="text-xs text-zinc-500 mt-0.5 line-clamp-1">Describe project phases and dependencies. Get a Mermaid Gantt chart.</div></a><a class="block px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition-colors" href="/chat-to-diagram"><div class="font-medium">Chat to Diagram</div><div class="text-xs text-zinc-500 mt-0.5 line-clamp-1">Chat with AI to draw diagrams â no syntax, no guessing at the details.</div></a><a class="block px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition-colors" href="/architecture-diagram-from-text"><div class="font-medium">Architecture Diagram</div><div class="text-xs text-zinc-500 mt-0.5 line-clamp-1">Describe your system's components and how they talk to each other. Get a layered architecture diagram.</div></a><a class="block px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition-colors" href="/uml-diagram-from-text"><div class="font-medium">UML Diagram</div><div class="text-xs text-zinc-500 mt-0.5 line-clamp-1">Describe your design. The AI figures out whether it's a class, sequence, or state diagram.</div></a><a class="block px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition-colors" href="/ai-diagram-from-text"><div class="font-medium">Diagram</div><div class="text-xs text-zinc-500 mt-0.5 line-clamp-1">Describe anything in plain text. Get the diagram type that fits â no need to know which one you want first.</div></a><a class="block px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition-colors" href="/ai-diagram-from-code"><div class="font-medium">Diagram from Code</div><div class="text-xs text-zinc-500 mt-0.5 line-clamp-1">Paste a code snippet. Get a class diagram, flowchart, or architecture diagram back.</div></a><a class="block px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition-colors" href="/ai-diagram-from-json"><div class="font-medium">Diagram from JSON</div><div class="text-xs text-zinc-500 mt-0.5 line-clamp-1">Paste JSON â an API response, a schema, a document sample. Get an ERD or class diagram back.</div></a><a class="block px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition-colors" href="/chatgpt-mermaid-fixer"><div class="font-medium">ChatGPT Mermaid Fixer</div><div class="text-xs text-zinc-500 mt-0.5 line-clamp-1">ChatGPT writes the Mermaid. This draws it â paste, fix the syntax, edit, export.</div></a></div></details>
1<details class="relative group"><summary class="flex items-center gap-1 sm:gap-1.5 whitespace-nowrap cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white py-1.5 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-900 transition-colors px-1.5 sm:px-2.5" aria-label="Language">EN<svg width="10" height="10" viewBox="0 0 12 12" fill="none" aria-hidden="true" class="text-zinc-400 transition-transform group-open:rotate-180"><path d="M3 4.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></summary><div class="absolute right-0 top-full mt-1 z-50 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg shadow-lg py-1 w-32"><a hrefLang="en" class="block px-4 py-2 text-sm transition-colors font-semibold text-blue-600 dark:text-blue-400 bg-zinc-50 dark:bg-zinc-800" href="/sequence-diagram-template">EN</a><a hrefLang="zh" class="block px-4 py-2 text-sm transition-colors text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800" href="/zh/sequence-diagram-template">䏿</a></div></details><button type="button" class="rounded-md border border-zinc-200 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 shadow-sm transition-colors hover:bg-zinc-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800">Sign in</button></div></div></header><main class="flex-1 w-full"><section class="max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 py-12 sm:py-16"><nav aria-label="breadcrumb" class="mb-6 text-sm text-zinc-500 dark:text-zinc-400"><a class="transition-colors hover:text-zinc-900 dark:hover:text-white" href="/">Home</a><span class="mx-2">·</span><span class="text-zinc-900 dark:text-zinc-100">Sequence Diagram Templates</span></nav><h1 class="text-4xl sm:text-5xl font-bold tracking-tight text-zinc-900 dark:text-white">Sequence Diagram Templates</h1><p class="mt-5 max-w-2xl text-base sm:text-lg leading-relaxed text-zinc-600 dark:text-zinc-400">Eight fully-drawn interaction flows, responses and all. Open one and it's on the canvas right away. Then talk it into your system: "put the queue between the API and the worker, add a retry, drop the email service."</p><div class="mt-7 flex flex-wrap items-center gap-3"><a href="#templates" class="rounded-xl bg-violet-600 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-violet-700">Browse the templates</a><a class="rounded-xl border border-zinc-200 px-5 py-2.5 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800" href="/">Or describe your own</a></div></section><section id="templates" class="max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 pb-16 scroll-mt-20"><h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">Pick a template</h2><p class="mt-3 max-w-3xl text-sm sm:text-base leading-relaxed text-zinc-600 dark:text-zinc-400">Every diagram here is rendered from the same structured definition you get when you import it â nothing is a touched-up screenshot. Click any preview to see it at full size. "Refine in chat" puts the diagram on the canvas and opens the conversation panel, so your first sentence can start changing it; "Use this template" drops it into the editor and leaves the rest to you.</p><div class="mt-8 grid gap-5 sm:grid-cols-2"><article class="flex flex-col rounded-2xl border border-zinc-200 bg-white p-4 transition hover:border-violet-300 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-violet-700"><button type="button" title="Click to enlarge" aria-label="OAuth 2.0 sign-in â Click to enlarge" class="group/thumb relative block w-full cursor-zoom-in rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900"><div role="img" aria-label="OAuth 2.0 sign-in" class="w-full rounded-xl bg-white p-3 ring-1 ring-zinc-200 dark:ring-zinc-800 h-80 overflow-hidden"><div class="h-full w-full animate-pulse rounded-lg bg-zinc-100"></div></div><span class="pointer-events-none absolute bottom-2 right-2 flex items-center gap-1 rounded-md bg-zinc-900/80 px-2 py-1 text-xs font-medium text-white opacity-0 transition-opacity group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2 h-3 w-3" aria-hidden="true"><path d="M15 3h6v6"></path><path d="m21 3-7 7"></path><path d="m3 21 7-7"></path><path d="M9 21H3v-6"></path></svg>Click to enlarge</span></button><div class="mt-4 flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock mt-0.5 h-4 w-4 shrink-0 text-violet-600 dar
1k:text-violet-400" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg><h3 class="text-base font-semibold text-zinc-900 dark:text-white">OAuth 2.0 sign-in</h3></div><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Authorize redirect, consent, the callback with the code, and the server-side token exchange. The diagram to paste into an RFC when someone asks why the code goes to your backend and not the browser.</p><p class="mt-3 text-xs text-zinc-500 dark:text-zinc-500">5<!-- --> <!-- -->participants<!-- --> · <!-- -->14<!-- --> <!-- -->messages</p><div class="mt-auto pt-4 flex flex-wrap items-center gap-2"><a class="rounded-lg bg-violet-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-violet-700" href="/?template=seq-oauth&mode=chat">Refine in chat</a><a class="rounded-lg border border-zinc-200 px-3 py-1.5 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800" href="/?template=seq-oauth">Use this template</a><button type="button" class="rounded-lg px-2 py-1.5 text-sm text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-500 dark:hover:text-zinc-200">Copy Mermaid</button></div></article><article class="flex flex-col rounded-2xl border border-zinc-200 bg-white p-4 transition hover:border-violet-300 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-violet-700"><button type="button" title="Click to enlarge" aria-label="Checkout & payment callback â Click to enlarge" class="group/thumb relative block w-full cursor-zoom-in rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900"><div role="img" aria-label="Checkout & payment callback" class="w-full rounded-xl bg-white p-3 ring-1 ring-zinc-200 dark:ring-zinc-800 h-80 overflow-hidden"><div class="h-full w-full animate-pulse rounded-lg bg-zinc-100"></div></div><span class="pointer-events-none absolute bottom-2 right-2 flex items-center gap-1 rounded-md bg-zinc-900/80 px-2 py-1 text-xs font-medium text-white opacity-0 transition-opacity group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2 h-3 w-3" aria-hidden="true"><path d="M15 3h6v6"></path><path d="m21 3-7 7"></path><path d="m3 21 7-7"></path><path d="M9 21H3v-6"></path></svg>Click to enlarge</span></button><div class="mt-4 flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-box mt-0.5 h-4 w-4 shrink-0 text-violet-600 dark:text-violet-400" aria-hidden="true"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"></path><path d="m3.3 7 8.7 5 8.7-5"></path><path d="M12 22V12"></path></svg><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Checkout & payment callback</h3></div><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Storefront to order service to payment provider, with the asynchronous webhook that confirms the charge after the shopper has already seen a spinner.</p><p class="mt-3 text-xs text-zinc-500 dark:text-zinc-500">6<!-- --> <!-- -->participants<!-- --> · <!-- -->16<!-- --> <!-- -->messages</p><div class="mt-auto pt-4 flex flex-wrap items-center gap-2"><a class="rounded-lg bg-violet-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-violet-700" href="/?template=seq-checkout&mode=chat">Refine in chat</a><a class="rounded-lg border border-zinc-200 px-3 py-1.5 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800" href="/?template=seq-checkout">Use this template</a><button type="button" class="rounded-lg px-2 py-1.5 text-sm text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-500 dark:hover:text-zinc-200">Copy Mermaid</button></div></article><article class="flex flex-col rounded-2xl border border-zinc-200 bg-white p-4 transition hover:border-violet-300 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-violet-700"><button type="button" title="Click to enlarge" aria-label="Cached API read â Click to enlarge" class="group/thumb relative block w-full cursor-zoom-in rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900"><div role="img" aria-label="Cached API read" class="w-full rounded-xl bg-white p-3 ring-1 ring-zinc-200 dark:ring-zinc-800 h-80 overflow-hidden"><div class="h-full w-full animate-pulse rounded-lg bg-zinc-100"></div></div><span class="pointer-events-none absolute bottom-2 right-2 flex items-center gap-1 rounded-md bg-zinc-900/80 px-2 py-1 text-xs font-medium text-white opacity-0 transition-opacity group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2 h-3 w-3" aria-hidden="true"><path d="M15 3h6v6"></path><path d="m21 3-7 7"></path><path d="m3 21 7-7"></path><path d="M9 21H3v-6"></path></svg>Click to enlarge</span></button><div class="mt-4 flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap mt-0.5 h-4 w-4 shrink-0 text-violet-600 dar
1k:text-violet-400" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Cached API read</h3></div><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">CDN edge, Redis and the database, showing both the hit and the miss path. Useful for explaining exactly which layer a stale response came from.</p><p class="mt-3 text-xs text-zinc-500 dark:text-zinc-500">5<!-- --> <!-- -->participants<!-- --> · <!-- -->13<!-- --> <!-- -->messages</p><div class="mt-auto pt-4 flex flex-wrap items-center gap-2"><a class="rounded-lg bg-violet-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-violet-700" href="/?template=seq-api-cache&mode=chat">Refine in chat</a><a class="rounded-lg border border-zinc-200 px-3 py-1.5 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800" href="/?template=seq-api-cache">Use this template</a><button type="button" class="rounded-lg px-2 py-1.5 text-sm text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-500 dark:hover:text-zinc-200">Copy Mermaid</button></div></article><article class="flex flex-col rounded-2xl border border-zinc-200 bg-white p-4 transition hover:border-violet-300 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-violet-700"><button type="button" title="Click to enlarge" aria-label="Password reset â Click to enlarge" class="group/thumb relative block w-full cursor-zoom-in rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900"><div role="img" aria-label="Password reset" class="w-full rounded-xl bg-white p-3 ring-1 ring-zinc-200 dark:ring-zinc-800 h-80 overflow-hidden"><div class="h-full w-full animate-pulse rounded-lg bg-zinc-100"></div></div><span class="pointer-events-none absolute bottom-2 right-2 flex items-center gap-1 rounded-md bg-zinc-900/80 px-2 py-1 text-xs font-medium text-white opacity-0 transition-opacity group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2 h-3 w-3" aria-hidden="true"><path d="M15 3h6v6"></path><path d="m21 3-7 7"></path><path d="m3 21 7-7"></path><path d="M9 21H3v-6"></path></svg>Click to enlarge</span></button><div class="mt-4 flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail mt-0.5 h-4 w-4 shrink-0 text-violet-600 dark:text-violet-400" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Password reset</h3></div><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Request, single-use token, email delivery, and the token check on redemption. Draw it once and the security review gets shorter.</p><p class="mt-3 text-xs text-zinc-500 dark:text-zinc-500">5<!-- --> <!-- -->participants<!-- --> · <!-- -->16<!-- --> <!-- -->messages</p><div class="mt-auto pt-4 flex flex-wrap items-center gap-2"><a class="rounded-lg bg-violet-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-violet-700" href="/?template=seq-password-reset&mode=chat">Refine in chat</a><a class="rounded-lg border border-zinc-200 px-3 py-1.5 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800" href="/?template=seq-password-reset">Use this template</a><button type="button" class="rounded-lg px-2 py-1.5 text-sm text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-500 dark:hover:text-zinc-200">Copy Mermaid</button></div></article><article class="flex flex-col rounded-2xl border border-zinc-200 bg-white p-4 transition hover:border-violet-300 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-violet-700"><button type="button" title="Click to enlarge" aria-label="Order fulfillment across services â Click to enlarge" class="group/thumb relative block w-full cursor-zoom-in rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900"><div role="img" aria-label="Order fulfillment across services" class="w-full rounded-xl bg-white p-3 ring-1 ring-zinc-200 dark:ring-zinc-800 h-80 overflow-hidden"><div class="h-full w-full animate-pulse rounded-lg bg-zinc-100"></div></div><span class="pointer-events-none absolute bottom-2 right-2 flex items-center gap-1 rounded-md bg-zinc-900/80 px-2 py-1 text-xs font-medium text-white opacity-0 transition-opacity group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2 h-3 w-3" aria-hidden="true"><path d="M15 3h6v6"></path><path d="m21 3-7 7"></path><path d="m3 21 7-7"></path><path d="M9 21H3v-6"></path></svg>Click to enlarge</span></button><div class="mt-4 flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-workflow mt-0.5 h-4 w-4 shrink-0 text-violet-600 dar
1k:text-violet-400" aria-hidden="true"><rect width="8" height="8" x="3" y="3" rx="2"></rect><path d="M7 11v4a2 2 0 0 0 2 2h4"></path><rect width="8" height="8" x="13" y="13" rx="2"></rect></svg><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Order fulfillment across services</h3></div><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Event bus in the middle, warehouse and shipping reacting, customer notified last. The shape of a choreographed flow rather than an orchestrated one.</p><p class="mt-3 text-xs text-zinc-500 dark:text-zinc-500">6<!-- --> <!-- -->participants<!-- --> · <!-- -->14<!-- --> <!-- -->messages</p><div class="mt-auto pt-4 flex flex-wrap items-center gap-2"><a class="rounded-lg bg-violet-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-violet-700" href="/?template=seq-fulfillment&mode=chat">Refine in chat</a><a class="rounded-lg border border-zinc-200 px-3 py-1.5 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800" href="/?template=seq-fulfillment">Use this template</a><button type="button" class="rounded-lg px-2 py-1.5 text-sm text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-500 dark:hover:text-zinc-200">Copy Mermaid</button></div></article><article class="flex flex-col rounded-2xl border border-zinc-200 bg-white p-4 transition hover:border-violet-300 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-violet-700"><button type="button" title="Click to enlarge" aria-label="Direct file upload â Click to enlarge" class="group/thumb relative block w-full cursor-zoom-in rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900"><div role="img" aria-label="Direct file upload" class="w-full rounded-xl bg-white p-3 ring-1 ring-zinc-200 dark:ring-zinc-800 h-80 overflow-hidden"><div class="h-full w-full animate-pulse rounded-lg bg-zinc-100"></div></div><span class="pointer-events-none absolute bottom-2 right-2 flex items-center gap-1 rounded-md bg-zinc-900/80 px-2 py-1 text-xs font-medium text-white opacity-0 transition-opacity group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2 h-3 w-3" aria-hidden="true"><path d="M15 3h6v6"></path><path d="m21 3-7 7"></path><path d="m3 21 7-7"></path><path d="M9 21H3v-6"></path></svg>Click to enlarge</span></button><div class="mt-4 flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text mt-0.5 h-4 w-4 shrink-0 text-violet-600 dark:text-violet-400" aria-hidden="true"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Direct file upload</h3></div><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Pre-signed URL, browser uploads straight to object storage, worker picks it up afterwards. The picture that explains why the file never touches your API.</p><p class="mt-3 text-xs text-zinc-500 dark:text-zinc-500">5<!-- --> <!-- -->participants<!-- --> · <!-- -->16<!-- --> <!-- -->messages</p><div class="mt-auto pt-4 flex flex-wrap items-center gap-2"><a class="rounded-lg bg-violet-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-violet-700" href="/?template=seq-file-upload&mode=chat">Refine in chat</a><a class="rounded-lg border border-zinc-200 px-3 py-1.5 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800" href="/?template=seq-file-upload">Use this template</a><button type="button" class="rounded-lg px-2 py-1.5 text-sm text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-500 dark:hover:text-zinc-200">Copy Mermaid</button></div></article><article class="flex flex-col rounded-2xl border border-zinc-200 bg-white p-4 transition hover:border-violet-300 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-violet-700"><button type="button" title="Click to enlarge" aria-label="Webhook delivery & retry â Click to enlarge" class="group/thumb relative block w-full cursor-zoom-in rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900"><div role="img" aria-label="Webhook delivery & retry" class="w-full rounded-xl bg-white p-3 ring-1 ring-zinc-200 dark:ring-zinc-800 h-80 overflow-hidden"><div class="h-full w-full animate-pulse rounded-lg bg-zinc-100"></div></div><span class="pointer-events-none absolute bottom-2 right-2 flex items-center gap-1 rounded-md bg-zinc-900/80 px-2 py-1 text-xs font-medium text-white opacity-0 transition-opacity group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2 h-3 w-3" aria-hidden="true"><path d="M15 3h6v6"></path><path d="m21 3-7 7"></path><path d="m3 21 7-7"></path><path d="M9 21H3v-6"></path></svg>Click to enlarge</span></button><div class="mt-4 flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send mt-0.5 h-4 w-4 shrink-0 text-violet-600 dar
1k:text-violet-400" aria-hidden="true"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path><path d="m21.854 2.147-10.94 10.939"></path></svg><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Webhook delivery & retry</h3></div><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Queue, delivery attempt, non-2xx, backoff, and the point where a failing endpoint gets disabled and a human is told. Support asks about this flow constantly.</p><p class="mt-3 text-xs text-zinc-500 dark:text-zinc-500">5<!-- --> <!-- -->participants<!-- --> · <!-- -->15<!-- --> <!-- -->messages</p><div class="mt-auto pt-4 flex flex-wrap items-center gap-2"><a class="rounded-lg bg-violet-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-violet-700" href="/?template=seq-webhook-retry&mode=chat">Refine in chat</a><a class="rounded-lg border border-zinc-200 px-3 py-1.5 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800" href="/?template=seq-webhook-retry">Use this template</a><button type="button" class="rounded-lg px-2 py-1.5 text-sm text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-500 dark:hover:text-zinc-200">Copy Mermaid</button></div></article><article class="flex flex-col rounded-2xl border border-zinc-200 bg-white p-4 transition hover:border-violet-300 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-violet-700"><button type="button" title="Click to enlarge" aria-label="Chat message delivery â Click to enlarge" class="group/thumb relative block w-full cursor-zoom-in rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900"><div role="img" aria-label="Chat message delivery" class="w-full rounded-xl bg-white p-3 ring-1 ring-zinc-200 dark:ring-zinc-800 h-80 overflow-hidden"><div class="h-full w-full animate-pulse rounded-lg bg-zinc-100"></div></div><span class="pointer-events-none absolute bottom-2 right-2 flex items-center gap-1 rounded-md bg-zinc-900/80 px-2 py-1 text-xs font-medium text-white opacity-0 transition-opacity group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2 h-3 w-3" aria-hidden="true"><path d="M15 3h6v6"></path><path d="m21 3-7 7"></path><path d="m3 21 7-7"></path><path d="M9 21H3v-6"></path></svg>Click to enlarge</span></button><div class="mt-4 flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-messages-square mt-0.5 h-4 w-4 shrink-0 text-violet-600 dark:text-violet-400" aria-hidden="true"><path d="M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path><path d="M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1"></path></svg><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Chat message delivery</h3></div><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
1Websocket gateway, persistence, fan-out and a push notification for the recipient who is offline. Two clients on one diagram, which is where sequence diagrams earn their keep.</p><p class="mt-3 text-xs text-zinc-500 dark:text-zinc-500">6<!-- --> <!-- -->participants<!-- --> · <!-- -->14<!-- --> <!-- -->messages</p><div class="mt-auto pt-4 flex flex-wrap items-center gap-2"><a class="rounded-lg bg-violet-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-violet-700" href="/?template=seq-chat-message&mode=chat">Refine in chat</a><a class="rounded-lg border border-zinc-200 px-3 py-1.5 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800" href="/?template=seq-chat-message">Use this template</a><button type="button" class="rounded-lg px-2 py-1.5 text-sm text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-500 dark:hover:text-zinc-200">Copy Mermaid</button></div></article></div></section><section class="border-t border-zinc-200 bg-zinc-50 py-14 dark:border-zinc-800 dark:bg-zinc-900/40"><div class="max-w-[clamp(320px,88vw,1024px)] mx-auto px-4"><h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">How to use these templates</h2><div class="mt-8 grid gap-6 sm:grid-cols-2"><div><h3 class="text-base font-semibold text-zinc-900 dark:text-white">1. Take the flow with the most participants</h3><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Counter-intuitive, but it works: pick the template with more services than you need. Deleting a column you can see is a two-second decision; noticing a hop you forgot to draw usually happens during the incident it caused.</p></div><div><h3 class="text-base font-semibold text-zinc-900 dark:text-white">2. Open it â the whole interaction is already drawn</h3><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">The diagram is on the canvas the moment the page loads, with participants in the order they first appear, responses drawn as dashed lines, and the asynchronous hops marked as such.</p></div><div><h3 class="text-base font-semibold text-zinc-900 dark:text-white">3. Talk it into your system</h3><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Open the chat panel and correct it in sentences: "put a queue between the API and the worker, add a retry after the timeout, rename Payment provider to Stripe, drop the email service." The assistant edits the same structured diagram you are looking at, so each turn returns a redrawn version rather than a fresh guess.</p></div><div><h3 class="text-base font-semibold text-zinc-900 dark:text-white">4. Hand-edit and export</h3><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">The split view puts the Mermaid source next to the preview for the last few touches. Then SVG for docs that get zoomed, PNG for slides and tickets, or the raw source committed next to the code it describes.</p></div></div></div></section><section class="max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 py-14"><h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">What is a sequence diagram?</h2><div class="mt-5 space-y-4 max-w-3xl"><p class="text-sm sm:text-base leading-relaxed text-zinc-600 dark:text-zinc-400">A UML sequence diagram shows an interaction over time: which participant sends which message to which other participant, and in what order. Each participant gets a vertical lifeline, time runs down the page, and every arrow is one message. It answers "who calls whom, and what comes back" â not "what is this system made of", which is a class diagram, and not "what happens next", which is a flowchart.</p><p class="text-sm sm:text-base leading-relaxed text-zinc-600 dark:text-zinc-400">It is the diagram that settles arguments about distributed systems. Once the hops are drawn in order, the questions answer themselves: where the latency is, what happens if the third call fails, whether that callback can arrive before the response it depends on. Most of the value shows up while you are drawing it, not after.</p><p class="text-sm sm:text-base leading-relaxed text-zinc-600 dark:text-zinc-400">Mermaid's sequenceDiagram syntax covers what engineering docs need: participants with readable labels, solid request arrows, dashed responses and self-calls. It stops short of full UML â no combined fragments with formal guards. In practice a note or a second diagram for the failure path reads better than nested frames anyway.</p></div></section><section class="border-t border-zinc-200 bg-zinc-50 py-14 dark:border-zinc-800 dark:bg-zinc-900/40"><div class="max-w-[clamp(320px,88vw,1024px)] mx-auto px-4"><h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">Sequence diagram syntax reference</h2><p class="mt-3 max-w-3xl text-sm sm:text-base leading-relaxed text-zinc-600 dark:text-zinc-400">Six things carry almost all the meaning in a sequence diagram. The one people get wrong is the dashed arrow: leave the responses out and the diagram becomes a call graph with no sense of time.</p><div class="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-3"><div class="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900"><div class="flex items-center gap-2"><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Participant</h3><code class="rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-xs text-violet-700 dark:bg-zinc-800 dark:text-violet-300">participant id as Label</code></div><div class="mt-3"><div role="img" aria-label="Participant" class="w-full rounded-xl bg-white p-3 ring-1 ring-zinc-200 dark:ring-zinc-800 h-32 overflow-hidden"><div class="h-full w-full animate-pulse rounded-lg bg-zinc-100"></div></div></div><p class="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Each column is a participant: a user, a service, a queue, a database. The short id is what arrows refer to; the label is what readers see, so it can contain spaces.</p></div><div class="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900"><div class="flex items-center gap-2"><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Time flows down</h3><code class="rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-xs text-violet-700 dark:bg-zinc-800 dark:text-violet-300">top â bottom</code></div><div class="mt-3"><div role="img" aria-label="Time flows down" class="w-full rounded-xl bg-white p-3 ring-1 ring-zinc-200 dark:ring-zinc-800 h-32 overflow-hidden"><div class="h-full w-full animate-pulse rounded-lg bg-zinc-100"></div></div></div><p class="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">There is no arrow numbering â order on the page is order in time. Declaration order sets the left-to-right layout, so declare participants roughly in the order they first appear and the arrows stop crossing.</p></div><div class="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900"><div class="flex items-center gap-2"><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Request</h3><code class="rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-xs text-violet-700 dark:bg-zinc-800 dark:text-violet-300">->></code></div><div class="mt-3"><div role="img" aria-label="Request" class="w-full rounded-xl bg-white p-3 ring-1 ring-zinc-200 dark:ring-zinc-800 h-32 overflow-hidden"><div class="h-full w-full animate-pulse rounded-lg bg-zinc-100"></div></div></div><p class="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">A solid line with a filled arrowhead: one participant calls another and waits. Most arrows in an API diagram are this one.</p></div><div class="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900"><div class="flex items-center gap-2"><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Response</h3><code class="rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-xs text-violet-700 dark:bg-zinc-800 dark:text-violet-300">-->></code></div><div class="mt-3"><div role="img" aria-label="Response" class="w-full rounded-xl bg-white p-3 ring-1 ring-zinc-200 dark:ring-zinc-800 h-32 overflow-hidden"><div class="h-full w-full animate-pulse rounded-lg bg-zinc-100"></div></div></div><p class="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">A dashed line back to the caller. Use it for returns, callbacks and events â anything that is not a fresh request. Drawing the response is what turns a call graph into a timeline.</p></div><div class="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900"><div class="flex items-center gap-2"><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Self-call</h3><code class="rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-xs text-violet-700 dark:bg-zinc-800 dark:text-violet-300">api->>api</code></div><div class="mt-3">
1<div role="img" aria-label="Self-call" class="w-full rounded-xl bg-white p-3 ring-1 ring-zinc-200 dark:ring-zinc-800 h-32 overflow-hidden"><div class="h-full w-full animate-pulse rounded-lg bg-zinc-100"></div></div></div><p class="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">A participant messaging itself, drawn as a loop back into its own lifeline. Good for validation, retries and internal work that would otherwise be invisible.</p></div><div class="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900"><div class="flex items-center gap-2"><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Message text</h3><code class="rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-xs text-violet-700 dark:bg-zinc-800 dark:text-violet-300">: text</code></div><div class="mt-3"><div role="img" aria-label="Message text" class="w-full rounded-xl bg-white p-3 ring-1 ring-zinc-200 dark:ring-zinc-800 h-32 overflow-hidden"><div class="h-full w-full animate-pulse rounded-lg bg-zinc-100"></div></div></div><p class="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Everything after the colon rides on the arrow. Be specific â "POST /login (email, password)" documents an interface; "login" documents nothing.</p></div></div></div></section><section class="max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 py-14"><div class="rounded-2xl bg-gradient-to-br from-violet-600 to-indigo-600 px-6 py-10 text-center sm:px-10"><h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-white">Nothing close enough?</h2><p class="mx-auto mt-3 max-w-2xl text-sm sm:text-base leading-relaxed text-violet-100">
1Describe the interaction in a sentence or two and let the generator draw the first version â then refine it exactly the same way.</p><a class="mt-6 inline-block rounded-xl bg-white px-5 py-2.5 text-sm font-medium text-violet-700 transition-colors hover:bg-violet-50" href="/">Open the generator</a></div></section><section class="max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 pb-14"><h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">Frequently asked questions</h2><div class="mt-6 divide-y divide-zinc-200 dark:divide-zinc-800"><details class="group py-4"><summary class="cursor-pointer list-none text-base font-medium text-zinc-900 marker:hidden dark:text-white">How do I change a template after importing it?</summary><p class="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Two ways, suited to different edits. Chat is for structural changes described in words â "add a queue between the API and the worker", "drop the email service", "move the token exchange to the backend" â and returns a redrawn diagram each turn. The split-view editor is for surgical ones: fix a typo in a message, rename a participant, reorder two calls. Most people import, talk the shape into place, then polish in the editor.</p></details><details class="group py-4"><summary class="cursor-pointer list-none text-base font-medium text-zinc-900 marker:hidden dark:text-white">Does the assistant actually understand the imported diagram?</summary><p class="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Yes, because the template is structured data rather than a picture or a blob of text. The imported participants and messages become the conversation's working state, so "delete the email service" removes that exact column and the messages attached to it â the assistant is not re-guessing your diagram from a description of it.</p></details><details class="group py-4"><summary class="cursor-pointer list-none text-base font-medium text-zinc-900 marker:hidden dark:text-white">What is the difference between a solid and a dashed arrow?</summary><p class="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Solid (->>) is a request: one participant calls another. Dashed (-->>) is what comes back â a return value, a callback, an event. The convention matters because a diagram of solid arrows only shows who calls whom; adding the dashed replies is what turns it into a timeline you can reason about.</p></details><details class="group py-4"><summary class="cursor-pointer list-none text-base font-medium text-zinc-900 marker:hidden dark:text-white">How do I show something asynchronous?</summary><p class="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Draw the reply as a dashed arrow that arrives later than the request it answers, with everything that happened in between still visible. The webhook and fulfillment templates both do this: the response to the shopper goes out before the payment confirmation arrives, which is exactly the property w
1orth documenting.</p></details><details class="group py-4"><summary class="cursor-pointer list-none text-base font-medium text-zinc-900 marker:hidden dark:text-white">What is the difference between a sequence diagram and a flowchart?</summary><p class="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">A sequence diagram is organised by participant: the columns are services or people, and the arrows between them are messages. A flowchart is organised by step: the boxes are actions, and there is no notion of who performs them. If your question is "which service calls which, and in what order", draw a sequence diagram.</p></details><details class="group py-4"><summary class="cursor-pointer list-none text-base font-medium text-zinc-900 marker:hidden dark:text-white">How many participants can one diagram hold?</summary><p class="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Readability, not the tool, is the limit. Past six or seven columns the arrows start crossing and the diagram gets wide enough to need horizontal scrolling. Split by phase â authentication in one diagram, fulfillment in another â rather than drawing the whole request lifecycle at once. The templates here sit deliberately at five or six.</p></details><details class="group py-4"><summary class="cursor-pointer list-none text-base font-medium text-zinc-900 marker:hidden dark:text-white">What export formats are supported?</summary><p class="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">SVG, PNG, and the raw Mermaid source. SVG stays sharp at any zoom, which matters for wide diagrams; PNG pastes cleanly into slide decks and issue trackers; and the Mermaid source can be committed alongside your code so the diagram is reviewed like everything else.</p></details></div></section><section class="max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 pb-16"><h2 class="text-lg font-semibold text-zinc-900 dark:text-white">Related</h2><div class="mt-4 grid gap-4 sm:grid-cols-2"><a class="rounded-xl border border-zinc-200 p-4 transition hover:border-violet-300 hover:shadow-sm dark:border-zinc-800 dark:hover:border-violet-700" href="/sequence-diagram-from-text"><span class="block text-sm font-medium text-zinc-900 dark:text-white">AI sequence diagram generator</span><span class="mt-1 block text-sm text-zinc-500 dark:text-zinc-400">Start from prose instead of a template: describe the interaction, get Mermaid.</span></a><a class="rounded-xl border border-zinc-200 p-4 transition hover:border-violet-300 hover:shadow-sm dark:border-zinc-800 dark:hover:border-violet-700" href="/uml-diagram-from-text"><span class="block text-sm font-medium text-zinc-900 dark:text-white">UML diagrams from text</span><span class="mt-1 block text-sm text-zinc-500 dark:text-zinc-400">Class, sequence and state diagrams â the whole UML family in one place.</span></a><a class="rounded-xl border border-zinc-200 p-4 transition hover:border-violet-300 hover:shadow-sm dark:border-zinc-800 dark:hover:border-violet-700" href="/flowchart-template"><span class="block text-sm font-medium text-zinc-900 dark:text-white">Flowchart templates</span><span class="mt-1 block text-sm text-zinc-500 dark:text-zinc-400">For when the order of steps matters more than who performs them.</span></a><a class="rounded-xl border border-zinc-200 p-4 transition hover:border-violet-300 hover:shadow-sm dark:border-zinc-800 dark:hover:border-violet-700" href="/class-diagram-template"><span class="block text-sm font-medium text-zinc-900 dark:text-white">Class diagram templates</span><span class="mt-1 block text-sm text-zinc-500 dark:text-zinc-400">The structural companion: eight ready-made UML class diagrams.</span></a></div></section></main><footer class="border-t border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50"><div class="max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 py-10 grid grid-cols-2 sm:grid-cols-4 gap-8"><div class="col-span-2 sm:col-span-1"><a class="flex items-center gap-2 text-lg font-semibold tracking-tight hover:opacity-80 transition-opacity" href="/"><svg viewBox="0 0 72 48" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8 w-12 shrink-0" aria-hidden="true"><path d="M7 8.5h28a7 7 0 0 1 7 7v13a7 7 0 0 1-7 7H18l-9 6v-6.7a7 7 0 0 1-6-6.9V15.5a7 7 0 0 1 7-7Z" stroke="#7C3AED" stroke-width="4" stroke-linejoin="round"></path><path d="M13 17h19M13 23h15M13 29h18" stroke="#C026D3" stroke-width="3" stroke-linecap="round"></path><path d="M45 24h7m-3-3 3 3-3 3" stroke="#C026D3" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"></path><path d="M57 24 64 16M57 24l7 8" stroke="#7C3AED" stroke-width="2.8" stroke-linecap="round"></path><circle cx="57" cy="24" r="3.5" fill="white" stroke="#7C3AED" stroke-width="2.8"></circle><circle cx="66" cy="14" r="3.5" fill="white" stroke="#7C3AED" stroke-width="2.8"></circle><circle cx="66" cy="34" r="3.5" fill="white" stroke="#7C3AED" stroke-width="2.8"></circle></svg><span>VizText</span></a><p class="mt-3 text-xs text-zinc-500 dark:text-zinc-400 max-w-[200px] leading-relaxed">Eight fully-drawn interaction flows, responses and all. Open one and it's on the canvas right away. Then talk it into your system: "put the queue between the API and the worker, add a retry, drop the email service."</p></div><div><h3 class="text-xs font-semibold text-zinc-900 dark:text-white uppercase tracking-wide mb-3">Product</h3><ul class="space-y-2 text-sm text-zinc-600 dark:text-zinc-400"><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/">Home</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/">Generator</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/flowchart-template">Flowchart templates</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/sequence-diagram-template">Sequence diagram templates</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/class-diagram-template">Class diagram templates</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/erd-template">ER diagram templates</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/diagram-tutorials">Tutorials</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/changelog">Changelog</a></li></ul></div><div><h3 class="text-xs font-semibold text-zinc-900 dark:text-white uppercase tracking-wide mb-3">Diagram Types</h3><ul class="space-y-2 text-sm text-zinc-600 dark:text-zinc-400"><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/flowchart-from-text">Text to Flowchart AI</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/sequence-diagram-from-text">Sequence Diagram</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/erd-from-text">ERD</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/state-diagram-from-text">State Diagram</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/class-diagram-from-text">UML Class Diagram</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/mindmap-from-text">Text to Mind Map</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/gantt-from-text">
1Gantt Chart</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/chat-to-diagram">Chat to Diagram</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/architecture-diagram-from-text">Architecture Diagram</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/uml-diagram-from-text">UML Diagram</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/ai-diagram-from-text">Diagram</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/ai-diagram-from-code">Diagram from Code</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/ai-diagram-from-json">Diagram from JSON</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/chatgpt-mermaid-fixer">ChatGPT Mermaid Fixer</a></li></ul></div><div><h3 class="text-xs font-semibold text-zinc-900 dark:text-white uppercase tracking-wide mb-3">Legal</h3><ul class="space-y-2 text-sm text-zinc-600 dark:text-zinc-400"><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/privacy">Privacy</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/terms">Terms</a></li><li><a class="hover:text-zinc-900 dark:hover:text-white transition-colors" href="/contact">Contact</a></li></ul></div></div><div class="border-t border-zinc-200 dark:border-zinc-800"><div class="max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 py-4 text-xs text-zinc-500 dark:text-zinc-500 text-center">© 2026 VizText. All rights reserved.</div></div></footer><!--$--><!--/$--><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$--><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$-->
1<script src="/_next/static/chunks/3wqoepsgoj-10.js" id="_R_" async=""></script>
1<script>(self.__next_f=self.__next_f||[]).push([0])</script>
1<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[99457,[\"/_next/static/chunks/405rlzg65uo7z.js\",\"/_next/static/chunks/3peschsa_l2ll.js\"],\"\"]\n3:I[62900,[\"/_next/static/chunks/405rlzg65uo7z.js\",\"/_next/static/chunks/3peschsa_l2ll.js\"],\"AuthSessionProvider\"]\n4:I[2483,[\"/_next/static/chunks/405rlzg65uo7z.js\",\"/_next/static/chunks/3peschsa_l2ll.js\"],\"QuotaProvider\"]\n5:I[61885,[\"/_next/static/chunks/405rlzg65uo7z.js\",\"/_next/static/chunks/3peschsa_l2ll.js\"],\"SignInModalProvider\"]\n6:I[63938,[\"/_next/static/chunks/3u2c5pk4fxsmt.js\",\"/_next/static/chunks/3t6e4rue2il0k.js\"],\"default\"]\n7:I[91565,[\"/_next/static/chunks/3u2c5pk4fxsmt.js\",\"/_next/static/chunks/3t6e4rue2il0k.js\"],\"default\"]\n8:I[25649,[\"/_next/static/chunks/405rlzg65uo7z.js\",\"/_next/static/chunks/3peschsa_l2ll.js\"],\"Analytics\"]\n9:I[132,[\"/_next/static/chunks/405rlzg65uo7z.js\",\"/_next/static/chunks/3peschsa_l2ll.js\"],\"SpeedInsights\"]\n14:I[48937,[\"/_next/static/chunks/405rlzg65uo7z.js\",\"/_next/static/chunks/3peschsa_l2ll.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/2zpqyjczq6s41.css\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.0r6juujl39pe6.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.0wgildi0cnwt9.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\na:T175a,"])</script>
1<script>self.__next_f.push([1,"[{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://viztext.com/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sequence Diagram Templates\",\"item\":\"https://viztext.com/sequence-diagram-template\"}]},{\"@context\":\"https://schema.org\",\"@type\":\"CollectionPage\",\"name\":\"Sequence Diagram Templates\",\"description\":\"Eight ready-made UML sequence diagram templates: OAuth sign-in, checkout callbacks, cached reads, webhook retries and more. Open one on the canvas in a click, then reshape it by chatting. Export SVG, PNG or Mermaid.\",\"url\":\"https://viztext.com/sequence-diagram-template\",\"isPartOf\":{\"@type\":\"WebSite\",\"name\":\"VizText\",\"url\":\"https://viztext.com/\"},\"mainEntity\":{\"@type\":\"ItemList\",\"numberOfItems\":8,\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"OAuth 2.0 sign-in\",\"description\":\"Authorize redirect, consent, the callback with the code, and the server-side token exchange. The diagram to paste into an RFC when someone asks why the code goes to your backend and not the browser.\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Checkout \u0026 payment callback\",\"description\":\"Storefront to order service to payment provider, with the asynchronous webhook that confirms the charge after the shopper has already seen a spinner.\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Cached API read\",\"description\":\"CDN edge, Redis and the database, showing both the hit and the miss path. Useful for explaining exactly which layer a stale response came from.\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Password reset\",\"description\":\"Request, single-use token, email delivery, and the token check on redemption. Draw it once and the security review gets shorter.\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Order fulfillment across services\",\"description\":\"Event bus in the middle, warehouse and shipping reacting, customer notified last. The shape of a choreographed flow rather than an orchestrated one.\"},{\"@type\":\"ListItem\",\"position\":6,\"name\":\"Direct file upload\",\"description\":\"Pre-signed URL, browser uploads straight to object storage, worker picks it up afterwards. The picture that explains why the file never touches your API.\"},{\"@type\":\"ListItem\",\"position\":7,\"name\":\"Webhook delivery \u0026 retry\",\"description\":\"Queue, delivery attempt, non-2xx, backoff, and the point where a failing endpoint gets disabled and a human is told. Support asks about this flow constantly.\"},{\"@type\":\"ListItem\",\"position\":8,\"name\":\"Chat message delivery\",\"description\":\"Websocket gateway, persistence, fan-out and a push notification for the recipient who is offline. Two clients on one diagram, which is where sequence diagrams earn their keep.\"}]}},{\"@context\":\"https://schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"How do I change a template after importing it?\",\"acceptedA
1nswer\":{\"@type\":\"Answer\",\"text\":\"Two ways, suited to different edits. Chat is for structural changes described in words â \\\"add a queue between the API and the worker\\\", \\\"drop the email service\\\", \\\"move the token exchange to the backend\\\" â and returns a redrawn diagram each turn. The split-view editor is for surgical ones: fix a typo in a message, rename a participant, reorder two calls. Most people import, talk the shape into place, then polish in the editor.\"}},{\"@type\":\"Question\",\"name\":\"Does the assistant actually understand the imported diagram?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes, because the template is structured data rather than a picture or a blob of text. The imported participants and messages become the conversation's working state, so \\\"delete the email service\\\" removes that exact column and the messages attached to it â the assistant is not re-guessing your diagram from a description of it.\"}},{\"@type\":\"Question\",\"name\":\"What is the difference between a solid and a dashed arrow?\",\"acceptedA
1nswer\":{\"@type\":\"Answer\",\"text\":\"Solid (-\u003e\u003e) is a request: one participant calls another. Dashed (--\u003e\u003e) is what comes back â a return value, a callback, an event. The convention matters because a diagram of solid arrows only shows who calls whom; adding the dashed replies is what turns it into a timeline you can reason about.\"}},{\"@type\":\"Question\",\"name\":\"How do I show something asynchronous?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Draw the reply as a dashed arrow that arrives later than the request it answers, with everything that happened in between still visible. The webhook and fulfillment templates both do this: the response to the shopper goes out before the payment confirmation arrives, which is exactly the property worth documenting.\"}},{\"@type\":\"Question\",\"name\":\"What is the difference between a sequence diagram and a flowchart?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"A sequence diagram is organised by participant: the columns are services or people, and the arrows between them are messages. A flowchart is organised by step: the boxes are actions, and there is no notion of who performs them. If your question is \\\"which service calls which, and in what order\\\", draw a sequence diagram.\"}},{\"@type\":\"Question\",\"name\":\"How many participants can one diagram hold?\",\"acceptedA
1nswer\":{\"@type\":\"Answer\",\"text\":\"Readability, not the tool, is the limit. Past six or seven columns the arrows start crossing and the diagram gets wide enough to need horizontal scrolling. Split by phase â authentication in one diagram, fulfillment in another â rather than drawing the whole request lifecycle at once. The templates here sit deliberately at five or six.\"}},{\"@type\":\"Question\",\"name\":\"What export formats are supported?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"SVG, PNG, and the raw Mermaid source. SVG stays sharp at any zoom, which matters for wide diagrams; PNG pastes cleanly into slide decks and issue trackers; and the Mermaid source can be committed alongside your code so the diagram is reviewed like everything else.\"}}]}]"])</script>
1<script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"sequence-diagram-template\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"sequence-diagram-template\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2zpqyjczq6s41.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/405rlzg65uo7z.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/3peschsa_l2ll.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable h-full antialiased\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"try{if(matchMedia('(prefers-color-scheme:dark)').matches)document.documentElement.classList.add('dark')}catch(e){}\"}}],[\"$\",\"script\",null,{\"defer\":true,\"src\":\"https://vibecafe.ai/telemetry/v1.js\",\"data-vc-product-id\":\"cmsd99evu00000aja1uhvqeeh\",\"data-vc-auth-key\":\"vc_web_Z_LCCJfcbSUYZQ-ASBu7GT34l48t5f-BawA8BobXMYI\"}],[\"$\",\"script\",null,{\"async\":true,\"src\":\"https://analytics.ahrefs.com/analytics.js\",\"data-key\":\"kbrelMw/6TFrfuYNHjnevA\"}]]}],[\"$\",\"body\",null,{\"className\":\"min-h-full flex flex-col bg-white dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100\",\"children\":[[[\"$\",\"$L2\",null,{\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-QFW53HBV9R\",\"strategy\":\"afterInteractive\"}],[\"$\",\"$L2\",null,{\"id\":\"ga-init\",\"strategy\":\"afterInteractive\",\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag(){dataLayer.push(arguments);}\\n gtag('js', new Date());\\n const pagePath = window.location.pathname;\\n gtag('config', 'G-QFW53HBV9R', {\\n send_page_view: true,\\n page_path: pagePath,\\n page_location: window.location.origin + pagePath,\\n allow_google_signals: false,\\n allow_ad_personalization_signals: false,\\n });\\n \"}]],[\"$\",\"$L3\",null,{\"children\":[\"$\",\"$L4\",null,{\"children\":[\"$\",\"$L5\",null,{\"children\":[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L7\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]}],[\"$\",\"$L8\",null,{}],[\"$\",\"$L9\",null,{}]]}]]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L7\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$a\"}}],\"$Lb\",\"$Lc\",\"$Ld\"],[\"$Le\",\"$Lf\",\"$L10\"],\"$L11\"]}],{}
1,null,false,null]},null,false,\"$@12\"]},null,false,null],\"$L13\",false]],\"m\":\"$undefined\",\"G\":[\"$14\",[\"$L15\"]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"oKHaYynEdul9mjab8o1oB\"}\n"])</script>
1<script>self.__next_f.push([1,"16:I[84834,[\"/_next/static/chunks/405rlzg65uo7z.js\",\"/_next/static/chunks/3peschsa_l2ll.js\",\"/_next/static/chunks/08kcfm3wnpnba.js\",\"/_next/static/chunks/0v9-5l57ry184.js\",\"/_next/static/chunks/2992zdnkh3rcq.js\"],\"default\"]\n17:I[37456,[\"/_next/static/chunks/405rlzg65uo7z.js\",\"/_next/static/chunks/3peschsa_l2ll.js\",\"/_next/static/chunks/08kcfm3wnpnba.js\",\"/_next/static/chunks/0v9-5l57ry184.js\",\"/_next/static/chunks/2992zdnkh3rcq.js\"],\"\"]\n18:I[18915,[\"/_next/static/chunks/405rlzg65uo7z.js\",\"/_next/static/chunks/3peschsa_l2ll.js\",\"/_next/static/chunks/08kcfm3wnpnba.js\",\"/_next/static/chunks/0v9-5l57ry184.js\",\"/_next/static/chunks/2992zdnkh3rcq.js\"],\"default\"]\n34:I[23210,[\"/_next/static/chunks/3u2c5pk4fxsmt.js\",\"/_next/static/chunks/3t6e4rue2il0k.js\"],\"OutletBoundary\"]\n35:\"$Sreact.suspense\"\n38:I[23210,[\"/_next/static/chunks/3u2c5pk4fxsmt.js\",\"/_next/static/chunks/3t6e4rue2il0k.js\"],\"ViewportBoundary\"]\n3a:I[23210,[\"/_next/static/chunks/3u2c5pk4fxsmt.js\",\"/_next/static/chunks/3t6e4rue2il0k.js\"],\"MetadataBoundary\"]\n"])</script>
1<script>self.__next_f.push([1,"b:[\"$\",\"$L16\",null,{\"locale\":\"en\",\"messages\":{\"nav\":{\"diagramTypes\":\"Diagram types\",\"diagramTypesShort\":\"Types\",\"language\":\"Language\",\"templates\":\"Templates\"},\"quota\":{\"label\":\"points today\",\"low\":\"Running low\",\"empty\":\"Daily limit reached\"},\"hero\":{\"title\":\"AI Diagram Generator â from Prompt or Chat\",\"subtitle\":\"AI diagram generator with two modes: Quick (one prompt, no signup) or Chat (multi-turn, AI clarifies before drawing). Edit and export SVG / PNG / Markdown.\",\"aiBadge\":\"AI-powered · No syntax to learn\",\"tryLabel\":\"Try:\",\"examples\":[{\"title\":\"Product launch mindmap\",\"icon\":\"Rocket\",\"diagramType\":\"mindmap\",\"prompt\":\"Mindmap for a product launch: Marketing (SEO, ads, social, PR), Engineering (backend, frontend, infra), Ops (support, billing, legal), Analytics (dashboards, funnels).\"},{\"title\":\"Login flow with 2FA\",\"icon\":\"Lock\",\"diagramType\":\"flowchart\",\"prompt\":\"Login flow with two-factor authentication: user enters credentials, backend validates, if valid send SMS code, user enters code, on match grant session token\"},{\"title\":\"OAuth handshake\",\"icon\":\"GitBranch\",\"diagramType\":\"sequence\",\"prompt\":\"OAuth 2.0 authorization code flow between browser, auth server, and resource server\"},{\"title\":\"Blog schema ERD\",\"icon\":\"Database\",\"diagramType\":\"erd\",\"prompt\":\"Blog database schema: users write posts, posts have many comments, users can leave comments. Each has id, timestamps, and its own columns.\"},{\"title\":\"CI/CD pipeline\",\"icon\":\"Workflow\",\"diagramType\":\"flowchart\",\"prompt\":\"CI/CD pipeline: push to main runs lint and tests in parallel, if pass build docker image, push to registry, deploy to staging, smoke test, promote to production on success\"}],\"typePickerLabel\":\"Diagram type\",\"typeNames\":{\"auto\":\"Auto-detect\",\"flowchart\":\"Flowchart\",\"sequence\":\"Sequence\",\"erd\":\"ERD\",\"state\":\"State\",\"class\":\"Class\",\"mindmap\":\"Mindmap\",\"gantt\":\"Gantt\",\"arch\":\"Arch\"},\"typeMindmapHint\":\"Opens the interactive mindmap tool â\",\"typePickerCollapse\":\"Hide â´\",\"typePickerExpand\":\"Change â¾\",\"typeArchHint\":\"System architecture diagrams â services, DBs, external APIs\",\"autoDetectOn\":\"Auto-detect on\",\"autoDetectOff\":\"Auto-detect off\"},\"onboarding\":{\"steps\":[{\"title\":\"Describe it\",\"desc\":\"Plain English. No diagram syntax, no type to pick first.\"},{\"title\":\"Get the diagram\",\"desc\":\"Editable code on the left, live preview on the right â tweak either.\"},{\"title\":\"Export\",\"desc\":\"SVG, PNG, or copy the Mermaid code into your docs.\"}]},\"promptBar\":{\"placeholder\":\"Describe a diagram â e.g. 'login flow with 2FA' or 'ERD for blog with users and posts'.\",\"typeHint\":\"No need to pick a type first â just write, we detect it.\",\"generate\":\"Generate\",\"generating\":\"Generatingâ¦\",\"hint\":\"â/Ctrl + Enter to generate\",\"hintMobile\":\"Tap Generate â\",\"collapse\":\"â´ Collapse\",\"expand\":\"â¾ Expand\",\"promptHidden\":\"Prompt hidden â click Expand to write\",\"promptLabel\":\"Prompt:\",\"viewMode\":{\"text\":\"Text\",\"split\":\"Split\",\"preview\":\"Preview\",\"textDesc\":\"Editor only\",\"splitDesc\":\"Editor + Preview\",\"previewDesc\":\"Preview only\"},\"rateLimitBase\":\"Daily limit reached.\",\"rateLimitResetIn\":\"Resets in\"},\"preview\":{\"label\":\"Preview\",\"fullscreenLabel\":\"Preview (Full screen · ESC to close)\",\"copy\":\"Copy code\",\"copied\":\"Copied â\",\"copyImage\":\"Copy image\",\"copyImageUnsupported\":\"This browser can't copy images â use Export PNG instead.\",\"exportSvg\":\"Export SVG\",\"exportPng\":\"Export PNG\",\"exporting\":\"Exportingâ¦\",\"watermarkHint\":\"Exports are watermarked · Sign in to remove\",\"zoomIn\":\"Zoom in (or scroll wheel up)\",\"zoomOut\":\"Zoom out (or scroll wheel down)\",\"resetView\":\"Reset view\",\"fullscreen\":\"Full screen\",\"exitFullscreen\":\"Exit full screen (ESC)\",\"savedLabel\":\"Auto-saved\",\"nodesLabel\":\"nodes\",\"edgesLabel\":\"edges\",\"paletteHint\":\"Press ? for commands\",\"untitled\":\"Untitled diagram\",\"renderError\":\"Preview failed to render. The diagram code may have a syntax issue. Try regenerating.\",\"renderErrorRetry\":\"Reload preview\"},\"palette\":{\"title\":\"Keyboard shortcuts\",\"close\":\"Close\"},\"landing\":{\"ctaOpenTool\":\"Open the generator â\",\"ctaOpenFullTool\":\"Or open the full generator â\",\"heroPromptHint\":\"Enter to generate · Shift + Enter for a new line\",\"heroPromptHintChat\":\"Enter to start a chat · Shift + Enter for a new line\",\"heroSubmitQuick\":\"Generate\",\"heroSubmitChat\":\"Refine in chat â\",\"examplesHeading\":\"Try one of these â click to open in the generator\",\"useCaseHeading\":\"When to use this\",\"relatedHeading\":\"Related tools\",\"madeWith\":\"Made with\",\"breadcrumbHome\":\"Home\",\"breadcrumbTypes\":\"Diagram Types\",\"
1whenToUseHeading\":\"When to use\",\"deepDiveHeading\":\"Deep dive\",\"faqHeading\":\"Frequently asked questions\",\"walkthroughCtaButton\":\"Start this conversation â\",\"walkthroughCtaHint\":\"Opens the generator in chat mode with the first message already filled in.\",\"chatCtaHeading\":\"Prefer a conversation?\",\"chatCtaBody\":\"Not sure how to phrase your prompt? Chat mode lets AI ask 2-3 clarifying questions about actors, events, and edge cases â then draws.\",\"chatCtaButton\":\"Try Chat to Diagram\",\"guideCtaHeading\":\"Want to draw better diagrams?\",\"guideCtaBody\":\"Read our in-depth tutorials â symbols, structures, 9 rules, and copy-paste prompt templates for real-world flows.\",\"guideCtaButton\":\"Read the tutorials\",\"midCtaHeading\":\"Ready to try it yourself?\",\"footerProductHeading\":\"Product\",\"footerDiagramTypesHeading\":\"Diagram Types\",\"footerLegalHeading\":\"Legal\",\"footerCopyright\":\"© 2026 VizText. All rights reserved.\",\"footerPrivacy\":\"Privacy\",\"footerTerms\":\"Terms\",\"footerContact\":\"Contact\",\"footerHome\":\"Home\",\"footerGenerator\":\"Generator\"},\"changelog\":{\"metaTitle\":\"Changelog â What's New in VizText\",\"metaDescription\":\"Release notes for VizText. Chat mode, new diagram types, SEO improvements, Chrome extension updates.\",\"pageTitle\":\"Changelog\",\"pageSubtitle\":\"Track what's new, what's better, and what got fixed. Latest releases first.\",\"kindLabels\":{\"feature\":\"New\",\"improvement\":\"Better\",\"fix\":\"Fixed\"},\"relatedHeading\":\"Related\",\"ctaHeading\":\"Try the latest version\",\"ctaButton\":\"Open the tool\",\"tryLabel\":\"Where to use it:\"},\"blog\":{\"metaTitle\":\"Diagram Tutorials â How to Draw Flowcharts, ER \u0026 Sequence Diagrams\",\"metaDescription\":\"Step-by-step tutorials on drawing flowcharts, ER diagrams, sequence diagrams, and architecture diagrams with AI. Prompt templates, methodology (arc42 · C4), real cases.\",\"pageTitle\":\"Diagram Tutorials\",\"pageSubtitle\":\"Step-by-step guides to drawing diagrams with AI. Prompt templates, methodology, and real cases.\",\"breadcrumbLabel\":\"Tutorials\",\"publishedOn\":\"Published on\",\"updatedOn\":\"Updated on\",\"readMinutes\":\"min read\",\"tagLabel\":\"Topics\",\"faqHeading\":\"FAQ\",\"relatedPostsHeading\":\"Continue reading\",\"ctaHeading\":\"Try VizText now\",\"ctaButton\":\"Open the tool\",\"backToList\":\"â Back to all tutorials\",\"navLabel\":\"Tutorials\"},\"share\":{\"button\":\"Share\",\"menuTitle\":\"Share this diagram\",\"toX\":\"Share on X\",\"toLinkedIn\":\"Share on LinkedIn\",\"toReddit\":\"Share on Reddit\",\"copyLink\":\"Copy link\",\"copied\":\"Link copied\",\"tweetText\":\"Made this diagram from a sentence with VizText\",\"preparing\":\"Getting your link readyâ¦\",\"tooLong\":\"This diagram is too big to share as a link. Export it as a PNG instead.\",\"invalid\":\"Draw a diagram first, then share it.\",\"unavailable\":\"We couldn't create a link just now. Try again in a moment.\",\"pageTitle\":\"A diagram made with VizText\",\"pageSubtitle\":\"Open it in the editor and change anything you want â free, no signup.\",\"diagramAlt\":\"The shared diagram\",\"openInEditor\":\"Open in the editor â\",\"makeYourOwn\":\"Make your own\",\"viewSource\":\"View the Mermaid source\"},\"markmap\":{\"placeholder\":\"Enter a topic to mindmap â e.g. 'Renaissance art movements' or 'How to prepare for a product launch'.\",\"promptLabel\":\"Topic\",\"generate\":\"Generate mindmap\",\"generating\":\"Generatingâ¦\",\"hint\":\"â/Ctrl + Enter to generate\",\"hintMobile\":\"Tap Generate â\",\"fit\":\"Fit\",\"exportMarkdown\":\"Export MD\",\"exportOpml\":\"Export OPML\",\"emptyHint\":\"Your mindmap will appear here\",\"heroTitle\":\"AI Mindmap Generator\",\"heroSubtitle\":\"Type any topic â AI builds an interactive mindmap. Click nodes to fold. Export as PNG, SVG, Markdown, or OPML for XMind.\",\"heroBadge\":\"Interactive · Foldable · Free\",\"tryLabel\":\"Try:\",\"viewMindmap\":\"Mindmap\",\"editMode\":\"Edit\",\"editModeDesc\":\"Show markdown editor alongside the mindmap for direct editing\",\"examples\":[{\"title\":\"Renaissance art movements\",\"prompt\":\"Renaissance art movements\"},{\"title\":\"Product-market fit signals\",\"prompt\":\"Product-market fit â signals, measurement, common pitfalls\"},{\"title\":\"Deep learning fundamentals\",\"prompt\":\"Deep learning fundamentals â architectures, training, tools\"},{\"title\":\"Launching a SaaS\",\"prompt\":\"How to launch a SaaS product â from idea to first customer\"}]},\"homeSeo\":{\"howItWorks\":{\"heading\":\"How the AI diagram generator works\",\"steps\":[{\"icon\":\"Type\",\"title\":\"1. Describe your diagram â one sentence or a chat\",\"body\":\"Write what you want in one or tw
1o sentences â a login flow with 2FA, a database schema for a blog, a product launch mindmap. Or switch to Chat mode and let AI ask a few clarifying questions first. English works. Chinese works. You do not need to know Mermaid, PlantUML, or Graphviz syntax.\"},{\"icon\":\"Wand2\",\"title\":\"2. AI clarifies intent â then picks the right diagram type\",\"body\":\"In Quick mode, auto-detect classifies your prompt into flowchart, sequence diagram, ERD, class diagram, state diagram, mindmap, or Gantt in about 300ms. In Chat mode, AI asks 2-3 questions to firm up actors, events, and edge cases before picking a type â better for complex flows.\"},{\"icon\":\"Sparkles\",\"title\":\"3. Get a rendered diagram â review and adjust\",\"body\":\"The AI returns valid Mermaid or markmap source, the preview canvas renders it live. In Chat mode, if AI made an assumption you disagree with, reject it in one click and the diagram redraws without that element. Zoom, pan, and reset view work on desktop and mobile.\"},{\"icon\":\"Download\",\"title\":\"4. Edit and export\",\"body\":\"Open the split view to tweak the generated Mermaid source directly. Every edit re-renders instantly. Export as SVG for lossless scaling, PNG for slides and docs, Markdown or OPML for mindmaps you want to import into XMind or Obsidian.\"}]},\"useCases\":{\"heading\":\"What people use the diagram generator for\",\"intro\":\"The AI diagram generator covers the seven diagram types most engineers, PMs, and technical writers reach for every week. Pick Quick mode for one-shot generation, or Chat mode when you want AI to ask questions before drawing. Each use case links to a focused landing page with its own examples and prompts.\",\"cases\":[{\"icon\":\"GitBranch\",\"slug\":\"flowchart-from-text\",\"title\":\"Flowcharts from plain English\",\"body\":\"Turn a written process â user signup, order fulfilment, deploy pipeline, incident response â into a top-down or left-to-right flowchart. Nodes, decision diamonds, and edge labels are inferred from the wording. Best for onboarding docs, runbooks, and RFCs.\"},{\"icon\":\"ArrowLeftRight\",\"slug\":\"sequence-diagram-from-text\",\"title\":\"Sequence diagrams for API interactions\",\"body\":\"Describe who calls whom â client, gateway, auth service, database, third-party API â and get a lifeline diagram with request and response arrows. The AI adds notes for async callbacks and error paths when the prompt implies them. Great for API design reviews and integration handoffs.\"},{\"icon\":\"Database\",\"slug\":\"erd-from-text\",\"title\":\"ERD for database schema design\",\"body\":\"Sketch a data model in natural language â users write posts, posts have many comments, comments belong to users â and get an entity-relationship diagram with primary keys, foreign keys, and cardinality. Fastest way to align on a schema before writing a migration.\"},{\"icon\":\"Network\",\"slug\":\"mindmap-from-text\",\"title\":\"Mindmaps for planning and study notes\",\"body\":\"Feed the generator a topic â Renaissance art movements, product-market fit signals, launch checklist â and get an interactive markmap you can fold, expand, and export as OPML for XMind. Not just for engineering: writers, students, and PMs use it for outlines.\"},{\"icon\":\"CircleDot\",\"slug\":\"state-diagram-from-text\",\"title\":\"State diagrams for lifecycle modeling\",\"body\":\"Model a state machine â order status, subscription lifecycle, deployment stages â with transitions labeled by triggering event. Cleaner than trying to describe state in prose, and catches missing transitions before you code them.\"},{\"icon\":\"Box\",\"slug\":\"class-diagram-from-text\",\"title\":\"Class diagrams for OO design\",\"body\":\"Turn a domain description into a UML class diagram with attributes, methods, inheritance, and associations. Useful for code review, refactoring proposals, and teaching object-oriented design without hand-drawing boxes.\"},{\"icon\":\"Workflow\",\"slug\":\"gantt-from-text\",\"title\":\"Gantt charts for project timelines\",\"body\":\"Describe milestones and dependencies â design done by week 2, backend by week 5, launch week 8 â and get a Gantt chart with tasks, durations, and critical path. Lighter than Jira for anything that fits in a single sprint plan.\"}]},\"faq\":{\"heading\":\"Frequently asked questions\",\"intro\":\"Common questions about the AI diagram generator. Quick mode has no signup wall; Chat mode requires sign-in so it can keep the conversation context.\",\"items\":[{\"q\":\"Is VizText really free?\",\"a\":\"Yes. Quick mode supports every diagram type without signup, watermark, or credit card. Chat mode is also free but requires sign-in so it can keep conversation context. Both modes have a generous daily rate limit that resets every 24 hours.\"},{\"q\":\"What diagram types does the AI generator support?\",\"a\":\"Seven diagram types: flowchart, sequence diagram, ERD (entity-relationship diagram), class diagram, state diagram, mindmap, and Gantt chart. The first six are rendered with Mermaid; mindmaps are rendered with markmap for interactive folding and OPML export. Auto-detect picks the right type from your prompt, or you can pin it with the diagram type picker.\"}
1,{\"q\":\"Do I need to know Mermaid syntax?\",\"a\":\"No. You write in plain English (or Chinese). The AI generates valid Mermaid source behind the scenes, but you never need to touch it unless you want to. If you do know Mermaid, the split view lets you edit the source directly and see the change render live â good for last-mile tweaks.\"},{\"q\":\"What is the difference between Quick mode and Chat mode?\",\"a\":\"Quick mode generates a diagram from one prompt â fastest, best for straightforward flows. Chat mode lets AI ask 2-3 clarifying questions about actors, events, and edge cases before drawing â better when you're not sure of every detail. You can switch between tabs at any time and keep the same diagram type selection.\"},{\"q\":\"How many questions does Chat mode ask before drawing?\",\"a\":\"Typically 2-3, sometimes 4-5 for complex flows. There's a built-in budget so it will not ask forever. Once AI has enough context, it produces the diagram and shows any assumptions it made â you can reject any of them in one click.\"},{\"q\":\"Can I skip the questions and just generate?\",\"a\":\"Yes. In Chat mode, type 'just draw it' or 'skip questions' to jump straight to generation. AI will use whatever context it has and note its assumptions. If any assumption looks wrong, reject it and the diagram redraws.\"},{\"q\":\"What if AI adds elements I did not ask for?\",\"a\":\"After Chat mode generates a diagram, it shows a confirmation card listing anything it inferred â a return arrow you did not describe, an actor you did not mention. Click 'Reject' and the AI redraws without that element. Click 'Accept' and it's added to the diagram spec for the next iteration.\"},{\"q\":\"Can I edit the generated diagram?\",\"a\":\"Yes, in two ways. First, edit the underlying Mermaid source in the split view â every change re-renders in the preview instantly. Second, rerun the prompt with more detail, or add a follow-up sentence, and the AI regenerates the diagram from the new description. Mindmaps have a dedicated markdown editor with the same split behavior.\"},{\"q\":\"How do I export the diagram?\",\"a\":\"Every diagram type exports as SVG (lossless, scales to any size) and PNG (raster, drop into slides and docs). Mindmaps additionally export as Markdown and OPML â OPML imports cleanly into XMind, Obsidian, and most outline tools. Export buttons live in the preview status bar.\"},{\"q\":\"Does it support Chinese input?\",\"a\":\"Yes. Type your prompt in Chinese and the generator returns a Chinese-labeled diagram. Language is passed through the entire pipeline â from the UI locale, into the API request body, into the LLM directive â so the model does not default back to English on you. Mixed Chinese-English prompts also work.\"},{\"q\":\"Is there a rate limit?\",\"a\":\"Yes. A daily per-IP limit caps generation requests to keep the free tier sustainable. The exact number is generous enough that normal drafting will not hit it. If you do hit the limit, the UI shows the remaining reset time. The rate limit is enforced with Upstash Redis and is consistent across all Vercel edge instances.\"},{\"q\":\"Is my prompt data stored?\",\"a\":\"Quick mode prompts and generated code are not stored in our application database, though they may exist briefly in in-memory caches and are sent to a third-party large language model for generation. Chat mode stores messages, AI replies, diagram specifications, and generated code under your signed-in account so multi-turn context works. Production logs omit prompt content. See the privacy page for retention and deletion details.\"}]}},\"auth\":{\"signIn\":\"Sign in\",\"signOut\":\"Sign out\",\"signInWithGoogle\":\"Continue with Google\",\"signInWithGithub\":\"Continue with GitHub\",\"signInWithEmail\":\"Continue with email\",\"signInPageTitle\":\"Sign in to VizText\",\"signInPageSubtitle\":\"Pick how you'd like to sign in.\",\"comingSoonBadge\":\"Coming soon\",\"proBadge\":\"Pro\",\"upgradePrompt\":\"Sign in to unlock Chat mode.\",\"accountMenu\":\"Account\"},\"planMode\":{\"title\":\"Diagram type\",\"subtitle\":\"Choose a type and how to describe it.\",\"typePickerLabel\":\"Diagram type\",\"quickTab\":\"Quick\",\"planTab\":\"Chat\",\"planTabProBadge\":\"Limited free\",\"planTabSubtitle\":\"Answer a few questions â AI will draw it\",\"botIntro\":\"I'll help you create this diagram. Let me ask a few questions first.\\n\\nWhat kind of flow or system are you describing?\",\"inputPlaceholder\":\"Type a reply...\",\"generateButton\":\"Generate Diagram\",\"stubSignIn\":\"Sign in to use Chat mode.\",\"stubUpgrade\":\"Chat mode requires sign-in. Contact us if this message persists.\",\"alreadyGenerated\":\"This chat already produced a diagram. Start a new chat to iterate.\",\"thinking\":\"Thinking...\",\"navEntry\":\"Chat\",\"generatedNotice\":\"â Diagram ready\",\"needMessageFirst\":\"Describe what you want first, then click Generate.\",\"generateForceMessage\":\"Please generate the diagram now.\"},\"agent\":{\"tabSubtitle\":\"Agent â reflects, clarifies, verifies\",\"botIntro\":\"Describe the diagram you want. I'll ask what I need to know.\",\"inputPlaceholder\":\"Type your answer or new requirementâ¦\",\"thinking\":\"Thinkingâ¦\",\"thinkingSlow\":\"Still working, this is taking longer than usualâ¦\",\"generatingDrawing\":\"Drawing diagram · this takes a moment\",\"ask\":{\"header\":\"AskUserQuestion\",\"other\":\"Other â free input\",\"otherPlaceholder\":\"Type hereâ¦\",\"submit\":\"Send\",\"recommend\":\"Recommended\"},\"ready\":{\"header\":\"Ready confirmation\",\"formatLabel\":\"format\"},\"system\":{\"reset\":\"Conversation reset\",\"expire\":\"Session expired\"},\"reset\":{\"tooltip\":\"Reset conversation\",\"confirmTitle\":\"Reset conversation?\",\"confirmBody\":\"This will clear the current chat and start a fresh session.\",\"cancel\":\"Cancel\",\"confirm\":\"Reset\"},\"questionActors\":\"Who are the participants in this flow? (e.g. User, Server, DB)\",\"questionEvents\":\"What interactions happen between them? (each step: who does what to whom)\",\"questionSync\":\"Are these calls synchronous (waiting for a response) or asynchronous?\",\"questionNodes\":\"What are the main steps or decision points? (e.g. Login page, Check password, Redirect home)\",\"questionEdges\":\"How do these steps connect? Which flows into which, and what conditions branch?\",\"questionDirection\":\"Top-to-bottom (TD) or left-to-right (LR) layout?\",\"questionEntities\":\"What entities (tables) are involved? What are their key fields? (e.g. User: id, name, email)\",\"questionRelationships\":\"How are these entities related? (e.g. User has many Order · one-to-many)\",\"questionStates\":\"What states exist? (e.g. Pending, Paid, Completed)\",\"questionTransitions\":\"How do states transition? What triggers each transition?\",\"questionInitialState\":\"Which one is the initial state?\",\"questionClasses\":\"What classes exist? Fields and methods of each? (e.g. Animal
1: name/age · eat())\",\"questionRelations\":\"How are the classes related? (extends / implements / aggregation / composition / association / dependency)\",\"questionComponents\":\"What components are in the system? (client · service · database · cache · queue etc)\",\"questionConnections\":\"How are the components connected? What protocols?\",\"questionRootId\":\"What is the central topic?\",\"questionTasks\":\"What tasks in the project? Timing of each? (e.g. Design: Feb 1, 3 days)\",\"questionDiagramType\":\"Which kind of diagram do you want? Sequence / Flowchart / ERD / State / Class / Mindmap / Gantt / Arch. You can also pick from the button row above.\",\"questionFallback\":\"Could you clarify?\",\"errorRateLimit\":\"Daily limit reached. Try again after reset.\",\"errorStale\":\"This confirmation is no longer active. Please continue.\",\"errorInternal\":\"Server busy, please try again.\",\"generatedNotice\":\"â Diagram generated\",\"anonNextTurnHint\":\"Sign in to keep going â follow-ups, questions and confirmations all live in chat mode\",\"confirmedNotice\":\"â Confirmed\",\"answerAllLabel\":\"Yes to all remaining\",\"answerAllEcho\":\"Yes to all remaining\",\"assumptionsTitle\":\"I filled in a few things you didn't mention\",\"assumptionsHint\":\"Ignore this and just keep going\",\"assumptionsRemove\":\"Remove {n}\",\"assumptionsKeep\":\"Looks good\",\"assumptionsRemoveEcho\":\"Removed {n} of them\",\"stubSignIn\":\"Sign in to use Agent mode.\",\"switchConfirm\":{\"title\":\"Switch diagram type?\",\"body\":\"This will clear the current conversation. Sure to switch?\",\"cancel\":\"Cancel\",\"confirm\":\"Switch\"},\"badge\":{\"locked\":\"Locked\",\"auto\":\"Auto\",\"detecting\":\"Detectingâ¦\"}}}}]\n"])</script>
1<script>self.__next_f.push([1,"c:[\"$\",\"main\",null,{\"className\":\"flex-1 w-full\",\"children\":[[\"$\",\"section\",null,{\"className\":\"max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 py-12 sm:py-16\",\"children\":[[\"$\",\"nav\",null,{\"aria-label\":\"breadcrumb\",\"className\":\"mb-6 text-sm text-zinc-500 dark:text-zinc-400\",\"children\":[[\"$\",\"$L17\",null,{\"href\":\"/\",\"className\":\"transition-colors hover:text-zinc-900 dark:hover:text-white\",\"children\":\"Home\"}],[\"$\",\"span\",null,{\"className\":\"mx-2\",\"children\":\"·\"}],[\"$\",\"span\",null,{\"className\":\"text-zinc-900 dark:text-zinc-100\",\"children\":\"Sequence Diagram Templates\"}]]}],[\"$\",\"h1\",null,{\"className\":\"text-4xl sm:text-5xl font-bold tracking-tight text-zinc-900 dark:text-white\",\"children\":\"Sequence Diagram Templates\"}],[\"$\",\"p\",null,{\"className\":\"mt-5 max-w-2xl text-base sm:text-lg leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"Eight fully-drawn interaction flows, responses and all. Open one and it's on the canvas right away. Then talk it into your system: \\\"put the queue between the API and the worker, add a retry, drop the email service.\\\"\"}],[\"$\",\"div\",null,{\"className\":\"mt-7 flex flex-wrap items-center gap-3\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#templates\",\"className\":\"rounded-xl bg-violet-600 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-violet-700\",\"children\":\"Browse the templates\"}],[\"$\",\"$L17\",null,{\"href\":\"/\",\"className\":\"rounded-xl border border-zinc-200 px-5 py-2.5 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800\",\"children\":\"Or describe your own\"}]]}]]}],[\"$\",\"section\",null,{\"id\":\"templates\",\"className\":\"max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 pb-16 scroll-mt-20\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-2xl sm:text-3xl font-bold tracking-tight text-zinc-900 dark:text-white\",\"children\":\"Pick a template\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 max-w-3xl text-sm sm:text-base leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"Every diagram here is rendered from the same structured definition you get when you import it â nothing is a touched-up screenshot. Click any preview to see it at full size. \\\"Refine in chat\\\" puts the diagram on the canvas and opens the conversation panel, so your first sentence can start changing it; \\\"Use this template\\\" drops it into the editor and leaves the rest to you.\"}],[\"$\",\"div\",null,{\"className\":\"mt-8 grid gap-5 sm:grid-cols-2\",\"children\":[[\"$\",\"$L18\",\"seq-oauth\",{\"locale\":\"en\",\"templateId\":\"seq-oauth\",\"icon\":\"Lock\",\"title\":\"OAuth 2.0 sign-in\",\"description\":\"Authorize redirect, consent, the callback with the code, and the server-side token exchange. The diagram to paste into an RFC when someone asks why the code goes to your backend and not the browser.\",\"code\":\"sequenceDiagram\\n participant user as \\\"User\\\"\\n participant app as \\\"Your app\\\"\\n participant browser as \\\"Browser\\\"\\n participant idp as \\\"Identity provider\\\"\\n participant api as \\\"Your API\\\"\\n user-\u003e\u003eapp: Click 'Sign in with Google'\\n app-\u003e\u003ebrowser: Redirect to authorize URL\\n browser-\u003e\u003eidp: GET /authorize (client_id, scope, state)\\n idp-\u003e\u003euser: Show consent screen\\n user-\u003e\u003eidp: Approve access\\n idp--\u003e\u003ebrowser: Redirect to callback with code\\n browser-\u003e\u003eapi: GET /callback?code\u0026state\\n api-\u003e\u003eapi: Verify state matches session\\n api-\u003e\u003eidp: POST /token (code, client_secret)\\n idp--\u003e\u003eapi: access_token + id_token\\n api-\u003e\u003eapi: Verify id_token signature\\n api-\u003e\u003eapi: Find or create user record\\n api--\u003e\u003ebrowser: Set session cookie, redirect home\\n browser--\u003e\u003euser: Signed in\",\"thumbCode\":\"sequenceDiagram\\n participant user as \\\"User\\\"\\n participant app as \\\"Your app\\\"\\n participant browser as \\\"Browser\\\"\\n participant idp as \\\"Identity provider\\\"\\n participant api as \\\"Your API\\\"\\n user-\u003e\u003eapp: Click 'Sign in with Google'\\n app-\u003e\u003ebrowser: Redirect to authorize URL\\n browser-\u003e\u003eidp: GET /authorize (client_id, scope, state)\\n idp-\u003e\u003euser: Show consent screen\\n user-\u003e\u003eidp: Approve access\\n idp--\u003e\u003ebrowser: Redirect to callback with code\\n browser-\u003e\u003eapi: GET /callback?code\u0026state\\n api-\u003e\u003eapi: Verify state matches session\\n api-\u003e\u003eidp: POST /token (code, client_secret)\\n idp--\u003e\u003eapi: access_token + id_token\\n api-\u003e\u003eapi: Verify id_token signature\\n api-\u003e\u003eapi: Find or create user record\\n api--\u003e\u003ebrowser: Set session cookie, redirect home\\n browser--\u003e\u003euser: Signed in\",\"classCount\":5,\"relationCount\":14,\"labels\":{\"useTemplate\":\"Use this template\",\"refineInChat\":\"Refine in chat\",\"copyCode\":\"Copy Mermaid\",\"copied\":\"Copied\",\"classCount\":\"participants\",\"relationCount\":\"messages\",\"enlarge\":\"Click to enlarge\",\"enlargeNote\":\"Full size â every message and response, at 1:1.\",\"close\":\"Close\"}}],\"$L19\",\"$L1a\",\"$L1b\",\"$L1c\",\"$L1d\",\"$L1e\",\"$L1f\"]}]]}],\"$L20\",\"$L21\",\"$L22\",\"$L23\",\"$L24\",\"$L25\"]}]\n"])</script>
1<script>self.__next_f.push([1,"d:[\"$\",\"footer\",null,{\"className\":\"border-t border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50\",\"children\":[[\"$\",\"div\",null,{\"className\":\"max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 py-10 grid grid-cols-2 sm:grid-cols-4 gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"col-span-2 sm:col-span-1\",\"children\":[[\"$\",\"$L17\",null,{\"href\":\"/\",\"className\":\"flex items-center gap-2 text-lg font-semibold tracking-tight hover:opacity-80 transition-opacity\",\"children\":[[\"$\",\"svg\",null,{\"viewBox\":\"0 0 72 48\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"h-8 w-12 shrink-0\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M7 8.5h28a7 7 0 0 1 7 7v13a7 7 0 0 1-7 7H18l-9 6v-6.7a7 7 0 0 1-6-6.9V15.5a7 7 0 0 1 7-7Z\",\"stroke\":\"#7C3AED\",\"strokeWidth\":\"4\",\"strokeLinejoin\":\"round\"}],[\"$\",\"path\",null,{\"d\":\"M13 17h19M13 23h15M13 29h18\",\"stroke\":\"#C026D3\",\"strokeWidth\":\"3\",\"strokeLinecap\":\"round\"}],[\"$\",\"path\",null,{\"d\":\"M45 24h7m-3-3 3 3-3 3\",\"stroke\":\"#C026D3\",\"strokeWidth\":\"2.8\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"}],[\"$\",\"path\",null,{\"d\":\"M57 24 64 16M57 24l7 8\",\"stroke\":\"#7C3AED\",\"strokeWidth\":\"2.8\",\"strokeLinecap\":\"round\"}],[\"$\",\"circle\",null,{\"cx\":\"57\",\"cy\":\"24\",\"r\":\"3.5\",\"fill\":\"white\",\"stroke\":\"#7C3AED\",\"strokeWidth\":\"2.8\"}],[\"$\",\"circle\",null,{\"cx\":\"66\",\"cy\":\"14\",\"r\":\"3.5\",\"fill\":\"white\",\"stroke\":\"#7C3AED\",\"strokeWidth\":\"2.8\"}],[\"$\",\"circle\",null,{\"cx\":\"66\",\"cy\":\"34\",\"r\":\"3.5\",\"fill\":\"white\",\"stroke\":\"#7C3AED\",\"strokeWidth\":\"2.8\"}]]}],[\"$\",\"span\",null,{\"children\":\"VizText\"}]]}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-xs text-zinc-500 dark:text-zinc-400 max-w-[200px] leading-relaxed\",\"children\":\"Eight fully-drawn interaction flows, responses and all. Open one and it's on the canvas right away. Then talk it into your system: \\\"put the queue between the API and the worker, add a retry, drop the email service.\\\"\"}],false]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-xs font-semibold text-zinc-900 dark:text-white uppercase tracking-wide mb-3\",\"children\":\"Product\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-2 text-sm text-zinc-600 dark:text-zinc-400\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Home\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Generator\"}]}],[[\"$\",\"li\",\"flowchart-template\",{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/flowchart-template\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Flowchart templates\"}]}],[\"$\",\"li\",\"sequence-diagram-template\",{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/sequence-diagram-template\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Sequence diagram templates\"}]}],[\"$\",\"li\",\"class-diagram-template\",{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/class-diagram-template\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Class diagram templates\"}]}],[\"$\",\"li\",\"erd-template\",{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/erd-template\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"ER diagram templates\"}]}]],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/diagram-tutorials\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Tutorials\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/changelog\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Changelog\"}]}]]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-xs font-semibold text-zinc-900 dark:text-white uppercase tracking-wide mb-3\",\"children\":\"Diagram Types\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-2 text-sm text-zinc-600 dark:text-zinc-400\",\"children\":[[\"$\",\"li\",\"flowchart-from-text\",{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/flowchart-from-text\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Text to Flowchart AI\"}]}],[\"$\",\"li\",\"sequence-diagram-from-text\",{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/sequence-diagram-from-text\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Sequence Diagram\"}]}],\"$L26\",\"$L27\",\"$L28\",\"$L29\",\"$L2a\",\"$L2b\",\"$L2c\",\"$L2d\",\"$L2e\",\"$L2f\",\"$L30\",\"$L31\"]}]]}],\"$L32\"]}],\"$L33\"]}]\n"])</script>
1<script>self.__next_f.push([1,"e:[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/08kcfm3wnpnba.js\",\"async\":true,\"nonce\":\"$undefined\"}]\nf:[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0v9-5l57ry184.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n10:[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/2992zdnkh3rcq.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n11:[\"$\",\"$L34\",null,{\"children\":[\"$\",\"$35\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@36\"}]}]\n37:[]\n12:\"$W37\"\n13:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L38\",null,{\"children\":\"$L39\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L3a\",null,{\"children\":[\"$\",\"$35\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L3b\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n15:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2zpqyjczq6s41.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n"])</script>
1<script>self.__next_f.push([1,"3c:I[67071,[\"/_next/static/chunks/405rlzg65uo7z.js\",\"/_next/static/chunks/3peschsa_l2ll.js\",\"/_next/static/chunks/08kcfm3wnpnba.js\",\"/_next/static/chunks/0v9-5l57ry184.js\",\"/_next/static/chunks/2992zdnkh3rcq.js\"],\"default\"]\n"])</script>
1<script>self.__next_f.push([1,"19:[\"$\",\"$L18\",\"seq-checkout\",{\"locale\":\"en\",\"templateId\":\"seq-checkout\",\"icon\":\"Box\",\"title\":\"Checkout \u0026 payment callback\",\"description\":\"Storefront to order service to payment provider, with the asynchronous webhook that confirms the charge after the shopper has already seen a spinner.\",\"code\":\"sequenceDiagram\\n participant user as \\\"Shopper\\\"\\n participant web as \\\"Storefront\\\"\\n participant orders as \\\"Order service\\\"\\n participant stock as \\\"Inventory\\\"\\n participant psp as \\\"Payment provider\\\"\\n participant mail as \\\"Email service\\\"\\n user-\u003e\u003eweb: Place order\\n web-\u003e\u003eorders: POST /orders (cart, address)\\n orders-\u003e\u003estock: Reserve items\\n stock--\u003e\u003eorders: Reservation id (holds 15 min)\\n orders-\u003e\u003eorders: Create order in state PENDING\\n orders-\u003e\u003epsp: Create payment intent\\n psp--\u003e\u003eorders: Intent id + client secret\\n orders--\u003e\u003eweb: Order id + client secret\\n web-\u003e\u003epsp: Confirm card payment\\n psp-\u003e\u003euser: 3-D Secure challenge\\n user-\u003e\u003epsp: Approve in bank app\\n psp--\u003e\u003eorders: Webhook payment_intent.succeeded\\n orders-\u003e\u003eorders: Mark order PAID\\n orders--\u003e\u003estock: Commit reservation\\n orders--\u003e\u003email: Send confirmation\\n web--\u003e\u003euser: Show order confirmation\",\"thumbCode\":\"sequenceDiagram\\n participant user as \\\"Shopper\\\"\\n participant web as \\\"Storefront\\\"\\n participant orders as \\\"Order service\\\"\\n participant stock as \\\"Inventory\\\"\\n participant psp as \\\"Payment provider\\\"\\n participant mail as \\\"Email service\\\"\\n user-\u003e\u003eweb: Place order\\n web-\u003e\u003eorders: POST /orders (cart, address)\\n orders-\u003e\u003estock: Reserve items\\n stock--\u003e\u003eorders: Reservation id (holds 15 min)\\n orders-\u003e\u003eorders: Create order in state PENDING\\n orders-\u003e\u003epsp: Create payment intent\\n psp--\u003e\u003eorders: Intent id + client secret\\n orders--\u003e\u003eweb: Order id + client secret\\n web-\u003e\u003epsp: Confirm card payment\\n psp-\u003e\u003euser: 3-D Secure challenge\\n user-\u003e\u003epsp: Approve in bank app\\n psp--\u003e\u003eorders: Webhook payment_intent.succeeded\\n orders-\u003e\u003eorders: Mark order PAID\\n orders--\u003e\u003estock: Commit reservation\\n orders--\u003e\u003email: Send confirmation\\n web--\u003e\u003euser: Show order confirmation\",\"classCount\":6,\"relationCount\":16,\"labels\":{\"useTemplate\":\"Use this template\",\"refineInChat\":\"Refine in chat\",\"copyCode\":\"Copy Mermaid\",\"copied\":\"Copied\",\"classCount\":\"participants\",\"relationCount\":\"messages\",\"enlarge\":\"Click to enlarge\",\"enlargeNote\":\"Full size â every message and response, at 1:1.\",\"close\":\"Close\"}}]\n"])</script>
1<script>self.__next_f.push([1,"1a:[\"$\",\"$L18\",\"seq-api-cache\",{\"locale\":\"en\",\"templateId\":\"seq-api-cache\",\"icon\":\"Zap\",\"title\":\"Cached API read\",\"description\":\"CDN edge, Redis and the database, showing both the hit and the miss path. Useful for explaining exactly which layer a stale response came from.\",\"code\":\"sequenceDiagram\\n participant client as \\\"Client\\\"\\n participant cdn as \\\"CDN edge\\\"\\n participant api as \\\"API server\\\"\\n participant cache as \\\"Redis\\\"\\n participant db as \\\"Database\\\"\\n client-\u003e\u003ecdn: GET /products/42\\n cdn-\u003e\u003ecdn: Check edge cache (miss)\\n cdn-\u003e\u003eapi: Forward request\\n api-\u003e\u003ecache: GET product:42\\n cache--\u003e\u003eapi: nil (cache miss)\\n api-\u003e\u003edb: SELECT product + stock\\n db--\u003e\u003eapi: Row data\\n api--\u003e\u003ecache: SETEX product:42 ttl=60s\\n api--\u003e\u003ecdn: 200 + Cache-Control: s-maxage=60\\n cdn-\u003e\u003ecdn: Store in edge cache\\n cdn--\u003e\u003eclient: 200 product JSON\\n client-\u003e\u003ecdn: GET /products/42 (again)\\n cdn--\u003e\u003eclient: 200 from edge, no origin hit\",\"thumbCode\":\"sequenceDiagram\\n participant client as \\\"Client\\\"\\n participant cdn as \\\"CDN edge\\\"\\n participant api as \\\"API server\\\"\\n participant cache as \\\"Redis\\\"\\n participant db as \\\"Database\\\"\\n client-\u003e\u003ecdn: GET /products/42\\n cdn-\u003e\u003ecdn: Check edge cache (miss)\\n cdn-\u003e\u003eapi: Forward request\\n api-\u003e\u003ecache: GET product:42\\n cache--\u003e\u003eapi: nil (cache miss)\\n api-\u003e\u003edb: SELECT product + stock\\n db--\u003e\u003eapi: Row data\\n api--\u003e\u003ecache: SETEX product:42 ttl=60s\\n api--\u003e\u003ecdn: 200 + Cache-Control: s-maxage=60\\n cdn-\u003e\u003ecdn: Store in edge cache\\n cdn--\u003e\u003eclient: 200 product JSON\\n client-\u003e\u003ecdn: GET /products/42 (again)\\n cdn--\u003e\u003eclient: 200 from edge, no origin hit\",\"classCount\":5,\"relationCount\":13,\"labels\":{\"useTemplate\":\"Use this template\",\"refineInChat\":\"Refine in chat\",\"copyCode\":\"Copy Mermaid\",\"copied\":\"Copied\",\"classCount\":\"participants\",\"relationCount\":\"messages\",\"enlarge\":\"Click to enlarge\",\"enlargeNote\":\"Full size â every message and response, at 1:1.\",\"close\":\"Close\"}}]\n"])</script>
1<script>self.__next_f.push([1,"1b:[\"$\",\"$L18\",\"seq-password-reset\",{\"locale\":\"en\",\"templateId\":\"seq-password-reset\",\"icon\":\"Mail\",\"title\":\"Password reset\",\"description\":\"Request, single-use token, email delivery, and the token check on redemption. Draw it once and the security review gets shorter.\",\"code\":\"sequenceDiagram\\n participant user as \\\"User\\\"\\n participant web as \\\"Web app\\\"\\n participant api as \\\"Auth API\\\"\\n participant db as \\\"Database\\\"\\n participant mail as \\\"Email service\\\"\\n user-\u003e\u003eweb: Click 'Forgot password'\\n user-\u003e\u003eweb: Enter email address\\n web-\u003e\u003eapi: POST /password/forgot\\n api-\u003e\u003edb: Find user by email\\n db--\u003e\u003eapi: User row or nothing\\n api-\u003e\u003edb: Store single-use token (1h TTL)\\n api--\u003e\u003email: Send reset link\\n api--\u003e\u003eweb: 202 (same reply whether or not the email exists)\\n mail--\u003e\u003euser: Reset email\\n user-\u003e\u003eweb: Open link, enter new password\\n web-\u003e\u003eapi: POST /password/reset (token, password)\\n api-\u003e\u003edb: Validate token, check not used or expired\\n api-\u003e\u003edb: Store password hash, burn token\\n api-\u003e\u003edb: Revoke all existing sessions\\n api--\u003e\u003email: Send 'password changed' notice\\n api--\u003e\u003eweb: 200 â ask user to sign in\",\"thumbCode\":\"sequenceDiagram\\n participant user as \\\"User\\\"\\n participant web as \\\"Web app\\\"\\n participant api as \\\"Auth API\\\"\\n participant db as \\\"Database\\\"\\n participant mail as \\\"Email service\\\"\\n user-\u003e\u003eweb: Click 'Forgot password'\\n user-\u003e\u003eweb: Enter email address\\n web-\u003e\u003eapi: POST /password/forgot\\n api-\u003e\u003edb: Find user by email\\n db--\u003e\u003eapi: User row or nothing\\n api-\u003e\u003edb: Store single-use token (1h TTL)\\n api--\u003e\u003email: Send reset link\\n api--\u003e\u003eweb: 202 (same reply whether or not the email exists)\\n mail--\u003e\u003euser: Reset email\\n user-\u003e\u003eweb: Open link, enter new password\\n web-\u003e\u003eapi: POST /password/reset (token, password)\\n api-\u003e\u003edb: Validate token, check not used or expired\\n api-\u003e\u003edb: Store password hash, burn token\\n api-\u003e\u003edb: Revoke all existing sessions\\n api--\u003e\u003email: Send 'password changed' notice\\n api--\u003e\u003eweb: 200 â ask user to sign in\",\"classCount\":5,\"relationCount\":16,\"labels\":{\"useTemplate\":\"Use this template\",\"refineInChat\":\"Refine in chat\",\"copyCode\":\"Copy Mermaid\",\"copied\":\"Copied\",\"classCount\":\"participants\",\"relationCount\":\"messages\",\"enlarge\":\"Click to enlarge\",\"enlargeNote\":\"Full size â every message and response, at 1:1.\",\"close\":\"Close\"}}]\n"])</script>
1<script>self.__next_f.push([1,"1c:[\"$\",\"$L18\",\"seq-fulfillment\",{\"locale\":\"en\",\"templateId\":\"seq-fulfillment\",\"icon\":\"Workflow\",\"title\":\"Order fulfillment across services\",\"description\":\"Event bus in the middle, warehouse and shipping reacting, customer notified last. The shape of a choreographed flow rather than an orchestrated one.\",\"code\":\"sequenceDiagram\\n participant orders as \\\"Order service\\\"\\n participant bus as \\\"Event bus\\\"\\n participant warehouse as \\\"Warehouse\\\"\\n participant shipping as \\\"Shipping\\\"\\n participant notify as \\\"Notification service\\\"\\n participant customer as \\\"Customer\\\"\\n orders--\u003e\u003ebus: Publish OrderPaid\\n bus--\u003e\u003ewarehouse: Deliver OrderPaid\\n warehouse-\u003e\u003ewarehouse: Create pick list\\n warehouse--\u003e\u003ebus: Publish ItemsPicked\\n bus--\u003e\u003eshipping: Deliver ItemsPicked\\n shipping-\u003e\u003eshipping: Buy label from carrier\\n shipping--\u003e\u003ebus: Publish ShipmentCreated (tracking no.)\\n bus--\u003e\u003eorders: Deliver ShipmentCreated\\n orders-\u003e\u003eorders: Move order to SHIPPED\\n bus--\u003e\u003enotify: Deliver ShipmentCreated\\n notify--\u003e\u003ecustomer: Email tracking number\\n shipping--\u003e\u003ebus: Publish DeliveryConfirmed\\n bus--\u003e\u003eorders: Deliver DeliveryConfirmed\\n orders-\u003e\u003eorders: Close order\",\"thumbCode\":\"sequenceDiagram\\n participant orders as \\\"Order service\\\"\\n participant bus as \\\"Event bus\\\"\\n participant warehouse as \\\"Warehouse\\\"\\n participant shipping as \\\"Shipping\\\"\\n participant notify as \\\"Notification service\\\"\\n participant customer as \\\"Customer\\\"\\n orders--\u003e\u003ebus: Publish OrderPaid\\n bus--\u003e\u003ewarehouse: Deliver OrderPaid\\n warehouse-\u003e\u003ewarehouse: Create pick list\\n warehouse--\u003e\u003ebus: Publish ItemsPicked\\n bus--\u003e\u003eshipping: Deliver ItemsPicked\\n shipping-\u003e\u003eshipping: Buy label from carrier\\n shipping--\u003e\u003ebus: Publish ShipmentCreated (tracking no.)\\n bus--\u003e\u003eorders: Deliver ShipmentCreated\\n orders-\u003e\u003eorders: Move order to SHIPPED\\n bus--\u003e\u003enotify: Deliver ShipmentCreated\\n notify--\u003e\u003ecustomer: Email tracking number\\n shipping--\u003e\u003ebus: Publish DeliveryConfirmed\\n bus--\u003e\u003eorders: Deliver DeliveryConfirmed\\n orders-\u003e\u003eorders: Close order\",\"classCount\":6,\"relationCount\":14,\"labels\":{\"useTemplate\":\"Use this template\",\"refineInChat\":\"Refine in chat\",\"copyCode\":\"Copy Mermaid\",\"copied\":\"Copied\",\"classCount\":\"participants\",\"relationCount\":\"messages\",\"enlarge\":\"Click to enlarge\",\"enlargeNote\":\"Full size â every message and response, at 1:1.\",\"close\":\"Close\"}}]\n"])</script>
1<script>self.__next_f.push([1,"1d:[\"$\",\"$L18\",\"seq-file-upload\",{\"locale\":\"en\",\"templateId\":\"seq-file-upload\",\"icon\":\"FileText\",\"title\":\"Direct file upload\",\"description\":\"Pre-signed URL, browser uploads straight to object storage, worker picks it up afterwards. The picture that explains why the file never touches your API.\",\"code\":\"sequenceDiagram\\n participant user as \\\"User\\\"\\n participant web as \\\"Web app\\\"\\n participant api as \\\"API server\\\"\\n participant store as \\\"Object storage\\\"\\n participant worker as \\\"Processing worker\\\"\\n user-\u003e\u003eweb: Pick a file\\n web-\u003e\u003eapi: POST /uploads (name, size, type)\\n api-\u003e\u003eapi: Check quota and file type\\n api-\u003e\u003estore: Create presigned PUT URL\\n store--\u003e\u003eapi: Presigned URL (15 min)\\n api--\u003e\u003eweb: Upload URL + upload id\\n web-\u003e\u003estore: PUT file bytes (browser to storage)\\n store--\u003e\u003eweb: 200 ETag\\n web-\u003e\u003eapi: POST /uploads/:id/complete\\n api-\u003e\u003estore: HEAD object â confirm size matches\\n api--\u003e\u003eworker: Enqueue processing job\\n api--\u003e\u003eweb: 201 upload record (state PROCESSING)\\n worker-\u003e\u003estore: Read original\\n worker-\u003e\u003estore: Write thumbnail + scanned copy\\n worker--\u003e\u003eapi: Mark upload READY\\n api--\u003e\u003eweb: Push 'ready' over websocket\",\"thumbCode\":\"sequenceDiagram\\n participant user as \\\"User\\\"\\n participant web as \\\"Web app\\\"\\n participant api as \\\"API server\\\"\\n participant store as \\\"Object storage\\\"\\n participant worker as \\\"Processing worker\\\"\\n user-\u003e\u003eweb: Pick a file\\n web-\u003e\u003eapi: POST /uploads (name, size, type)\\n api-\u003e\u003eapi: Check quota and file type\\n api-\u003e\u003estore: Create presigned PUT URL\\n store--\u003e\u003eapi: Presigned URL (15 min)\\n api--\u003e\u003eweb: Upload URL + upload id\\n web-\u003e\u003estore: PUT file bytes (browser to storage)\\n store--\u003e\u003eweb: 200 ETag\\n web-\u003e\u003eapi: POST /uploads/:id/complete\\n api-\u003e\u003estore: HEAD object â confirm size matches\\n api--\u003e\u003eworker: Enqueue processing job\\n api--\u003e\u003eweb: 201 upload record (state PROCESSING)\\n worker-\u003e\u003estore: Read original\\n worker-\u003e\u003estore: Write thumbnail + scanned copy\\n worker--\u003e\u003eapi: Mark upload READY\\n api--\u003e\u003eweb: Push 'ready' over websocket\",\"classCount\":5,\"relationCount\":16,\"labels\":{\"useTemplate\":\"Use this template\",\"refineInChat\":\"Refine in chat\",\"copyCode\":\"Copy Mermaid\",\"copied\":\"Copied\",\"classCount\":\"participants\",\"relationCount\":\"messages\",\"enlarge\":\"Click to enlarge\",\"enlargeNote\":\"Full size â every message and response, at 1:1.\",\"close\":\"Close\"}}]\n"])</script>
1<script>self.__next_f.push([1,"1e:[\"$\",\"$L18\",\"seq-webhook-retry\",{\"locale\":\"en\",\"templateId\":\"seq-webhook-retry\",\"icon\":\"Send\",\"title\":\"Webhook delivery \u0026 retry\",\"description\":\"Queue, delivery attempt, non-2xx, backoff, and the point where a failing endpoint gets disabled and a human is told. Support asks about this flow constantly.\",\"code\":\"sequenceDiagram\\n participant app as \\\"Your platform\\\"\\n participant queue as \\\"Delivery queue\\\"\\n participant sender as \\\"Webhook sender\\\"\\n participant endpoint as \\\"Customer endpoint\\\"\\n participant ops as \\\"Customer ops\\\"\\n app--\u003e\u003equeue: Enqueue invoice.paid event\\n queue--\u003e\u003esender: Deliver attempt 1\\n sender-\u003e\u003eendpoint: POST /hooks with HMAC signature\\n endpoint--\u003e\u003esender: 500 Internal Server Error\\n sender--\u003e\u003equeue: Schedule retry in 1 min\\n queue--\u003e\u003esender: Deliver attempt 2\\n sender-\u003e\u003eendpoint: POST /hooks (same event id)\\n endpoint--\u003e\u003esender: Timeout after 10s\\n sender--\u003e\u003equeue: Schedule retry in 5 min\\n queue--\u003e\u003esender: Deliver attempt 3\\n sender-\u003e\u003eendpoint: POST /hooks (same event id)\\n endpoint-\u003e\u003eendpoint: Recognise event id, skip duplicate work\\n endpoint--\u003e\u003esender: 200 OK\\n sender--\u003e\u003eapp: Mark delivery succeeded\\n sender--\u003e\u003eops: If all attempts fail: alert \u0026 disable endpoint\",\"thumbCode\":\"sequenceDiagram\\n participant app as \\\"Your platform\\\"\\n participant queue as \\\"Delivery queue\\\"\\n participant sender as \\\"Webhook sender\\\"\\n participant endpoint as \\\"Customer endpoint\\\"\\n participant ops as \\\"Customer ops\\\"\\n app--\u003e\u003equeue: Enqueue invoice.paid event\\n queue--\u003e\u003esender: Deliver attempt 1\\n sender-\u003e\u003eendpoint: POST /hooks with HMAC signature\\n endpoint--\u003e\u003esender: 500 Internal Server Error\\n sender--\u003e\u003equeue: Schedule retry in 1 min\\n queue--\u003e\u003esender: Deliver attempt 2\\n sender-\u003e\u003eendpoint: POST /hooks (same event id)\\n endpoint--\u003e\u003esender: Timeout after 10s\\n sender--\u003e\u003equeue: Schedule retry in 5 min\\n queue--\u003e\u003esender: Deliver attempt 3\\n sender-\u003e\u003eendpoint: POST /hooks (same event id)\\n endpoint-\u003e\u003eendpoint: Recognise event id, skip duplicate work\\n endpoint--\u003e\u003esender: 200 OK\\n sender--\u003e\u003eapp: Mark delivery succeeded\\n sender--\u003e\u003eops: If all attempts fail: alert \u0026 disable endpoint\",\"classCount\":5,\"relationCount\":15,\"labels\":{\"useTemplate\":\"Use this template\",\"refineInChat\":\"Refine in chat\",\"copyCode\":\"Copy Mermaid\",\"copied\":\"Copied\",\"classCount\":\"participants\",\"relationCount\":\"messages\",\"enlarge\":\"Click to enlarge\",\"enlargeNote\":\"Full size â every message and response, at 1:1.\",\"close\":\"Close\"}}]\n"])</script>
1<script>self.__next_f.push([1,"1f:[\"$\",\"$L18\",\"seq-chat-message\",{\"locale\":\"en\",\"templateId\":\"seq-chat-message\",\"icon\":\"MessagesSquare\",\"title\":\"Chat message delivery\",\"description\":\"Websocket gateway, persistence, fan-out and a push notification for the recipient who is offline. Two clients on one diagram, which is where sequence diagrams earn their keep.\",\"code\":\"sequenceDiagram\\n participant alice as \\\"Alice\\\"\\n participant clientA as \\\"Alice's app\\\"\\n participant gateway as \\\"Websocket gateway\\\"\\n participant chat as \\\"Chat service\\\"\\n participant push as \\\"Push service\\\"\\n participant clientB as \\\"Bob's app\\\"\\n alice-\u003e\u003eclientA: Type and hit send\\n clientA-\u003e\u003eclientA: Render optimistically as 'sending'\\n clientA-\u003e\u003egateway: send(message, client_msg_id)\\n gateway-\u003e\u003echat: Persist message\\n chat--\u003e\u003egateway: server_msg_id + timestamp\\n gateway--\u003e\u003eclientA: ack(client_msg_id, server_msg_id)\\n clientA-\u003e\u003eclientA: Swap 'sending' for 'sent'\\n chat--\u003e\u003egateway: Fan out to room members\\n gateway--\u003e\u003eclientB: new_message event\\n chat--\u003e\u003epush: Bob offline: send push\\n push--\u003e\u003eclientB: Push notification\\n clientB-\u003e\u003egateway: read_receipt(server_msg_id)\\n gateway--\u003e\u003echat: Store read receipt\\n chat--\u003e\u003eclientA: Mark as read\",\"thumbCode\":\"sequenceDiagram\\n participant alice as \\\"Alice\\\"\\n participant clientA as \\\"Alice's app\\\"\\n participant gateway as \\\"Websocket gateway\\\"\\n participant chat as \\\"Chat service\\\"\\n participant push as \\\"Push service\\\"\\n participant clientB as \\\"Bob's app\\\"\\n alice-\u003e\u003eclientA: Type and hit send\\n clientA-\u003e\u003eclientA: Render optimistically as 'sending'\\n clientA-\u003e\u003egateway: send(message, client_msg_id)\\n gateway-\u003e\u003echat: Persist message\\n chat--\u003e\u003egateway: server_msg_id + timestamp\\n gateway--\u003e\u003eclientA: ack(client_msg_id, server_msg_id)\\n clientA-\u003e\u003eclientA: Swap 'sending' for 'sent'\\n chat--\u003e\u003egateway: Fan out to room members\\n gateway--\u003e\u003eclientB: new_message event\\n chat--\u003e\u003epush: Bob offline: send push\\n push--\u003e\u003eclientB: Push notification\\n clientB-\u003e\u003egateway: read_receipt(server_msg_id)\\n gateway--\u003e\u003echat: Store read receipt\\n chat--\u003e\u003eclientA: Mark as read\",\"classCount\":6,\"relationCount\":14,\"labels\":{\"useTemplate\":\"Use this template\",\"refineInChat\":\"Refine in chat\",\"copyCode\":\"Copy Mermaid\",\"copied\":\"Copied\",\"classCount\":\"participants\",\"relationCount\":\"messages\",\"enlarge\":\"Click to enlarge\",\"enlargeNote\":\"Full size â every message and response, at 1:1.\",\"close\":\"Close\"}}]\n"])</script>
1<script>self.__next_f.push([1,"20:[\"$\",\"section\",null,{\"className\":\"border-t border-zinc-200 bg-zinc-50 py-14 dark:border-zinc-800 dark:bg-zinc-900/40\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-[clamp(320px,88vw,1024px)] mx-auto px-4\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-2xl sm:text-3xl font-bold tracking-tight text-zinc-900 dark:text-white\",\"children\":\"How to use these templates\"}],[\"$\",\"div\",null,{\"className\":\"mt-8 grid gap-6 sm:grid-cols-2\",\"children\":[[\"$\",\"div\",\"1. Take the flow with the most participants\",{\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"1. Take the flow with the most participants\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"Counter-intuitive, but it works: pick the template with more services than you need. Deleting a column you can see is a two-second decision; noticing a hop you forgot to draw usually happens during the incident it caused.\"}]]}],[\"$\",\"div\",\"2. Open it â the whole interaction is already drawn\",{\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"2. Open it â the whole interaction is already drawn\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"The diagram is on the canvas the moment the page loads, with participants in the order they first appear, responses drawn as dashed lines, and the asynchronous hops marked as such.\"}]]}],[\"$\",\"div\",\"3. Talk it into your system\",{\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"3. Talk it into your system\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"Open the chat panel and correct it in sentences: \\\"put a queue between the API and the worker, add a retry after the timeout, rename Payment provider to Stripe, drop the email service.\\\" The assistant edits the same structured diagram you are looking at, so each turn returns a redrawn version rather than a fresh guess.\"}]]}],[\"$\",\"div\",\"4. Hand-edit and export\",{\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"4. Hand-edit and export\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"The split view puts the Mermaid source next to the preview for the last few touches. Then SVG for docs that get zoomed, PNG for slides and tickets, or the raw source committed next to the code it describes.\"}]]}]]}]]}]}]\n"])</script>
1<script>self.__next_f.push([1,"21:[\"$\",\"section\",null,{\"className\":\"max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 py-14\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-2xl sm:text-3xl font-bold tracking-tight text-zinc-900 dark:text-white\",\"children\":\"What is a sequence diagram?\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 space-y-4 max-w-3xl\",\"children\":[[\"$\",\"p\",\"A UML sequence diagram s\",{\"className\":\"text-sm sm:text-base leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"A UML sequence diagram shows an interaction over time: which participant sends which message to which other participant, and in what order. Each participant gets a vertical lifeline, time runs down the page, and every arrow is one message. It answers \\\"who calls whom, and what comes back\\\" â not \\\"what is this system made of\\\", which is a class diagram, and not \\\"what happens next\\\", which is a flowchart.\"}],[\"$\",\"p\",\"It is the diagram that s\",{\"className\":\"text-sm sm:text-base leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"It is the diagram that settles arguments about distributed systems. Once the hops are drawn in order, the questions answer themselves: where the latency is, what happens if the third call fails, whether that callback can arrive before the response it depends on. Most of the value shows up while you are drawing it, not after.\"}],[\"$\",\"p\",\"Mermaid's sequenceDiagra\",{\"className\":\"text-sm sm:text-base leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"Mermaid's sequenceDiagram syntax covers what engineering docs need: participants with readable labels, solid request arrows, dashed responses and self-calls. It stops short of full UML â no combined fragments with formal guards. In practice a note or a second diagram for the failure path reads better than nested frames anyway.\"}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"22:[\"$\",\"section\",null,{\"className\":\"border-t border-zinc-200 bg-zinc-50 py-14 dark:border-zinc-800 dark:bg-zinc-900/40\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-[clamp(320px,88vw,1024px)] mx-auto px-4\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-2xl sm:text-3xl font-bold tracking-tight text-zinc-900 dark:text-white\",\"children\":\"Sequence diagram syntax reference\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 max-w-3xl text-sm sm:text-base leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"Six things carry almost all the meaning in a sequence diagram. The one people get wrong is the dashed arrow: leave the responses out and the diagram becomes a call graph with no sense of time.\"}],[\"$\",\"div\",null,{\"className\":\"mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"div\",\"participant\",{\"className\":\"rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"Participant\"}],[\"$\",\"code\",null,{\"className\":\"rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-xs text-violet-700 dark:bg-zinc-800 dark:text-violet-300\",\"children\":\"participant id as Label\"}]]}],[\"$\",\"div\",null,{\"className\":\"mt-3\",\"children\":[\"$\",\"$L3c\",null,{\"code\":\"sequenceDiagram\\n participant app as Web app\\n participant api as API server\\n app-\u003e\u003eapi: GET /orders\",\"label\":\"Participant\",\"heightClass\":\"h-32\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"Each column is a participant: a user, a service, a queue, a database. The short id is what arrows refer to; the label is what readers see, so it can contain spaces.\"}]]}],[\"$\",\"div\",\"order\",{\"className\":\"rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"Time flows down\"}],[\"$\",\"code\",null,{\"className\":\"rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-xs text-violet-700 dark:bg-zinc-800 dark:text-violet-300\",\"children\":\"top â bottom\"}]]}],[\"$\",\"div\",null,{\"className\":\"mt-3\",\"children\":[\"$\",\"$L3c\",null,{\"code\":\"sequenceDiagram\\n participant a as Client\\n participant b as API\\n participant c as Database\\n a-\u003e\u003eb: POST /orders\\n b-\u003e\u003ec: INSERT order\\n c--\u003e\u003eb: order id\\n b--\u003e\u003ea: 201 Created\",\"label\":\"Time flows down\",\"heightClass\":\"h-32\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"There is no arrow numbering â order on the page is order in time. Declaration order sets the left-to-right layout, so declare participants roughly in the order they first appear and the arrows stop crossing.\"}]]}],[\"$\",\"div\",\"request\",{\"className\":\"rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"Request\"}],[\"$\",\"code\",null,{\"className\":\"rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-xs text-violet-700 dark:bg-zinc-800 dark:text-violet-300\",\"children\":\"-\u003e\u003e\"}]]}],[\"$\",\"div\",null,{\"className\":\"mt-3\",\"children\":[\"$\",\"$L3c\",null,{\"code\":\"sequenceDiagram\\n participant api as API\\n participant db as Database\\n api-\u003e\u003edb: SELECT * FROM users\",\"label\":\"Request\",\"heightClass\":\"h-32\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"A solid line with a filled arrowhead: one participant calls another and waits. Most arrows in an API diagram are this one.\"}]]}],\"$L3d\",\"$L3e\",\"$L3f\"]}]]}]}]\n"])</script>
1<script>self.__next_f.push([1,"23:[\"$\",\"section\",null,{\"className\":\"max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 py-14\",\"children\":[\"$\",\"div\",null,{\"className\":\"rounded-2xl bg-gradient-to-br from-violet-600 to-indigo-600 px-6 py-10 text-center sm:px-10\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-2xl sm:text-3xl font-bold tracking-tight text-white\",\"children\":\"Nothing close enough?\"}],[\"$\",\"p\",null,{\"className\":\"mx-auto mt-3 max-w-2xl text-sm sm:text-base leading-relaxed text-violet-100\",\"children\":\"Describe the interaction in a sentence or two and let the generator draw the first version â then refine it exactly the same way.\"}],[\"$\",\"$L17\",null,{\"href\":\"/\",\"className\":\"mt-6 inline-block rounded-xl bg-white px-5 py-2.5 text-sm font-medium text-violet-700 transition-colors hover:bg-violet-50\",\"children\":\"Open the generator\"}]]}]}]\n"])</script>
1<script>self.__next_f.push([1,"24:[\"$\",\"section\",null,{\"className\":\"max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 pb-14\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-2xl sm:text-3xl font-bold tracking-tight text-zinc-900 dark:text-white\",\"children\":\"Frequently asked questions\"}],[\"$\",\"div\",null,{\"className\":\"mt-6 divide-y divide-zinc-200 dark:divide-zinc-800\",\"children\":[[\"$\",\"details\",\"How do I change a template after importing it?\",{\"className\":\"group py-4\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none text-base font-medium text-zinc-900 marker:hidden dark:text-white\",\"children\":\"How do I change a template after importing it?\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"Two ways, suited to different edits. Chat is for structural changes described in words â \\\"add a queue between the API and the worker\\\", \\\"drop the email service\\\", \\\"move the token exchange to the backend\\\" â and returns a redrawn diagram each turn. The split-view editor is for surgical ones: fix a typo in a message, rename a participant, reorder two calls. Most people import, talk the shape into place, then polish in the editor.\"}]]}],[\"$\",\"details\",\"Does the assistant actually understand the imported diagram?\",{\"className\":\"group py-4\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none text-base font-medium text-zinc-900 marker:hidden dark:text-white\",\"children\":\"Does the assistant actually understand the imported diagram?\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"Yes, because the template is structured data rather than a picture or a blob of text. The imported participants and messages become the conversation's working state, so \\\"delete the email service\\\" removes that exact column and the messages attached to it â the assistant is not re-guessing your diagram from a description of it.\"}]]}],[\"$\",\"details\",\"What is the difference between a solid and a dashed arrow?\",{\"className\":\"group py-4\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none text-base font-medium text-zinc-900 marker:hidden dark:text-white\",\"children\":\"What is the difference between a solid and a dashed arrow?\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"Solid (-\u003e\u003e) is a request: one participant calls another. Dashed (--\u003e\u003e) is what comes back â a return value, a callback, an event. The convention matters because a diagram of solid arrows only shows who calls whom; adding the dashed replies is what turns it into a timeline you can reason about.\"}]]}],[\"$\",\"details\",\"How do I show something asynchronous?\",{\"className\":\"group py-4\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none text-base font-medium text-zinc-900 marker:hidden dark:text-white\",\"children\":\"How do I show something asynchronous?\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"Draw the reply as a dashed arrow that arrives later than the request it answers, with everything that happened in between still visible. The webhook and fulfillment templates both do this: the response to the shopper goes out before the payment confirmation arrives, which is exactly the property w
1orth documenting.\"}]]}],[\"$\",\"details\",\"What is the difference between a sequence diagram and a flowchart?\",{\"className\":\"group py-4\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none text-base font-medium text-zinc-900 marker:hidden dark:text-white\",\"children\":\"What is the difference between a sequence diagram and a flowchart?\"}],\"$L40\"]}],\"$L41\",\"$L42\"]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"25:[\"$\",\"section\",null,{\"className\":\"max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 pb-16\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-lg font-semibold text-zinc-900 dark:text-white\",\"children\":\"Related\"}],[\"$\",\"div\",null,{\"className\":\"mt-4 grid gap-4 sm:grid-cols-2\",\"children\":[[\"$\",\"$L17\",\"sequence-diagram-from-text\",{\"href\":\"/sequence-diagram-from-text\",\"className\":\"rounded-xl border border-zinc-200 p-4 transition hover:border-violet-300 hover:shadow-sm dark:border-zinc-800 dark:hover:border-violet-700\",\"children\":[[\"$\",\"span\",null,{\"className\":\"block text-sm font-medium text-zinc-900 dark:text-white\",\"children\":\"AI sequence diagram generator\"}],[\"$\",\"span\",null,{\"className\":\"mt-1 block text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Start from prose instead of a template: describe the interaction, get Mermaid.\"}]]}],[\"$\",\"$L17\",\"uml-diagram-from-text\",{\"href\":\"/uml-diagram-from-text\",\"className\":\"rounded-xl border border-zinc-200 p-4 transition hover:border-violet-300 hover:shadow-sm dark:border-zinc-800 dark:hover:border-violet-700\",\"children\":[[\"$\",\"span\",null,{\"className\":\"block text-sm font-medium text-zinc-900 dark:text-white\",\"children\":\"UML diagrams from text\"}],[\"$\",\"span\",null,{\"className\":\"mt-1 block text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Class, sequence and state diagrams â the whole UML family in one place.\"}]]}],[\"$\",\"$L17\",\"flowchart-template\",{\"href\":\"/flowchart-template\",\"className\":\"rounded-xl border border-zinc-200 p-4 transition hover:border-violet-300 hover:shadow-sm dark:border-zinc-800 dark:hover:border-violet-700\",\"children\":[[\"$\",\"span\",null,{\"className\":\"block text-sm font-medium text-zinc-900 dark:text-white\",\"children\":\"Flowchart templates\"}],[\"$\",\"span\",null,{\"className\":\"mt-1 block text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"For when the order of steps matters more than who performs them.\"}]]}],[\"$\",\"$L17\",\"class-diagram-template\",{\"href\":\"/class-diagram-template\",\"className\":\"rounded-xl border border-zinc-200 p-4 transition hover:border-violet-300 hover:shadow-sm dark:border-zinc-800 dark:hover:border-violet-700\",\"children\":[[\"$\",\"span\",null,{\"className\":\"block text-sm font-medium text-zinc-900 dark:text-white\",\"children\":\"Class diagram templates\"}],[\"$\",\"span\",null,{\"className\":\"mt-1 block text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"The structural companion: eight ready-made UML class diagrams.\"}]]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"26:[\"$\",\"li\",\"erd-from-text\",{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/erd-from-text\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"ERD\"}]}]\n27:[\"$\",\"li\",\"state-diagram-from-text\",{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/state-diagram-from-text\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"State Diagram\"}]}]\n28:[\"$\",\"li\",\"class-diagram-from-text\",{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/class-diagram-from-text\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"UML Class Diagram\"}]}]\n29:[\"$\",\"li\",\"mindmap-from-text\",{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/mindmap-from-text\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Text to Mind Map\"}]}]\n2a:[\"$\",\"li\",\"gantt-from-text\",{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/gantt-from-text\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Gantt Chart\"}]}]\n2b:[\"$\",\"li\",\"chat-to-diagram\",{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/chat-to-diagram\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Chat to Diagram\"}]}]\n2c:[\"$\",\"li\",\"architecture-diagram-from-text\",{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/architecture-diagram-from-text\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Architecture Diagram\"}]}]\n2d:[\"$\",\"li\",\"uml-diagram-from-text\",{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/uml-diagram-from-text\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"UML Diagram\"}]}]\n2e:[\"$\",\"li\",\"ai-diagram-from-text\",{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/ai-diagram-from-text\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Diagram\"}]}]\n2f:[\"$\",\"li\",\"ai-diagram-from-code\",{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/ai-diagram-from-code\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Diagram from Code\"}]}]\n30:[\"$\",\"li\",\"ai-diagram-from-json\",{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/ai-diagram-from-json\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Diagram from JSON\"}]}]\n31:[\"$\",\"li\",\"chatgpt-mermaid-fixer\",{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/chatgpt-mermaid-fixer\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"ChatGPT Mermaid Fixer\"}]}]\n32:[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-xs font-semibold text-zinc-900 dark:text-white uppercase tracking-wide mb-3\",\"children\":\"Legal\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-2 text-sm text-zinc-600 dark:text-zinc-400\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/privacy\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Privacy\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/terms\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Terms\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L17\",null,{\"href\":\"/contact\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Contact\"}]}]]}]]}]\n33:[\"$\",\"div\",null,{\"className\":\"border-t border-zinc-200 dark:border-zinc-800\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 py-4 text-xs text-zinc-500 dark:text-zinc-500 text-center\",\"children\":\"© 2026 VizText. All rights reserved.\"}]}]\n"])</script>
1<script>self.__next_f.push([1,"3d:[\"$\",\"div\",\"reply\",{\"className\":\"rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"Response\"}],[\"$\",\"code\",null,{\"className\":\"rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-xs text-violet-700 dark:bg-zinc-800 dark:text-violet-300\",\"children\":\"--\u003e\u003e\"}]]}],[\"$\",\"div\",null,{\"className\":\"mt-3\",\"children\":[\"$\",\"$L3c\",null,{\"code\":\"sequenceDiagram\\n participant api as API\\n participant db as Database\\n api-\u003e\u003edb: SELECT * FROM users\\n db--\u003e\u003eapi: 42 rows\",\"label\":\"Response\",\"heightClass\":\"h-32\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"A dashed line back to the caller. Use it for returns, callbacks and events â anything that is not a fresh request. Drawing the response is what turns a call graph into a timeline.\"}]]}]\n3e:[\"$\",\"div\",\"self\",{\"className\":\"rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"Self-call\"}],[\"$\",\"code\",null,{\"className\":\"rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-xs text-violet-700 dark:bg-zinc-800 dark:text-violet-300\",\"children\":\"api-\u003e\u003eapi\"}]]}],[\"$\",\"div\",null,{\"className\":\"mt-3\",\"children\":[\"$\",\"$L3c\",null,{\"code\":\"sequenceDiagram\\n participant api as API server\\n api-\u003e\u003eapi: Validate payload\",\"label\":\"Self-call\",\"heightClass\":\"h-32\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"A participant messaging itself, drawn as a loop back into its own lifeline. Good for validation, retries and internal work that would otherwise be invisible.\"}]]}]\n3f:[\"$\",\"div\",\"text\",{\"className\":\"rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"Message text\"}],[\"$\",\"code\",null,{\"className\":\"rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-xs text-violet-700 dark:bg-zinc-800 dark:text-violet-300\",\"children\":\": text\"}]]}],[\"$\",\"div\",null,{\"className\":\"mt-3\",\"children\":[\"$\",\"$L3c\",null,{\"code\":\"sequenceDiagram\\n participant app as Web app\\n participant api as API\\n app-\u003e\u003eapi: POST /login (email, password)\\n api--\u003e\u003eapp: 401 invalid credentials\",\"label\":\"Message text\",\"heightClass\":\"h-32\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"Everything after the colon rides on the arrow. Be specific â \\\"POST /login (email, password)\\\" documents an interface; \\\"login\\\" documents nothing.\"}]]}]\n40:[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"A sequence diagram is organised by participant: the columns are services or people, and the arrows between them are messages. A flowchart is organised by step: the boxes are actions, and there is no notion of who performs them. If your question is \\\"which service calls which, and in what order\\\", draw a sequence diagram.\"}]\n41:[\"$\",\"details\",\"How many participants can one diagram hold?\",{\"className\":\"group py-4\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none text-base font-medium text-zinc-900 marker:hidden dark:text-white\",\"children\":\"How many participants can one diagram hold?\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"Readability, not the tool, is the limit. Past six or seven columns the arrows start crossing and the diagram gets wide enough to need horizontal scrolling. Split by phase â authentication in one diagram, fulfillment in another â rather than drawing the whole request lifecycle at once. The templates here sit "])</script>
1<script>self.__next_f.push([1,"deliberately at five or six.\"}]]}]\n42:[\"$\",\"details\",\"What export formats are supported?\",{\"className\":\"group py-4\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none text-base font-medium text-zinc-900 marker:hidden dark:text-white\",\"children\":\"What export formats are supported?\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"SVG, PNG, and the raw Mermaid source. SVG stays sharp at any zoom, which matters for wide diagrams; PNG pastes cleanly into slide decks and issue trackers; and the Mermaid source can be committed alongside your code so the diagram is reviewed like everything else.\"}]]}]\n"])</script>
1<script>self.__next_f.push([1,"39:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script>
1<script>self.__next_f.push([1,"43:I[11206,[\"/_next/static/chunks/3u2c5pk4fxsmt.js\",\"/_next/static/chunks/3t6e4rue2il0k.js\"],\"IconMark\"]\n36:null\n"])</script>
1<script>self.__next_f.push([1,"3b:[[\"$\",\"title\",\"0\",{\"children\":\"Sequence Diagram Templates â Import \u0026 Edit by Chat | VizText\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Eight ready-made UML sequence diagram templates: OAuth sign-in, checkout callbacks, cached reads, webhook retries and more. Open one on the canvas in a click, then reshape it by chatting. Export SVG, PNG or Mermaid.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"canonical\",\"href\":\"https://viztext.com/sequence-diagram-template\"}],[\"$\",\"link\",\"3\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://viztext.com/sequence-diagram-template\"}],[\"$\",\"link\",\"4\",{\"rel\":\"alternate\",\"hrefLang\":\"zh\",\"href\":\"https://viztext.com/zh/sequence-diagram-template\"}],[\"$\",\"link\",\"5\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://viztext.com/sequence-diagram-template\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:title\",\"content\":\"Sequence Diagram Templates â Import \u0026 Edit by Chat | VizText\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:description\",\"content\":\"Eight ready-made UML sequence diagram templates: OAuth sign-in, checkout callbacks, cached reads, webhook retries and more. Open one on the canvas in a click, then reshape it by chatting. Export SVG, PNG or Mermaid.\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:url\",\"content\":\"https://viztext.com/sequence-diagram-template\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:locale:alternate\",\"content\":\"zh_CN\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:title\",\"content\":\"Sequence Diagram Templates â Import \u0026 Edit by Chat | VizText\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:description\",\"content\":\"Eight ready-made UML sequence diagram templates: OAuth sign-in, checkout callbacks, cached reads, webhook retries and more. Open one on the canvas in a click, then reshape it by chatting. Export SVG, PNG or Mermaid.\"}],[\"$\",\"link\",\"15\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.1zn-p5cp-swfa.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"16\",{\"rel\":\"icon\",\"href\":\"/icon.svg?icon.0xngbc1s43sx3.svg\",\"sizes\":\"any\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"17\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png?apple-icon.0ph69_ayudfri.png\",\"sizes\":\"180x180\",\"type\":\"image/png\"}],[\"$\",\"$L43\",\"18\",{}]]\n"])</script>
1<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v4bc70e2c01a94c73b74392e4234840661791215815920" integrity="sha512-L0ha0OXavK/8okipN9F8BtP84dg9DUhPERbBXzwI6dgTA55d2+yweo3pn5CSFYs45/r8md2+xvUPtTdvTNRfjA==" data-cf-beacon='{"version":"2024.11.0","token":"901ff9324b764231a8bb932a36a51cd9","r":1,"spa":2}' crossorigin="anonymous"></script>
1 2</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.