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>Flowchart Templates â Import & Edit by Chat | VizText</title><meta name="description" content="Eight ready-made flowchart templates: sign-up, checkout, CI/CD, refunds, incident response 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/flowchart-template"/><link rel="alternate" hrefLang="en" href="https://viztext.com/flowchart-template"/><link rel="alternate" hrefLang="zh" href="https://viztext.com/zh/flowchart-template"/><link rel="alternate" hrefLang="x-default" href="https://viztext.com/flowchart-template"/><meta property="og:title" content="Flowchart Templates â Import & Edit by Chat | VizText"/><meta property="og:description" content="Eight ready-made flowchart templates: sign-up, checkout, CI/CD, refunds, incident response 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/flowchart-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="Flowchart Templates â Import & Edit by Chat | VizText"/><meta name="twitter:description" content="Eight ready-made flowchart templates: sign-up, checkout, CI/CD, refunds, incident response 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":"Flowchart Templates","item":"https://viztext.com/flowchart-template"}]},{"@context":"https://schema.org","@type":"CollectionPage","name":"Flowchart Templates","description":"Eight ready-made flowchart templates: sign-up, checkout, CI/CD, refunds, incident response and more. Open one on the canvas in a click, then reshape it by chatting. Export SVG, PNG or Mermaid.","url":"https://viztext.com/flowchart-template","isPartOf":{"@type":"WebSite","name":"VizText","url":"https://viztext.com/"},"mainEntity":{"@type":"ItemList","numberOfItems":8,"itemListElement":[{"@type":"ListItem","position":1,"name":"Sign-up with email verification","description":"Validation, the email-already-taken branch, and the 24-hour verification window that everyone forgets to draw until support asks what happens to a stale link."},{"@type":"ListItem","position":2,"name":"Checkout & payment","description":"Guest versus signed-in, shipping eligibility, a stock check and an authorization that can decline. Four decisions is where most real checkout flows actually land."},{"@type":"ListItem","position":3,"name":"CI/CD pipeline","description":"Lint, unit tests, E2E, the main-branch gate and a health check that can roll back. The picture to put in a README so nobody has to read the YAML first."},{"@type":"ListItem","position":4,"name":"Support ticket triage","description":"Deflection to a known outage, self-serve articles, plan-based routing and the escalation to engineering. The flow that decides your response-time numbers."},{"@type":"ListItem","position":5,"name":"Refund approval","description":"Return window, exceptions, digital versus physical goods, inspection on arrival, and an approval limit that sends large amounts up a level. The densest branching here."},{"@type":"ListItem","position":6,"name":"Login with 2FA","description":"Credentials, rate limiting, the second factor, code expiry, and the new-device notification. Handy for a security review where the lockout path is the point."},{"@type":"ListItem","position":7,"name":"Content moderation","description":"Automated scoring with a grey zone that goes to a human, severity-based enforcement, and an appeal loop back into review."},{"@type":"ListItem","position":8,"name":"Incident response","description":"From alert to all-clear: confirm real user impact, set severity, suspect the last deploy, roll back or dig in, then write the postmortem. Good runbook material."}]}},{"@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 an approval step before payment\", \"merge these two branches\", \"drop everything after refund issued\" â and returns a redrawn flow each turn. The split-view editor is for surgical ones: fix a typo in a step, retitle a branch, reorder nodes. Most people import, talk the shape into place, then polish in the editor."}},{"@type":"Question","name":"Does the assistant actually understand the imported flow?","acceptedAnswer":{"@type":"Answer","text":"Yes, because the template is structured data rather than a picture or a blob of text. The imported nodes and edges become the conversation's working state, so \"delete the SMS step\" removes that exact node and reconnects what was attached to it â the assistant is not re-guessing your diagram from a description of it."}},{"@type":"Question","name":"Should my flowchart run top-to-bottom or left-to-right?","acceptedAnswer":{"@type":"Answer","text":"Top-to-bottom is the default and reads naturally for short flows. Switch to left-to-right when the flow is long and mostly linear â a fifteen-step vertical chart is taller than any slide it has to go on. Say \"make it left to right\" in chat and the direction changes without touching the steps."}},{"@type":"Question","name":"What is the difference between a flowchart and a sequence diagram?","acceptedA
1nswer":{"@type":"Answer","text":"A flowchart shows the order of steps and the conditions that branch them, with no notion of who performs each step. A sequence diagram shows which participant sends which message to which other participant, over time. If your question is \"what happens next\", draw a flowchart; if it is \"which service calls which\", draw a sequence diagram."}},{"@type":"Question","name":"How many steps can one flowchart hold before it stops being useful?","acceptedAnswer":{"@type":"Answer","text":"Readability, not the tool, is the limit. Past roughly twenty nodes people stop tracing arrows. Pull a self-contained stretch into its own diagram and link to it from the parent â several focused pictures beat one wall chart. The templates here sit deliberately just under that line."}},{"@type":"Question","name":"Do I need to label every branch?","acceptedAnswer":{"@type":"Answer","text":"Yes, on every arrow leaving a decision. An unlabelled fork is the most common reason a flowchart gets misread: the reader guesses which side is \"yes\", guesses wrong, and implements the inverse. Every decision in these templates has both outgoing arrows labelled."}},{"@type":"Question","name":"What export formats are supported?","acceptedA
1nswer":{"@type":"Answer","text":"SVG, PNG, and the raw Mermaid source. SVG stays sharp at any zoom, which matters for long flows; 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="/flowchart-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/flowchart-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">Flowchart Templates</span></nav><h1 class="text-4xl sm:text-5xl font-bold tracking-tight text-zinc-900 dark:text-white">Flowchart 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-branched process flows. Open one and it's on the canvas right away. Then talk it into your process: "add a manager approval above 500, drop the SMS step, send rejections back to the form."</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. The previews leave the branch labels out so the shape stays readable at card size; click any one to see it in full, with every condition spelled out. "Refine in chat" puts the flow 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="Sign-up with email verification â 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="Sign-up with email verification" 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 dar
1k: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">Sign-up with email verification</h3></div><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Validation, the email-already-taken branch, and the 24-hour verification window that everyone forgets to draw until support asks what happens to a stale link.</p><p class="mt-3 text-xs text-zinc-500 dark:text-zinc-500">14<!-- --> <!-- -->steps<!-- --> · <!-- -->15<!-- --> <!-- -->connections</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=flow-signup&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=flow-signup">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 â 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" 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</h3></div><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Guest versus signed-in, shipping eligibility, a stock check and an authorization that can decline. Four decisions is where most real checkout flows actually land.</p><p class="mt-3 text-xs text-zinc-500 dark:text-zinc-500">17<!-- --> <!-- -->steps<!-- --> · <!-- -->20<!-- --> <!-- -->connections</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=flow-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=flow-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="CI/CD pipeline â 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="CI/CD pipeline" 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-git-branch mt-0.5 h-4 w-4 shrink-0 text-violet-600 dar
1k:text-violet-400" aria-hidden="true"><path d="M15 6a9 9 0 0 0-9 9V3"></path><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle></svg><h3 class="text-base font-semibold text-zinc-900 dark:text-white">CI/CD pipeline</h3></div><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Lint, unit tests, E2E, the main-branch gate and a health check that can roll back. The picture to put in a README so nobody has to read the YAML first.</p><p class="mt-3 text-xs text-zinc-500 dark:text-zinc-500">18<!-- --> <!-- -->steps<!-- --> · <!-- -->21<!-- --> <!-- -->connections</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=flow-cicd&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=flow-cicd">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="Support ticket triage â 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="Support ticket triage" 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-message-square mt-0.5 h-4 w-4 shrink-0 text-violet-600 dark:text-violet-400" aria-hidden="true"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path></svg><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Support ticket triage</h3></div><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Deflection to a known outage, self-serve articles, plan-based routing and the escalation to engineering. The flow that decides your response-time numbers.</p><p class="mt-3 text-xs text-zinc-500 dark:text-zinc-500">16<!-- --> <!-- -->steps<!-- --> · <!-- -->20<!-- --> <!-- -->connections</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=flow-support-ticket&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=flow-support-ticket">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="Refund approval â 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="Refund approval" 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-refresh-cw mt-0.5 h-4 w-4 shrink-0 text-violet-600 dar
1k:text-violet-400" aria-hidden="true"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></svg><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Refund approval</h3></div><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Return window, exceptions, digital versus physical goods, inspection on arrival, and an approval limit that sends large amounts up a level. The densest branching here.</p><p class="mt-3 text-xs text-zinc-500 dark:text-zinc-500">17<!-- --> <!-- -->steps<!-- --> · <!-- -->21<!-- --> <!-- -->connections</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=flow-refund&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=flow-refund">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="Login with 2FA â 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="Login with 2FA" 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-shield-check mt-0.5 h-4 w-4 shrink-0 text-violet-600 dark:text-violet-400" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Login with 2FA</h3></div><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Credentials, rate limiting, the second factor, code expiry, and the new-device notification. Handy for a security review where the lockout path is the point.</p><p class="mt-3 text-xs text-zinc-500 dark:text-zinc-500">15<!-- --> <!-- -->steps<!-- --> · <!-- -->18<!-- --> <!-- -->connections</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=flow-login-2fa&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=flow-login-2fa">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="Content moderation â 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="Content moderation" 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-search mt-0.5 h-4 w-4 shrink-0 text-violet-600 dar
1k:text-violet-400" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Content moderation</h3></div><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Automated scoring with a grey zone that goes to a human, severity-based enforcement, and an appeal loop back into review.</p><p class="mt-3 text-xs text-zinc-500 dark:text-zinc-500">16<!-- --> <!-- -->steps<!-- --> · <!-- -->19<!-- --> <!-- -->connections</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=flow-content-review&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=flow-content-review">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="Incident response â 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="Incident response" 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-triangle-alert mt-0.5 h-4 w-4 shrink-0 text-violet-600 dark:text-violet-400" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Incident response</h3></div><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">From alert to all-clear: confirm real user impact, set severity, suspect the last deploy, roll back or dig in, then write the postmortem. Good runbook material.</p><p class="mt-3 text-xs text-zinc-500 dark:text-zinc-500">16<!-- --> <!-- -->steps<!-- --> · <!-- -->18<!-- --> <!-- -->connections</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=flow-incident&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=flow-incident">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 most-branched flow, not the closest one</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 decisions than you think you need. Deleting a branch you can see is a two-second decision; discovering a missing edge case in production costs rather more.</p></div><div><h3 class="text-base font-semibold text-zinc-900 dark:text-white">2. Open it â the whole flow is already drawn</h3><p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">The flowchart is on the canvas the moment the page loads, with every decision labelled on both outgoing arrows and every terminal state drawn, including the ones nobody likes.</p></div><div><h3 class="text-base font-semibold text-zinc-900 dark:text-white">3. Talk it into your process</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: "add a manager approval when the amount is over 500, drop the SMS step, send rejections back to the form." The assistant edits the same structured flow 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 flowchart?</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 flowchart is a picture of a process: the steps in order, the decisions that split it, and the paths that lead to each ending. It answers "what happens, and in what order" â not "who talks to whom"
1, which is a sequence diagram, and not "what state is this thing in", which is a state diagram.</p><p class="text-sm sm:text-base leading-relaxed text-zinc-600 dark:text-zinc-400">It is the most-used diagram in engineering documentation for a reason: a flowchart is readable by people who do not write code. Support leads, finance and legal will all argue with a refund flow drawn as boxes and diamonds, and that argument is exactly the value â it happens before the code is written rather than after a customer complains.</p><p class="text-sm sm:text-base leading-relaxed text-zinc-600 dark:text-zinc-400">Mermaid's flowchart syntax covers what documentation actually needs: four common node shapes, labelled edges, subgraphs and both layout directions. It stops short of full BPMN â no swimlanes with pools, no event semantics. For a README, a runbook or an RFC, that limitation keeps the diagram readable.</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">Flowchart 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 flowchart. Get the node shapes and the branch labels right and the diagram documents your process; get them wrong and it quietly describes a different one.</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">Direction</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">flowchart TD / LR</code></div><div class="mt-3"><div role="img" aria-label="Direction" 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">TD runs top to bottom, LR left to right. Long approval chains read better as LR â a fifteen-step TD flow ends up taller than any slide it goes on.</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">Start & end</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="Start & end" 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">Round nodes mark where the flow begins and ends. Draw every terminal state, including the unhappy ones: a flow with one exit is usually a flow missing a branch.</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">Process step</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="Process step" 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 rectangle is something the system or a person does. Name it with a verb â "Charge the card", not "Payment" â so the diagram reads as a sequence of actions.</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">Decision</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="Decision" 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 diamond asks a yes/no question. Phrase it as a question, and give every outgoing arrow a label; an unlabelled fork is the single most common reason a flowchart gets misread.</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">Labelled edge</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="Labelled edge" 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">Text between pipes rides on the arrow. Use it for branch conditions and for loop-backs, where the label explains why the flow goes backwards.</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">Merge</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">a --> c</code></div><div class="mt-3"><div role="img" aria-label="Merge" 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">Several arrows can point at the same node. Merging branches back together keeps the diagram from splitting into parallel columns that never meet.</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 your process 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 an approval step before payment", "merge these two branches", "drop everything after refund issued" â and returns a redrawn flow each turn. The split-view editor is for surgical ones: fix a typo in a step, retitle a branch, reorder nodes. 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 flow?</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 nodes and edges become the conversation's working state, so "delete the SMS step" removes that exact node and reconnects what was 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">Should my flowchart run top-to-bottom or left-to-right?</summary><p class="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Top-to-bottom is the default and reads naturally for short flows. Switch to left-to-right when the flow is long and mostly linear â a fifteen-step vertical chart is taller than any slide it has to go on. Say "make it left to right" in chat and the direction changes without touching the steps.</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 flowchart and a sequence diagram?</summary><p class="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">A flowchart shows the order of steps and the conditions that branch them, with no notion of who performs each step. A sequence diagram shows which participant sends which message to which other participant, over time. If your question is "what happens next", draw a flowchart; if it is "which service calls which", 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 steps can one flowchart hold before it stops being useful?</summary><p class="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Readability, not the tool, is the limit. Past roughly twenty nodes people stop tracing arrows. Pull a self-contained stretch into its own diagram and link to it from the parent â several focused pictures beat one wall chart. The templates here sit deliberately just under that line.</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">Do I need to label every branch?</summary><p class="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">Yes, on every arrow leaving a decision. An unlabelled fork is the most common reason a flowchart gets misread: the reader guesses which side is "yes", guesses wrong, and implements the inverse. Every decision in these templates has both outgoing arrows labelled.</p></details>
1<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 long flows; 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="/flowchart-from-text"><span class="block text-sm font-medium text-zinc-900 dark:text-white">AI flowchart 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 process, 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="/state-diagram-from-text"><span class="block text-sm font-medium text-zinc-900 dark:text-white">State diagram generator</span><span class="mt-1 block text-sm text-zinc-500 dark:text-zinc-400">When the question is "what state is it in" rather than "what happens next".</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="/sequence-diagram-from-text"><span class="block text-sm font-medium text-zinc-900 dark:text-white">Sequence diagram generator</span><span class="mt-1 block text-sm text-zinc-500 dark:text-zinc-400">For flows where who calls whom matters more than the order of steps.</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 same idea for structure: 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-branched process flows. Open one and it's on the canvas right away. Then talk it into your process: "add a manager approval above 500, drop the SMS step, send rejections back to the form."</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:T1691,"])</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\":\"Flowchart Templates\",\"item\":\"https://viztext.com/flowchart-template\"}]},{\"@context\":\"https://schema.org\",\"@type\":\"CollectionPage\",\"name\":\"Flowchart Templates\",\"description\":\"Eight ready-made flowchart templates: sign-up, checkout, CI/CD, refunds, incident response and more. Open one on the canvas in a click, then reshape it by chatting. Export SVG, PNG or Mermaid.\",\"url\":\"https://viztext.com/flowchart-template\",\"isPartOf\":{\"@type\":\"WebSite\",\"name\":\"VizText\",\"url\":\"https://viztext.com/\"},\"mainEntity\":{\"@type\":\"ItemList\",\"numberOfItems\":8,\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Sign-up with email verification\",\"description\":\"Validation, the email-already-taken branch, and the 24-hour verification window that everyone forgets to draw until support asks what happens to a stale link.\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Checkout \u0026 payment\",\"description\":\"Guest versus signed-in, shipping eligibility, a stock check and an authorization that can decline. Four decisions is where most real checkout flows actually land.\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CI/CD pipeline\",\"description\":\"Lint, unit tests, E2E, the main-branch gate and a health check that can roll back. The picture to put in a README so nobody has to read the YAML first.\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Support ticket triage\",\"description\":\"Deflection to a known outage, self-serve articles, plan-based routing and the escalation to engineering. The flow that decides your response-time numbers.\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Refund approval\",\"description\":\"Return window, exceptions, digital versus physical goods, inspection on arrival, and an approval limit that sends large amounts up a level. The densest branching here.\"},{\"@type\":\"ListItem\",\"position\":6,\"name\":\"Login with 2FA\",\"description\":\"Credentials, rate limiting, the second factor, code expiry, and the new-device notification. Handy for a security review where the lockout path is the point.\"},{\"@type\":\"ListItem\",\"position\":7,\"name\":\"Content moderation\",\"description\":\"Automated scoring with a grey zone that goes to a human, severity-based enforcement, and an appeal loop back into review.\"},{\"@type\":\"ListItem\",\"position\":8,\"name\":\"Incident response\",\"description\":\"From alert to all-clear: confirm real user impact, set severity, suspect the last deploy, roll back or dig in, then write the postmortem. Good runbook material.\"}]}},{\"@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 an approval step before payment\\\", \\\"merge these two branches\\\", \\\"drop everything after refund issued\\\" â and returns a redrawn flow each turn. The split-view editor is for surgical ones: fix a typo in a step, retitle a branch, reorder nodes. Most people import, talk the shape into place, then polish in the editor.\"}},{\"@type\":\"Question\",\"name\":\"Does the assistant actually understand the imported flow?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes, because the template is structured data rather than a picture or a blob of text. The imported nodes and edges become the conversation's working state, so \\\"delete the SMS step\\\" removes that exact node and reconnects what was attached to it â the assistant is not re-guessing your diagram from a description of it.\"}},{\"@type\":\"Question\",\"name\":\"Should my flowchart run top-to-bottom or left-to-right?\",\"acceptedA
1nswer\":{\"@type\":\"Answer\",\"text\":\"Top-to-bottom is the default and reads naturally for short flows. Switch to left-to-right when the flow is long and mostly linear â a fifteen-step vertical chart is taller than any slide it has to go on. Say \\\"make it left to right\\\" in chat and the direction changes without touching the steps.\"}},{\"@type\":\"Question\",\"name\":\"What is the difference between a flowchart and a sequence diagram?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"A flowchart shows the order of steps and the conditions that branch them, with no notion of who performs each step. A sequence diagram shows which participant sends which message to which other participant, over time. If your question is \\\"what happens next\\\", draw a flowchart; if it is \\\"which service calls which\\\", draw a sequence diagram.\"}},{\"@type\":\"Question\",\"name\":\"How many steps can one flowchart hold before it stops being useful?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Readability, not the tool, is the limit. Past roughly twenty nodes people stop tracing arrows. Pull a self-contained stretch into its own diagram and link to it from the parent â several focused pictures beat one wall chart. The templates here sit deliberately just under that line.\"}},{\"@type\":\"Question\",\"name\":\"Do I need to label every branch?\",\"acceptedA
1nswer\":{\"@type\":\"Answer\",\"text\":\"Yes, on every arrow leaving a decision. An unlabelled fork is the most common reason a flowchart gets misread: the reader guesses which side is \\\"yes\\\", guesses wrong, and implements the inverse. Every decision in these templates has both outgoing arrows labelled.\"}},{\"@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 long flows; 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\":[\"\",\"flowchart-template\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"flowchart-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\":\"Flowchart Templates\"}]]}],[\"$\",\"h1\",null,{\"className\":\"text-4xl sm:text-5xl font-bold tracking-tight text-zinc-900 dark:text-white\",\"children\":\"Flowchart 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-branched process flows. Open one and it's on the canvas right away. Then talk it into your process: \\\"add a manager approval above 500, drop the SMS step, send rejections back to the form.\\\"\"}],[\"$\",\"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. The previews leave the branch labels out so the shape stays readable at card size; click any one to see it in full, with every condition spelled out. \\\"Refine in chat\\\" puts the flow 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\",\"flow-signup\",{\"locale\":\"en\",\"templateId\":\"flow-signup\",\"icon\":\"Mail\",\"title\":\"Sign-up with email verification\",\"description\":\"Validation, the email-already-taken branch, and the 24-hour verification window that everyone forgets to draw until support asks what happens to a stale link.\",\"code\":\"flowchart TD\\n start((\\\"Visitor opens sign-up\\\"))\\n submitForm[\\\"Submit email \u0026 password\\\"]\\n isValid{\\\"Fields valid?\\\"}\\n showErrors[\\\"Show field errors\\\"]\\n emailTaken{\\\"Email already registered?\\\"}\\n offerLogin[\\\"Offer login or reset\\\"]\\n createAccount[\\\"Create pending account\\\"]\\n sendMail[\\\"Send verification email\\\"]\\n clicked{\\\"Link clicked within 24h?\\\"}\\n expire[\\\"Expire account, allow retry\\\"]\\n activate[\\\"Activate account\\\"]\\n onboard[\\\"Show onboarding\\\"]\\n done((\\\"Signed in\\\"))\\n abandoned((\\\"Not registered\\\"))\\n start --\u003e submitForm\\n submitForm --\u003e isValid\\n isValid --\u003e|\\\"no\\\"| showErrors\\n showErrors --\u003e submitForm\\n isValid --\u003e|\\\"yes\\\"| emailTaken\\n emailTaken --\u003e|\\\"yes\\\"| offerLogin\\n offerLogin --\u003e abandoned\\n emailTaken --\u003e|\\\"no\\\"| createAccount\\n createAccount --\u003e sendMail\\n sendMail --\u003e clicked\\n clicked --\u003e|\\\"no\\\"| expire\\n expire --\u003e abandoned\\n clicked --\u003e|\\\"yes\\\"| activate\\n activate --\u003e onboard\\n onboard --\u003e done\",\"thumbCode\":\"flowchart TD\\n start((\\\"Visitor opens sign-up\\\"))\\n submitForm[\\\"Submit email \u0026 password\\\"]\\n isValid{\\\"Fields valid?\\\"}\\n showErrors[\\\"Show field errors\\\"]\\n emailTaken{\\\"Email already registered?\\\"}\\n offerLogin[\\\"Offer login or reset\\\"]\\n createAccount[\\\"Create pending account\\\"]\\n sendMail[\\\"Send verification email\\\"]\\n clicked{\\\"Link clicked within 24h?\\\"}\\n expire[\\\"Expire account, allow retry\\\"]\\n activate[\\\"Activate account\\\"]\\n onboard[\\\"Show onboarding\\\"]\\n done((\\\"Signed in\\\"))\\n abandoned((\\\"Not registered\\\"))\\n start --\u003e submitForm\\n submitForm --\u003e isValid\\n isValid --\u003e showErrors\\n showErrors --\u003e submitForm\\n isValid --\u003e emailTaken\\n emailTaken --\u003e offerLogin\\n offerLogin --\u003e abandoned\\n emailTaken --\u003e createAccount\\n createAccount --\u003e sendMail\\n sendMail --\u003e clicked\\n clicked --\u003e expire\\n expire --\u003e abandoned\\n clicked --\u003e activate\\n activate --\u003e onboard\\n onboard --\u003e done\",\"classCount\":14,\"relationCount\":15,\"labels\":{\"useTemplate\":\"Use this template\",\"refineInChat\":\"Refine in chat\",\"copyCode\":\"Copy Mermaid\",\"copied\":\"Copied\",\"classCount\":\"steps\",\"relationCount\":\"connections\",\"enlarge\":\"Click to enlarge\",\"enlargeNote\":\"Full diagram â every branch labelled. The card preview leaves the labels out to keep the shape readable.\",\"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-branched process flows. Open one and it's on the canvas right away. Then talk it into your process: \\\"add a manager approval above 500, drop the SMS step, send rejections back to the form.\\\"\"}],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,"46: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\"]\n3c:T47a,flowchart TD\n start((\"Cart ready\"))\n signedIn{\"Signed in?\"}\n guestOrLogin[\"Guest checkout or sign in\"]\n enterAddress[\"Enter shipping address\"]\n shippable{\"Ships to this address?\"}\n pickAlt[\"Suggest pickup or other address\"]\n pickPayment[\"Choose payment method\"]\n reserve[\"Reserve stock\"]\n inStock{\"All items in stock?\"}\n splitOrder[\"Split or drop unavailable items\"]\n charge[\"Authorize payment\"]\n paid{\"Payment authorized?\"}\n retryPay[\"Show failure, offer retry\"]\n placeOrder[\"Create order\"]\n confirm[\"Send confirmation email\"]\n done((\"Order placed\"))\n abandoned((\"Checkout abandoned\"))\n start --\u003e signedIn\n signedIn --\u003e|\"no\"| guestOrLogin\n guestOrLogin --\u003e enterAddress\n signedIn --\u003e|\"yes\"| enterAddress\n enterAddress --\u003e shippable\n shippable --\u003e|\"no\"| pickAlt\n pickAlt --\u003e enterAddress\n shippable --\u003e|\"yes\"| pickPayment\n pickPayment --\u003e reserve\n reserve --\u003e inStock\n inStock --\u003e|\"no\"| splitOrder\n splitOrder --\u003e charge\n inStock --\u003e|\"yes\"| charge\n charge --\u003e paid\n paid --\u003e|\"no\"| retryPay\n retryPay --\u003e pickPayment\n retryPay --\u003e abandoned\n paid --\u003e|\"yes\"| placeOrder\n placeOrder --\u003e confirm\n confirm --\u003e done3d:T446,flowchart TD\n start((\"Cart ready\"))\n signedIn{\"Signed in?\"}\n guestOrLogin[\"Guest checkout or sign in\"]\n enterAddress[\"Enter shipping address\"]\n shippable{\"Ships to this address?\"}\n pickAlt[\"Suggest pickup or other address\"]\n pickPayment[\"Choose payment method\"]\n reserve[\"Reserve stock\"]\n inStock{\"All items in stock?\"}\n splitOrder[\"Split or drop unavailable items\"]\n charge[\"Authorize payment\"]\n paid{\"Payment authorized?\"}\n retryPay[\"Show failure, offer retry\"]\n placeOrder[\"Create order\"]\n confirm[\"Send confirmation email\"]\n done((\"Order placed\"))\n abandoned((\"Checkout abandoned\"))\n start --\u003e signedIn\n signedIn --\u003e guestOrLogin\n guestOrLogin --\u003e enterAddress\n signedIn --\u003e enterAddress\n enterAddress --\u003e shippable\n shippable --\u003e pickAlt\n pickAlt --\u003e enterAddress\n shippable --\u003e pickPayment\n pickPayment --\u003e reserve\n reserve --\u003e inStock\n inStock --\u003e splitOrder\n splitOrder --\u003e charge\n inStock --\u003e charge\n charge --\u003e paid\n paid --\u003e retryPay\n retryPay --\u003e pickPayment\n retryPay --\u003e abandoned\n paid --\u003e placeOrder\n placeOrder --\u003e confirm\n confirm --\u003e done19:[\"$\",\"$L18\",\"flow-checkout\",{\"locale\":\"en\",\"templateId\":\"flow-checkout\",\"icon\":\"Box\",\"title\":\"Checkout \u0026 payment\",\"description\":\"Guest versus signed-in, shipping eligibility, a stock check and an authorization that can decline. Four decisions is where most real checkout flows actually land.\",\"code\":\"$3c\",\"thumbCode\":\"$3d\",\"classCount\":17,\"relationCount\":20,\"labels\":{\"useTemplate\":\"Use this template\",\"refineInChat\":\"Refine in chat\",\"copyCode\":\"Copy Mermaid\",\"copied\":\"Copied\",\"classCount\":\"steps\",\"relationCount\":\"connections\",\"enlarge\":\"Click to enlarge\",\"enlargeNote\":\"Full diagram â every branch labelled. The card preview leaves the labels out to keep the shape readable.\",\"close\":\"Close\"}}]\n3e:T401,flowchart TD\n start((\"Push to branch\"))\n install[\"Install dependencies\"]\n lint[\"Lint \u0026 typecheck\"]\n lintOk{\"Static checks pass?\"}\n failFast[\"Fail fast, notify author\"]\n unit[\"Run unit tests\"]\n unitOk{\"Tests green?\"}\n build[\"Build artifact\"]\n e2e[\"Run e2e on preview\"]\n e2eOk{\"E2E green?\"}\n isMain{\"Branch is main?\"}\n preview[\"Publish preview URL\"]\n deployProd[\"Deploy to production\"]\n smoke[\"Smoke check production\"]\n healthy{\"Healthy?\"}\n rollback[\"Roll back to previous\"]\n done((\"Released\"))\n failed((\"Pipeline failed\"))\n start --\u003e install\n install --\u003e lint\n lint --\u003e lintOk\n lintOk --\u003e|\"no\"| failFast\n failFast --\u003e failed\n lintOk --\u003e|\"yes\"| unit\n unit --\u003e unitOk\n unitOk --\u003e|\"no\"| failFast\n unitOk --\u003e|\"yes\"| build\n build --\u003e e2e\n e2e --\u003e e2eOk\n e2eOk --\u003e|\"no\"| failFast\n e2eOk --\u003e|\"yes\"| isMain\n isMain --\u003e|\"no\"| preview\n preview --\u003e done\n isMain --\u003e|\"yes\"| deployPro"])</script>
1<script>self.__next_f.push([1,"d\n deployProd --\u003e smoke\n smoke --\u003e healthy\n healthy --\u003e|\"no\"| rollback\n rollback --\u003e failed\n healthy --\u003e|\"yes\"| done"])</script>
1<script>self.__next_f.push([1,"1a:[\"$\",\"$L18\",\"flow-cicd\",{\"locale\":\"en\",\"templateId\":\"flow-cicd\",\"icon\":\"GitBranch\",\"title\":\"CI/CD pipeline\",\"description\":\"Lint, unit tests, E2E, the main-branch gate and a health check that can roll back. The picture to put in a README so nobody has to read the YAML first.\",\"code\":\"$3e\",\"thumbCode\":\"flowchart TD\\n start((\\\"Push to branch\\\"))\\n install[\\\"Install dependencies\\\"]\\n lint[\\\"Lint \u0026 typecheck\\\"]\\n lintOk{\\\"Static checks pass?\\\"}\\n failFast[\\\"Fail fast, notify author\\\"]\\n unit[\\\"Run unit tests\\\"]\\n unitOk{\\\"Tests green?\\\"}\\n build[\\\"Build artifact\\\"]\\n e2e[\\\"Run e2e on preview\\\"]\\n e2eOk{\\\"E2E green?\\\"}\\n isMain{\\\"Branch is main?\\\"}\\n preview[\\\"Publish preview URL\\\"]\\n deployProd[\\\"Deploy to production\\\"]\\n smoke[\\\"Smoke check production\\\"]\\n healthy{\\\"Healthy?\\\"}\\n rollback[\\\"Roll back to previous\\\"]\\n done((\\\"Released\\\"))\\n failed((\\\"Pipeline failed\\\"))\\n start --\u003e install\\n install --\u003e lint\\n lint --\u003e lintOk\\n lintOk --\u003e failFast\\n failFast --\u003e failed\\n lintOk --\u003e unit\\n unit --\u003e unitOk\\n unitOk --\u003e failFast\\n unitOk --\u003e build\\n build --\u003e e2e\\n e2e --\u003e e2eOk\\n e2eOk --\u003e failFast\\n e2eOk --\u003e isMain\\n isMain --\u003e preview\\n preview --\u003e done\\n isMain --\u003e deployProd\\n deployProd --\u003e smoke\\n smoke --\u003e healthy\\n healthy --\u003e rollback\\n rollback --\u003e failed\\n healthy --\u003e done\",\"classCount\":18,\"relationCount\":21,\"labels\":{\"useTemplate\":\"Use this template\",\"refineInChat\":\"Refine in chat\",\"copyCode\":\"Copy Mermaid\",\"copied\":\"Copied\",\"classCount\":\"steps\",\"relationCount\":\"connections\",\"enlarge\":\"Click to enlarge\",\"enlargeNote\":\"Full diagram â every branch labelled. The card preview leaves the labels out to keep the shape readable.\",\"close\":\"Close\"}}]\n"])</script>
1<script>self.__next_f.push([1,"3f:T498,flowchart TD\n start((\"Ticket submitted\"))\n autoClassify[\"Auto-classify by topic\"]\n isOutage{\"Matches known outage?\"}\n attachIncident[\"Attach to incident thread\"]\n kbMatch{\"Help article matches?\"}\n sendArticle[\"Send article, ask if resolved\"]\n resolved{\"Customer says resolved?\"}\n isPaying{\"Paid plan?\"}\n queueStandard[\"Standard queue\"]\n queuePriority[\"Priority queue\"]\n agentReply[\"Agent investigates \u0026 replies\"]\n needsEng{\"Needs engineering?\"}\n fileBug[\"File bug, link ticket\"]\n waitFix[\"Wait for fix, keep customer posted\"]\n close[\"Close ticket \u0026 ask for rating\"]\n done((\"Ticket closed\"))\n start --\u003e autoClassify\n autoClassify --\u003e isOutage\n isOutage --\u003e|\"yes\"| attachIncident\n attachIncident --\u003e waitFix\n isOutage --\u003e|\"no\"| kbMatch\n kbMatch --\u003e|\"yes\"| sendArticle\n sendArticle --\u003e resolved\n resolved --\u003e|\"yes\"| close\n resolved --\u003e|\"no\"| isPaying\n kbMatch --\u003e|\"no\"| isPaying\n isPaying --\u003e|\"no\"| queueStandard\n isPaying --\u003e|\"yes\"| queuePriority\n queueStandard --\u003e agentReply\n queuePriority --\u003e agentReply\n agentReply --\u003e needsEng\n needsEng --\u003e|\"yes\"| fileBug\n fileBug --\u003e waitFix\n waitFix --\u003e close\n needsEng --\u003e|\"no\"| close\n close --\u003e done40:T457,flowchart TD\n start((\"Ticket submitted\"))\n autoClassify[\"Auto-classify by topic\"]\n isOutage{\"Matches known outage?\"}\n attachIncident[\"Attach to incident thread\"]\n kbMatch{\"Help article matches?\"}\n sendArticle[\"Send article, ask if resolved\"]\n resolved{\"Customer says resolved?\"}\n isPaying{\"Paid plan?\"}\n queueStandard[\"Standard queue\"]\n queuePriority[\"Priority queue\"]\n agentReply[\"Agent investigates \u0026 replies\"]\n needsEng{\"Needs engineering?\"}\n fileBug[\"File bug, link ticket\"]\n waitFix[\"Wait for fix, keep customer posted\"]\n close[\"Close ticket \u0026 ask for rating\"]\n done((\"Ticket closed\"))\n start --\u003e autoClassify\n autoClassify --\u003e isOutage\n isOutage --\u003e attachIncident\n attachIncident --\u003e waitFix\n isOutage --\u003e kbMatch\n kbMatch --\u003e sendArticle\n sendArticle --\u003e resolved\n resolved --\u003e close\n resolved --\u003e isPaying\n kbMatch --\u003e isPaying\n isPaying --\u003e queueStandard\n isPaying --\u003e queuePriority\n queueStandard --\u003e agentReply\n queuePriority --\u003e agentReply\n agentReply --\u003e needsEng\n needsEng --\u003e fileBug\n fileBug --\u003e waitFix\n waitFix --\u003e close\n needsEng --\u003e close\n close --\u003e done1b:[\"$\",\"$L18\",\"flow-support-ticket\",{\"locale\":\"en\",\"templateId\":\"flow-support-ticket\",\"icon\":\"MessageSquare\",\"title\":\"Support ticket triage\",\"description\":\"Deflection to a known outage, self-serve articles, plan-based routing and the escalation to engineering. The flow that decides your response-time numbers.\",\"code\":\"$3f\",\"thumbCode\":\"$40\",\"classCount\":16,\"relationCount\":20,\"labels\":{\"useTemplate\":\"Use this template\",\"refineInChat\":\"Refine in chat\",\"copyCode\":\"Copy Mermaid\",\"copied\":\"Copied\",\"classCount\":\"steps\",\"relationCount\":\"connections\",\"enlarge\":\"Click to enlarge\",\"enlargeNote\":\"Full diagram â every branch labelled. The card preview leaves the labels out to keep the shape readable.\",\"close\":\"Close\"}}]\n41:T4f5,flowchart TD\n start((\"Refund requested\"))\n lookupOrder[\"Look up order \u0026 payment\"]\n inWindow{\"Within return window?\"}\n checkException[\"Review as goodwill exception\"]\n goodwillOk{\"Exception approved?\"}\n isDigital{\"Digital goods?\"}\n returnLabel[\"Issue return label\"]\n received{\"Item received \u0026 intact?\"}\n partialOffer[\"Offer partial refund\"]\n overThreshold{\"Amount over approval limit?\"}\n managerApprove[\"Manager reviews\"]\n approved{\"Approved?\"}\n issueRefund[\"Refund to original method\"]\n notify[\"Notify customer \u0026 close case\"]\n reject[\"Explain rejection\"]\n done((\"Refunded\"))\n denied((\"Request denied\"))\n start --\u003e lookupOrder\n lookupOrder --\u003e inWindow\n inWindow --\u003e|\"no\"| checkException\n checkException --\u003e goodwillOk\n goodwillOk --\u003e|\"no\"| reject\n reject --\u003e denied\n goodwillOk --\u003e|\"yes\"| isDigital\n inWindow --\u003e|\"yes\"| isDigital\n isDigital --\u003e|\"yes\"| overThreshold\n isDigital --\u003e|\"no\"| returnLabel\n returnLabel --\u003e received\n received --\u003e|\"no\"| partialOffer\n partialOffer --\u003e overThreshold\n received --\u003e|\"yes\"| overThreshold\n overThr"])</script>
1<script>self.__next_f.push([1,"eshold --\u003e|\"yes\"| managerApprove\n managerApprove --\u003e approved\n approved --\u003e|\"no\"| reject\n approved --\u003e|\"yes\"| issueRefund\n overThreshold --\u003e|\"no\"| issueRefund\n issueRefund --\u003e notify\n notify --\u003e done42:T4a7,flowchart TD\n start((\"Refund requested\"))\n lookupOrder[\"Look up order \u0026 payment\"]\n inWindow{\"Within return window?\"}\n checkException[\"Review as goodwill exception\"]\n goodwillOk{\"Exception approved?\"}\n isDigital{\"Digital goods?\"}\n returnLabel[\"Issue return label\"]\n received{\"Item received \u0026 intact?\"}\n partialOffer[\"Offer partial refund\"]\n overThreshold{\"Amount over approval limit?\"}\n managerApprove[\"Manager reviews\"]\n approved{\"Approved?\"}\n issueRefund[\"Refund to original method\"]\n notify[\"Notify customer \u0026 close case\"]\n reject[\"Explain rejection\"]\n done((\"Refunded\"))\n denied((\"Request denied\"))\n start --\u003e lookupOrder\n lookupOrder --\u003e inWindow\n inWindow --\u003e checkException\n checkException --\u003e goodwillOk\n goodwillOk --\u003e reject\n reject --\u003e denied\n goodwillOk --\u003e isDigital\n inWindow --\u003e isDigital\n isDigital --\u003e overThreshold\n isDigital --\u003e returnLabel\n returnLabel --\u003e received\n received --\u003e partialOffer\n partialOffer --\u003e overThreshold\n received --\u003e overThreshold\n overThreshold --\u003e managerApprove\n managerApprove --\u003e approved\n approved --\u003e reject\n approved --\u003e issueRefund\n overThreshold --\u003e issueRefund\n issueRefund --\u003e notify\n notify --\u003e done1c:[\"$\",\"$L18\",\"flow-refund\",{\"locale\":\"en\",\"templateId\":\"flow-refund\",\"icon\":\"RefreshCw\",\"title\":\"Refund approval\",\"description\":\"Return window, exceptions, digital versus physical goods, inspection on arrival, and an approval limit that sends large amounts up a level. The densest branching here.\",\"code\":\"$41\",\"thumbCode\":\"$42\",\"classCount\":17,\"relationCount\":21,\"labels\":{\"useTemplate\":\"Use this template\",\"refineInChat\":\"Refine in chat\",\"copyCode\":\"Copy Mermaid\",\"copied\":\"Copied\",\"classCount\":\"steps\",\"relationCount\":\"connections\",\"enlarge\":\"Click to enlarge\",\"enlargeNote\":\"Full diagram â every branch labelled. The card preview leaves the labels out to keep the shape readable.\",\"close\":\"Close\"}}]\n"])</script>
1<script>self.__next_f.push([1,"1d:[\"$\",\"$L18\",\"flow-login-2fa\",{\"locale\":\"en\",\"templateId\":\"flow-login-2fa\",\"icon\":\"ShieldCheck\",\"title\":\"Login with 2FA\",\"description\":\"Credentials, rate limiting, the second factor, code expiry, and the new-device notification. Handy for a security review where the lockout path is the point.\",\"code\":\"flowchart TD\\n start((\\\"Open login page\\\"))\\n enterCreds[\\\"Enter email \u0026 password\\\"]\\n credsOk{\\\"Credentials correct?\\\"}\\n countFail[\\\"Count failed attempt\\\"]\\n tooMany{\\\"Too many attempts?\\\"}\\n lockout[\\\"Lock account, email owner\\\"]\\n has2fa{\\\"2FA enabled?\\\"}\\n sendCode[\\\"Send one-time code\\\"]\\n enterCode[\\\"Enter code\\\"]\\n codeOk{\\\"Code valid \u0026 unexpired?\\\"}\\n newDevice{\\\"New device?\\\"}\\n alertOwner[\\\"Email new-device alert\\\"]\\n issueSession[\\\"Issue session cookie\\\"]\\n done((\\\"Signed in\\\"))\\n blocked((\\\"Access blocked\\\"))\\n start --\u003e enterCreds\\n enterCreds --\u003e credsOk\\n credsOk --\u003e|\\\"no\\\"| countFail\\n countFail --\u003e tooMany\\n tooMany --\u003e|\\\"yes\\\"| lockout\\n lockout --\u003e blocked\\n tooMany --\u003e|\\\"no\\\"| enterCreds\\n credsOk --\u003e|\\\"yes\\\"| has2fa\\n has2fa --\u003e|\\\"yes\\\"| sendCode\\n sendCode --\u003e enterCode\\n enterCode --\u003e codeOk\\n codeOk --\u003e|\\\"no\\\"| countFail\\n codeOk --\u003e|\\\"yes\\\"| newDevice\\n has2fa --\u003e|\\\"no\\\"| newDevice\\n newDevice --\u003e|\\\"yes\\\"| alertOwner\\n alertOwner --\u003e issueSession\\n newDevice --\u003e|\\\"no\\\"| issueSession\\n issueSession --\u003e done\",\"thumbCode\":\"flowchart TD\\n start((\\\"Open login page\\\"))\\n enterCreds[\\\"Enter email \u0026 password\\\"]\\n credsOk{\\\"Credentials correct?\\\"}\\n countFail[\\\"Count failed attempt\\\"]\\n tooMany{\\\"Too many attempts?\\\"}\\n lockout[\\\"Lock account, email owner\\\"]\\n has2fa{\\\"2FA enabled?\\\"}\\n sendCode[\\\"Send one-time code\\\"]\\n enterCode[\\\"Enter code\\\"]\\n codeOk{\\\"Code valid \u0026 unexpired?\\\"}\\n newDevice{\\\"New device?\\\"}\\n alertOwner[\\\"Email new-device alert\\\"]\\n issueSession[\\\"Issue session cookie\\\"]\\n done((\\\"Signed in\\\"))\\n blocked((\\\"Access blocked\\\"))\\n start --\u003e enterCreds\\n enterCreds --\u003e credsOk\\n credsOk --\u003e countFail\\n countFail --\u003e tooMany\\n tooMany --\u003e lockout\\n lockout --\u003e blocked\\n tooMany --\u003e enterCreds\\n credsOk --\u003e has2fa\\n has2fa --\u003e sendCode\\n sendCode --\u003e enterCode\\n enterCode --\u003e codeOk\\n codeOk --\u003e countFail\\n codeOk --\u003e newDevice\\n has2fa --\u003e newDevice\\n newDevice --\u003e alertOwner\\n alertOwner --\u003e issueSession\\n newDevice --\u003e issueSession\\n issueSession --\u003e done\",\"classCount\":15,\"relationCount\":18,\"labels\":{\"useTemplate\":\"Use this template\",\"refineInChat\":\"Refine in chat\",\"copyCode\":\"Copy Mermaid\",\"copied\":\"Copied\",\"classCount\":\"steps\",\"relationCount\":\"connections\",\"enlarge\":\"Click to enlarge\",\"enlargeNote\":\"Full diagram â every branch labelled. The card preview leaves the labels out to keep the shape readable.\",\"close\":\"Close\"}}]\n"])</script>
1<script>self.__next_f.push([1,"43:T444,flowchart TD\n start((\"Post submitted\"))\n autoScan[\"Automated policy scan\"]\n clearlyBad{\"Clear violation?\"}\n autoRemove[\"Remove \u0026 notify author\"]\n uncertain{\"Score in grey zone?\"}\n publish[\"Publish immediately\"]\n queueHuman[\"Queue for human review\"]\n reviewerDecides[\"Reviewer reads in context\"]\n violates{\"Violates policy?\"}\n severe{\"Severe or repeated?\"}\n limitReach[\"Limit reach, warn author\"]\n suspend[\"Suspend account\"]\n appeal{\"Author appeals?\"}\n secondReview[\"Second reviewer decides\"]\n live((\"Post live\"))\n removed((\"Post removed\"))\n start --\u003e autoScan\n autoScan --\u003e clearlyBad\n clearlyBad --\u003e|\"yes\"| autoRemove\n autoRemove --\u003e appeal\n clearlyBad --\u003e|\"no\"| uncertain\n uncertain --\u003e|\"no\"| publish\n publish --\u003e live\n uncertain --\u003e|\"yes\"| queueHuman\n queueHuman --\u003e reviewerDecides\n reviewerDecides --\u003e violates\n violates --\u003e|\"no\"| publish\n violates --\u003e|\"yes\"| severe\n severe --\u003e|\"no\"| limitReach\n limitReach --\u003e removed\n severe --\u003e|\"yes\"| suspend\n suspend --\u003e removed\n appeal --\u003e|\"yes\"| secondReview\n secondReview --\u003e violates\n appeal --\u003e|\"no\"| removed44:T403,flowchart TD\n start((\"Post submitted\"))\n autoScan[\"Automated policy scan\"]\n clearlyBad{\"Clear violation?\"}\n autoRemove[\"Remove \u0026 notify author\"]\n uncertain{\"Score in grey zone?\"}\n publish[\"Publish immediately\"]\n queueHuman[\"Queue for human review\"]\n reviewerDecides[\"Reviewer reads in context\"]\n violates{\"Violates policy?\"}\n severe{\"Severe or repeated?\"}\n limitReach[\"Limit reach, warn author\"]\n suspend[\"Suspend account\"]\n appeal{\"Author appeals?\"}\n secondReview[\"Second reviewer decides\"]\n live((\"Post live\"))\n removed((\"Post removed\"))\n start --\u003e autoScan\n autoScan --\u003e clearlyBad\n clearlyBad --\u003e autoRemove\n autoRemove --\u003e appeal\n clearlyBad --\u003e uncertain\n uncertain --\u003e publish\n publish --\u003e live\n uncertain --\u003e queueHuman\n queueHuman --\u003e reviewerDecides\n reviewerDecides --\u003e violates\n violates --\u003e publish\n violates --\u003e severe\n severe --\u003e limitReach\n limitReach --\u003e removed\n severe --\u003e suspend\n suspend --\u003e removed\n appeal --\u003e secondReview\n secondReview --\u003e violates\n appeal --\u003e removed1e:[\"$\",\"$L18\",\"flow-content-review\",{\"locale\":\"en\",\"templateId\":\"flow-content-review\",\"icon\":\"Search\",\"title\":\"Content moderation\",\"description\":\"Automated scoring with a grey zone that goes to a human, severity-based enforcement, and an appeal loop back into review.\",\"code\":\"$43\",\"thumbCode\":\"$44\",\"classCount\":16,\"relationCount\":19,\"labels\":{\"useTemplate\":\"Use this template\",\"refineInChat\":\"Refine in chat\",\"copyCode\":\"Copy Mermaid\",\"copied\":\"Copied\",\"classCount\":\"steps\",\"relationCount\":\"connections\",\"enlarge\":\"Click to enlarge\",\"enlargeNote\":\"Full diagram â every branch labelled. The card preview leaves the labels out to keep the shape readable.\",\"close\":\"Close\"}}]\n45:T405,flowchart TD\n start((\"Alert fires\"))\n ack[\"On-call acknowledges\"]\n realIssue{\"Real user impact?\"}\n tuneAlert[\"Silence \u0026 tune the alert\"]\n declare[\"Declare incident, open channel\"]\n sev{\"Severity 1?\"}\n pageLeads[\"Page leads \u0026 post status page\"]\n recentDeploy{\"Recent deploy suspected?\"}\n rollback[\"Roll back\"]\n mitigate[\"Apply mitigation\"]\n recovered{\"Metrics recovered?\"}\n escalate[\"Escalate to subject expert\"]\n monitor[\"Monitor for 30 minutes\"]\n postmortem[\"Write postmortem \u0026 actions\"]\n done((\"Incident closed\"))\n noop((\"No incident\"))\n start --\u003e ack\n ack --\u003e realIssue\n realIssue --\u003e|\"no\"| tuneAlert\n tuneAlert --\u003e noop\n realIssue --\u003e|\"yes\"| declare\n declare --\u003e sev\n sev --\u003e|\"yes\"| pageLeads\n pageLeads --\u003e recentDeploy\n sev --\u003e|\"no\"| recentDeploy\n recentDeploy --\u003e|\"yes\"| rollback\n rollback --\u003e recovered\n recentDeploy --\u003e|\"no\"| mitigate\n mitigate --\u003e recovered\n recovered --\u003e|\"no\"| escalate\n escalate --\u003e mitigate\n recovered --\u003e|\"yes\"| monitor\n monitor --\u003e postmortem\n postmortem --\u003e done"])</script>
1<script>self.__next_f.push([1,"1f:[\"$\",\"$L18\",\"flow-incident\",{\"locale\":\"en\",\"templateId\":\"flow-incident\",\"icon\":\"AlertTriangle\",\"title\":\"Incident response\",\"description\":\"From alert to all-clear: confirm real user impact, set severity, suspect the last deploy, roll back or dig in, then write the postmortem. Good runbook material.\",\"code\":\"$45\",\"thumbCode\":\"flowchart TD\\n start((\\\"Alert fires\\\"))\\n ack[\\\"On-call acknowledges\\\"]\\n realIssue{\\\"Real user impact?\\\"}\\n tuneAlert[\\\"Silence \u0026 tune the alert\\\"]\\n declare[\\\"Declare incident, open channel\\\"]\\n sev{\\\"Severity 1?\\\"}\\n pageLeads[\\\"Page leads \u0026 post status page\\\"]\\n recentDeploy{\\\"Recent deploy suspected?\\\"}\\n rollback[\\\"Roll back\\\"]\\n mitigate[\\\"Apply mitigation\\\"]\\n recovered{\\\"Metrics recovered?\\\"}\\n escalate[\\\"Escalate to subject expert\\\"]\\n monitor[\\\"Monitor for 30 minutes\\\"]\\n postmortem[\\\"Write postmortem \u0026 actions\\\"]\\n done((\\\"Incident closed\\\"))\\n noop((\\\"No incident\\\"))\\n start --\u003e ack\\n ack --\u003e realIssue\\n realIssue --\u003e tuneAlert\\n tuneAlert --\u003e noop\\n realIssue --\u003e declare\\n declare --\u003e sev\\n sev --\u003e pageLeads\\n pageLeads --\u003e recentDeploy\\n sev --\u003e recentDeploy\\n recentDeploy --\u003e rollback\\n rollback --\u003e recovered\\n recentDeploy --\u003e mitigate\\n mitigate --\u003e recovered\\n recovered --\u003e escalate\\n escalate --\u003e mitigate\\n recovered --\u003e monitor\\n monitor --\u003e postmortem\\n postmortem --\u003e done\",\"classCount\":16,\"relationCount\":18,\"labels\":{\"useTemplate\":\"Use this template\",\"refineInChat\":\"Refine in chat\",\"copyCode\":\"Copy Mermaid\",\"copied\":\"Copied\",\"classCount\":\"steps\",\"relationCount\":\"connections\",\"enlarge\":\"Click to enlarge\",\"enlargeNote\":\"Full diagram â every branch labelled. The card preview leaves the labels out to keep the shape readable.\",\"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 most-branched flow, not the closest one\",{\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"1. Take the most-branched flow, not the closest one\"}],[\"$\",\"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 decisions than you think you need. Deleting a branch you can see is a two-second decision; discovering a missing edge case in production costs rather more.\"}]]}],[\"$\",\"div\",\"2. Open it â the whole flow is already drawn\",{\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"2. Open it â the whole flow is already drawn\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"The flowchart is on the canvas the moment the page loads, with every decision labelled on both outgoing arrows and every terminal state drawn, including the ones nobody likes.\"}]]}],[\"$\",\"div\",\"3. Talk it into your process\",{\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"3. Talk it into your process\"}],[\"$\",\"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: \\\"add a manager approval when the amount is over 500, drop the SMS step, send rejections back to the form.\\\" The assistant edits the same structured flow 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 flowchart?\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 space-y-4 max-w-3xl\",\"children\":[[\"$\",\"p\",\"A flowchart is a picture\",{\"className\":\"text-sm sm:text-base leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"A flowchart is a picture of a process: the steps in order, the decisions that split it, and the paths that lead to each ending. It answers \\\"what happens, and in what order\\\" â not \\\"who talks to whom\\\", which is a sequence diagram, and not \\\"what state is this thing in\\\", which is a state diagram.\"}],[\"$\",\"p\",\"It is the most-used diag\",{\"className\":\"text-sm sm:text-base leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"It is the most-used diagram in engineering documentation for a reason: a flowchart is readable by people who do not write code. Support leads, finance and legal will all argue with a refund flow drawn as boxes and diamonds, and that argument is exactly the value â it happens before the code is written rather than after a customer complains.\"}],[\"$\",\"p\",\"Mermaid's flowchart synt\",{\"className\":\"text-sm sm:text-base leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"Mermaid's flowchart syntax covers what documentation actually needs: four common node shapes, labelled edges, subgraphs and both layout directions. It stops short of full BPMN â no swimlanes with pools, no event semantics. For a README, a runbook or an RFC, that limitation keeps the diagram readable.\"}]]}]]}]\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\":\"Flowchart 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 flowchart. Get the node shapes and the branch labels right and the diagram documents your process; get them wrong and it quietly describes a different one.\"}],[\"$\",\"div\",null,{\"className\":\"mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"div\",\"direction\",{\"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\":\"Direction\"}],[\"$\",\"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\":\"flowchart TD / LR\"}]]}],[\"$\",\"div\",null,{\"className\":\"mt-3\",\"children\":[\"$\",\"$L46\",null,{\"code\":\"flowchart LR\\n a[Step one] --\u003e b[Step two] --\u003e c[Step three]\",\"label\":\"Direction\",\"heightClass\":\"h-32\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"TD runs top to bottom, LR left to right. Long approval chains read better as LR â a fifteen-step TD flow ends up taller than any slide it goes on.\"}]]}],[\"$\",\"div\",\"terminal\",{\"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\":\"Start \u0026 end\"}],[\"$\",\"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\":\"((...))\"}]]}],[\"$\",\"div\",null,{\"className\":\"mt-3\",\"children\":[\"$\",\"$L46\",null,{\"code\":\"flowchart TD\\n start((Request received))\\n work[Handle it]\\n done((Done))\\n start --\u003e work --\u003e done\",\"label\":\"Start \u0026 end\",\"heightClass\":\"h-32\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"Round nodes mark where the flow begins and ends. Draw every terminal state, including the unhappy ones: a flow with one exit is usually a flow missing a branch.\"}]]}],[\"$\",\"div\",\"process\",{\"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\":\"Process step\"}],[\"$\",\"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\":\"[...]\"}]]}],[\"$\",\"div\",null,{\"className\":\"mt-3\",\"children\":[\"$\",\"$L46\",null,{\"code\":\"flowchart TD\\n charge[Charge the card]\\n email[Send receipt]\\n charge --\u003e email\",\"label\":\"Process step\",\"heightClass\":\"h-32\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"A rectangle is something the system or a person does. Name it with a verb â \\\"Charge the card\\\", not \\\"Payment\\\" â so the diagram reads as a sequence of actions.\"}]]}],[\"$\",\"div\",\"decision\",{\"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\":\"Decision\"}],\"$L47\"]}],\"$L48\",\"$L49\"]}],\"$L4a\",\"$L4b\"]}]]}]}]\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 your process 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 an approval step before payment\\\", \\\"merge these two branches\\\", \\\"drop everything after refund issued\\\" â and returns a redrawn flow each turn. The split-view editor is for surgical ones: fix a typo in a step, retitle a branch, reorder nodes. Most people import, talk the shape into place, then polish in the editor.\"}]]}],[\"$\",\"details\",\"Does the assistant actually understand the imported flow?\",{\"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 flow?\"}],[\"$\",\"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 nodes and edges become the conversation's working state, so \\\"delete the SMS step\\\" removes that exact node and reconnects what was attached to it â the assistant is not re-guessing your diagram from a description of it.\"}]]}],[\"$\",\"details\",\"Should my flowchart run top-to-bottom or left-to-right?\",{\"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\":\"Should my flowchart run top-to-bottom or left-to-right?\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"Top-to-bottom is the default and reads naturally for short flows. Switch to left-to-right when the flow is long and mostly linear â a fifteen-step vertical chart is taller than any slide it has to go on. Say \\\"make it left to right\\\" in chat and the direction changes without touching the steps.\"}]]}],[\"$\",\"details\",\"What is the difference between a flowchart and a sequence 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\":\"What is the difference between a flowchart and a sequence diagram?\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"A flowchart shows the order of steps and the conditions that branch them, with no notion of who performs each step. A sequence diagram shows which participant sends which message to which other participant, over time. If your question is \\\"what happens next\\\", draw a flowchart; if it is \\\"which service calls which\\\", draw a sequence diagram.\"}]]}],[\"$\",\"details\",\"How many steps can one flowchart hold before it stops being useful?\",{\"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 steps can one flowchart hold before it stops being useful?\"}],\"$L4c\"]}],\"$L4d\",\"$L4e\"]}]]}]\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\",\"flowchart-from-text\",{\"href\":\"/flowchart-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 flowchart 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 process, get Mermaid.\"}]]}],[\"$\",\"$L17\",\"state-diagram-from-text\",{\"href\":\"/state-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\":\"State diagram generator\"}],[\"$\",\"span\",null,{\"className\":\"mt-1 block text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"When the question is \\\"what state is it in\\\" rather than \\\"what happens next\\\".\"}]]}],[\"$\",\"$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\":\"Sequence diagram generator\"}],[\"$\",\"span\",null,{\"className\":\"mt-1 block text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"For flows where who calls whom matters more than the order of steps.\"}]]}],[\"$\",\"$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 same idea for structure: 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,"47:[\"$\",\"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\":\"{...}\"}]\n48:[\"$\",\"div\",null,{\"className\":\"mt-3\",\"children\":[\"$\",\"$L46\",null,{\"code\":\"flowchart TD\\n check{In stock?}\\n ship[Ship today]\\n backorder[Backorder]\\n check --\u003e|Yes| ship\\n check --\u003e|No| backorder\",\"label\":\"Decision\",\"heightClass\":\"h-32\"}]}]\n49:[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"A diamond asks a yes/no question. Phrase it as a question, and give every outgoing arrow a label; an unlabelled fork is the single most common reason a flowchart gets misread.\"}]\n4a:[\"$\",\"div\",\"label\",{\"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\":\"Labelled edge\"}],[\"$\",\"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|text|\"}]]}],[\"$\",\"div\",null,{\"className\":\"mt-3\",\"children\":[\"$\",\"$L46\",null,{\"code\":\"flowchart TD\\n review{Approved?}\\n publish[Publish]\\n revise[Send back to author]\\n review --\u003e|Yes| publish\\n review --\u003e|No| revise\\n revise --\u003e review\",\"label\":\"Labelled edge\",\"heightClass\":\"h-32\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"Text between pipes rides on the arrow. Use it for branch conditions and for loop-backs, where the label explains why the flow goes backwards.\"}]]}]\n4b:[\"$\",\"div\",\"merge\",{\"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\":\"Merge\"}],[\"$\",\"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\":\"a --\u003e c\"}]]}],[\"$\",\"div\",null,{\"className\":\"mt-3\",\"children\":[\"$\",\"$L46\",null,{\"code\":\"flowchart TD\\n card[Pay by card]\\n transfer[Pay by transfer]\\n confirm[Confirm order]\\n card --\u003e confirm\\n transfer --\u003e confirm\",\"label\":\"Merge\",\"heightClass\":\"h-32\"}]}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"Several arrows can point at the same node. Merging branches back together keeps the diagram from splitting into parallel columns that never meet.\"}]]}]\n4c:[\"$\",\"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 roughly twenty nodes people stop tracing arrows. Pull a self-contained stretch into its own diagram and link to it from the parent â several focused pictures beat one wall chart. The templates here sit deliberately just under that line.\"}]\n4d:[\"$\",\"details\",\"Do I need to label every branch?\",{\"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\":\"Do I
1need to label every branch?\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\",\"children\":\"Yes, on every arrow leaving a decision. An unlabelled fork is the most common reason a flowchart gets misread: the reader guesses which side is \\\"yes\\\", guesses wrong, and implements the inverse. Every decision in these templates has both outgoing arrows labelled.\"}]]}]\n4e:[\"$\",\"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,"])</script>
1<script>self.__next_f.push([1," and the raw Mermaid source. SVG stays sharp at any zoom, which matters for long flows; 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,"4f: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\":\"Flowchart Templates â Import \u0026 Edit by Chat | VizText\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Eight ready-made flowchart templates: sign-up, checkout, CI/CD, refunds, incident response 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/flowchart-template\"}],[\"$\",\"link\",\"3\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://viztext.com/flowchart-template\"}],[\"$\",\"link\",\"4\",{\"rel\":\"alternate\",\"hrefLang\":\"zh\",\"href\":\"https://viztext.com/zh/flowchart-template\"}],[\"$\",\"link\",\"5\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://viztext.com/flowchart-template\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:title\",\"content\":\"Flowchart Templates â Import \u0026 Edit by Chat | VizText\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:description\",\"content\":\"Eight ready-made flowchart templates: sign-up, checkout, CI/CD, refunds, incident response 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/flowchart-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\":\"Flowchart Templates â Import \u0026 Edit by Chat | VizText\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:description\",\"content\":\"Eight ready-made flowchart templates: sign-up, checkout, CI/CD, refunds, incident response 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\"}],[\"$\",\"$L4f\",\"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.