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="preload" as="image" href="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1216603&theme=light&t=1786074863333"/><link rel="preload" as="image" href="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1216603&theme=dark&t=1786074863333"/><link rel="preload" href="https://findly.tools/badges/findly-tools-badge-light.svg" as="image"/><link rel="preload" href="https://media.theresanaiforthat.com/featured-on-taaft.png?width=600" as="image"/><link rel="preload" href="https://aidirs.org/badges/badge-listed-dark.svg" as="image"/><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/3mzusch06t-8r.js" async=""></script>
1<script src="/_next/static/chunks/0l7i004z-m9hh.js" async=""></script>
1<script src="/_next/static/chunks/21_s6r9tsfv_0.js" async=""></script>
1<script src="/_next/static/chunks/0v9-5l57ry184.js" async=""></script>
1<script src="/_next/static/chunks/20b7-8vqxw1sc.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>VizText â AI Diagram Generator from Prompt or Chat</title><meta name="description" content="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."/><link rel="canonical" href="https://viztext.com"/><link rel="alternate" hrefLang="en" href="https://viztext.com"/><link rel="alternate" hrefLang="zh" href="https://viztext.com/zh"/><link rel="alternate" hrefLang="x-default" href="https://viztext.com"/><meta property="og:title" content="VizText â AI Diagram Generator from Prompt or Chat"/><meta property="og:description" content="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."/><meta property="og:url" content="https://viztext.com"/><meta property="og:site_name" content="VizText"/><meta property="og:locale" content="en_US"/><meta property="og:image" content="https://viztext.com/opengraph-image?8bd97b12cd902aa7"/><meta property="og:image:type" content="image/png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="VizText â AI Diagram Generator from Prompt or Chat"/><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="VizText â AI Diagram Generator from Prompt or Chat"/><meta name="twitter:description" content="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."/><meta name="twitter:image" content="https://viztext.com/opengraph-image?8bd97b12cd902aa7"/><meta name="twitter:image:alt" content="VizText â AI Diagram Generator from Prompt or Chat"/><meta name="twitter:image:type" content="image/png"/><meta name="twitter:image:width" content="1200"/><meta name="twitter:image:height" content="630"/><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":"WebApplication","name":"VizText","description":"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.","url":"https://viztext.com/","applicationCategory":"DesignApplication","operatingSystem":"Any (web-based)","inLanguage":"en","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}</script>
1<script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How the AI diagram generator works","description":"Describe a diagram in plain text, let AI pick the type and render it, then edit and export as SVG, PNG, Markdown or OPML.","inLanguage":"en","totalTime":"PT1M","supply":[],"tool":[{"@type":"HowToTool","name":"VizText"}],"step":[{"@type":"HowToStep","position":1,"name":"1. Describe your diagram â one sentence or a chat","text":"Write what you want in one or two 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.","url":"https://viztext.com/#step-1"},{"@type":"HowToStep","position":2,"name":"2. AI clarifies intent â then picks the right diagram type","text":"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.","url":"https://viztext.com/#step-2"},{"@type":"HowToStep","position":3,"name":"3. Get a rendered diagram â review and adjust","text":"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.","url":"https://viztext.com/#step-3"},{"@type":"HowToStep","position":4,"name":"4. Edit and export","text":"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.","url":"https://viztext.com/#step-4"}]}</script>
1<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","inLanguage":"en","mainEntity":[{"@type":"Question","name":"Is VizText really free?","acceptedAnswer":{"@type":"Answer","text":"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."}},{"@type":"Question","name":"What diagram types does the AI generator support?","acceptedAnswer":{"@type":"Answer","text":"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."}},{"@type":"Question","name":"Do I need to know Mermaid syntax?","acceptedAnswer":{"@type":"Answer","text":"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."}},{"@type":"Question","name":"What is the difference between Quick mode and Chat mode?","acceptedA
1nswer":{"@type":"Answer","text":"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."}},{"@type":"Question","name":"How many questions does Chat mode ask before drawing?","acceptedAnswer":{"@type":"Answer","text":"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."}},{"@type":"Question","name":"Can I skip the questions and just generate?","acceptedAnswer":{"@type":"Answer","text":"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."}},{"@type":"Question","name":"What if AI adds elements I did not ask for?","acceptedA
1nswer":{"@type":"Answer","text":"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."}},{"@type":"Question","name":"Can I edit the generated diagram?","acceptedAnswer":{"@type":"Answer","text":"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."}},{"@type":"Question","name":"How do I export the diagram?","acceptedAnswer":{"@type":"Answer","text":"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."}},{"@type":"Question","name":"Does it support Chinese input?","acceptedA
1nswer":{"@type":"Answer","text":"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."}},{"@type":"Question","name":"Is there a rate limit?","acceptedAnswer":{"@type":"Answer","text":"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."}},{"@type":"Question","name":"Is my prompt data stored?","acceptedAnswer":{"@type":"Answer","text":"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."}}]}</script>
1<div class="flex flex-col min-h-screen bg-gradient-to-b from-zinc-50 to-white dark:from-zinc-950 dark:to-zinc-950 text-zinc-900 dark:text-zinc-100"><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$--><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>
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-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="/">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">䏿</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><section class="w-full max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 pt-10 pb-8 sm:pt-14 text-center"><p class="text-base sm:text-lg text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto">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.</p><h1 class="mt-4 text-4xl sm:text-6xl font-bold tracking-tight text-zinc-900 dark:text-white"><span class="bg-gradient-to-r from-violet-500 via-purple-500 to-pink-500 bg-clip-text text-transparent">AI Diagram Generator â from Prompt or Chat</span></h1><div class="mt-8 flex flex-wrap gap-2 justify-center"><span class="sr-only">Try:</span><button class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-700 hover:text-zinc-900 dark:hover:text-white transition-colors "><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket text-violet-500 dark:text-violet-400" aria-hidden="true"><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09"></path><path d="M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z"></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05"></path></svg><span>Product launch mindmap</span></button><button class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-700 hover:text-zinc-900 dark:hover:text-white transition-colors "><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock text-violet-500 dark:text-violet-400" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg><span>Login flow with 2FA</span></button><button class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-700 hover:text-zinc-900 dark:hover:text-white transition-colors "><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-branch text-violet-500 dark: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><span>OAuth handshake</span></button><button class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-700 hover:text-zinc-900 dark:hover:text-white transition-colors hidden sm:inline-flex"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-database text-violet-500 dark:text-violet-400" aria-hidden="true"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M3 5V19A9 3 0 0 0 21 19V5"></path><path d="M3 12A9 3 0 0 0 21 12"></path></svg><span>Blog schema ERD</span></button><button class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-700 hover:text-zinc-900 dark:hover:text-white transition-colors hidden sm:inline-flex"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-workflow text-violet-500 dark:text-violet-400" aria-hidden="true"><rect width="8" height="8" x="3" y="3" rx="2"></rect><path d="M7 11v4a2 2 0 0 0 2 2h4"></path><rect width="8" height="8" x="13" y="13" rx="2"></rect></svg><span>CI/CD pipeline</span></button></div></section><main class="flex-1 w-full pb-12"><div class="max-w-[clamp(320px,96vw,1600px)] mx-auto px-4"><ol class="mb-4 flex flex-col gap-3 rounded-xl border border-zinc-200 bg-zinc-50/60 px-4 py-3 dark:border-zinc-800 dark:bg-zinc-900/40 sm:flex-row sm:items-start sm:gap-6"><li class="flex flex-1 items-start gap-2.5"><span aria-hidden="true" class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-violet-100 text-[11px] font-semibold tabular-nums text-violet-700 dark:bg-violet-500/15 dark:text-violet-300">1</span><span class="min-w-0"><span class="block text-sm font-medium leading-5 text-zinc-900 dark:text-zinc-100">Describe it</span><span class="block text-xs leading-5 text-zinc-500 dark:text-zinc-400">Plain English. No diagram syntax, no type to pick first.</span></span></li><li class="flex flex-1 items-start gap-2.5"><span aria-hidden="true" class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-violet-100 text-[11px] font-semibold tabular-nums text-violet-700 dark:bg-violet-500/15 dark:text-violet-300">2</span><span class="min-w-0"><span class="block text-sm font-medium leading-5 text-zinc-900 dark:text-zinc-100">Get the diagram</span><span class="block text-xs leading-5 text-zinc-500 dark:text-zinc-400">Editable code on the left, live preview on the right â tweak either.</sp
1an></span></li><li class="flex flex-1 items-start gap-2.5"><span aria-hidden="true" class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-violet-100 text-[11px] font-semibold tabular-nums text-violet-700 dark:bg-violet-500/15 dark:text-violet-300">3</span><span class="min-w-0"><span class="block text-sm font-medium leading-5 text-zinc-900 dark:text-zinc-100">Export</span><span class="block text-xs leading-5 text-zinc-500 dark:text-zinc-400">SVG, PNG, or copy the Mermaid code into your docs.</span></span></li></ol><div class="grid grid-cols-1 lg:grid-cols-[minmax(320px,440px)_1fr] gap-6"><aside class="rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm overflow-hidden flex flex-col h-[80vh] lg:h-[calc(100vh-8rem)] min-h-[600px]"><div class="p-5 flex-shrink-0"><div class="w-full"><div class="mb-2 flex items-center justify-between gap-2"><span class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Diagram type</span></div><div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5 animate-pulse" style="animation-iteration-count:1"><button class="flex flex-col items-center gap-1.5 py-2.5 px-3 rounded-xl border transition-colors bg-gradient-to-br from-violet-500 to-purple-500 border-transparent text-white shadow-sm" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg><span class="text-xs font-medium">Auto-detect</span></button><button class="flex flex-col items-center gap-1.5 py-2.5 px-3 rounded-xl border transition-colors bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-700 dark:text-zinc-300 hover:border-zinc-300 dark:hover:border-zinc-700" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-branch" 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><span class="text-xs font-medium">Flowchart</span></button><button class="flex flex-col items-center gap-1.5 py-2.5 px-3 rounded-xl border transition-colors bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-700 dark:text-zinc-300 hover:border-zinc-300 dark:hover:border-zinc-700" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left-right" aria-hidden="true"><path d="M8 3 4 7l4 4"></path><path d="M4 7h16"></path><path d="m16 21 4-4-4-4"></path><path d="M20 17H4"></path></svg><span class="text-xs font-medium">Sequence</span></button><button class="flex flex-col items-center gap-1.5 py-2.5 px-3 rounded-xl border transition-colors bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-700 dark:text-zinc-300 hover:border-zinc-300 dark:hover:border-zinc-700" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-database" aria-hidden="true"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M3 5V19A9 3 0 0 0 21 19V5"></path><path d="M3 12A9 3 0 0 0 21 12"></path></svg><span class="text-xs font-medium">ERD</span></button><button class="flex flex-col items-center gap-1.5 py-2.5 px-3 rounded-xl border transition-colors bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-700 dark:text-zinc-300 hover:border-zinc-300 dark:hover:border-zinc-700" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-dot" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="1"></circle></svg><span class="text-xs font-medium">State</span></button><button class="flex flex-col items-center gap-1.5 py-2.5 px-3 rounded-xl border transition-colors bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-700 dark:text-zinc-300 hover:border-zinc-300 dark:hover:border-zinc-700" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-box" 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><span class="text-xs font-medium">Class</span></button><button class="flex flex-col items-center gap-1.5 py-2.5 px-3 rounded-xl border transition-colors bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-700 dark:text-zinc-300 hover:border-zinc-300 dark:hover:border-zinc-700" title="Opens the interactive mindmap tool â" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-network" aria-hidden="true"><rect x="16" y="16" width="6" height="6" rx="1"></rect><rect x="2" y="16" width="6" height="6" rx="1"></rect><rect x="9" y="2" width="6" height="6" rx="1"></rect><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"></path><path d="M12 12V8"></path></svg><span class="text-xs font-medium">Mindmap</span></button><button class="flex flex-col items-center gap-1.5 py-2.5 px-3 rounded-xl border transition-colors bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-700 dark:text-zinc-300 hover:border-zinc-300 dark:hover:border-zinc-700" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-no-axes-gantt" aria-hidden="true"><path d="M6 5h12"></path><path d="M4 12h10"></path><path d="M12 19h8"></path></svg><span class="text-xs font-medium">Gantt</span></button><button class="flex flex-col items-center gap-1.5 py-2.5 px-3 rounded-xl border transition-colors bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-700 dark:text-zinc-300 hover:border-zinc-300 dark:hover:border-zinc-700" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-template" aria-hidden="true"><rect width="18" height="7" x="3" y="3" rx="1"></rect><rect width="9" height="7" x="3" y="14" rx="1"></rect><rect width="5" height="7" x="16" y="14" rx="1"></rect></svg><span class="text-xs font-medium">Arch</span></button></div></div></div><div class="border-t border-zinc-200 dark:border-zinc-800 p-5 flex-1 flex flex-col min-h-0 gap-4"><div class="flex items-center gap-1 rounded-lg bg-zinc-100 p-1 dark:bg-zinc-800 self-start"><button type="button" class="rounded-md px-3 py-1.5 text-sm font-medium transition-colors bg-white text-zinc-900 shadow-sm dark:bg-zinc-950 dark:text-zinc-100">
1Quick<span class="ml-1.5 rounded bg-violet-100 px-1.5 py-0.5 text-[10px] font-semibold text-violet-700 dark:bg-violet-950 dark:text-violet-300">Free</span></button><button type="button" class="rounded-md px-3 py-1.5 text-sm font-medium transition-colors text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100">Chat<span class="ml-1.5 inline-flex items-center gap-0.5 rounded bg-violet-50 px-1.5 py-0.5 text-[10px] font-semibold text-violet-600 dark:bg-violet-950 dark:text-violet-400">Limited free</span></button></div><div class="flex-1 flex flex-col min-h-0"><div class="flex flex-col gap-2 flex-1 min-h-0"><div class="flex flex-col gap-3 flex-1 min-h-0"><div class="flex items-center justify-between"><label class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Prompt:</label><button class="text-[10px] text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-400 transition-colors" title="â´ Collapse">â´ Collapse</button></div><div class="relative flex-1 min-h-0 flex"><textarea placeholder="Describe a diagram â e.g. 'login flow with 2FA' or 'ERD for blog with users and posts'." class="w-full flex-1 px-3 py-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 text-sm text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 outline-none focus:ring-2 focus:ring-violet-500 focus:border-violet-500 resize-none font-sans leading-6" maxLength="2000"></textarea><span class="absolute bottom-2 right-3 text-[10px] tabular-nums text-zinc-400 dark:text-zinc-600 pointer-events-none select-none">0<!-- --> / 2000</span></div><div class="flex flex-wrap items-center justify-between gap-x-3 gap-y-1 text-[10px] text-zinc-400 dark:text-zinc-600 leading-none"><span class="text-[11px] text-zinc-500 dark:text-zinc-400">No need to pick a type first â just write, we detect it.</span><span class="hidden sm:inline">â/Ctrl + Enter to generate</span><span class="sm:hidden">Tap Generate â</span></div><div class="flex items-center justify-between gap-3 shrink-0"><div class="inline-flex items-stretch rounded-md border border-zinc-200 dark:border-zinc-800 overflow-hidden"><button class="px-3 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors" title="Editor only" aria-pressed="false">Text</button><button class="px-3 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors" title="Editor + Preview" aria-pressed="false">Split</button><button class="px-3 py-1.5 text-xs font-medium bg-violet-600 text-white" title="Preview only" aria-pressed="true">Preview</button></div><button disabled="" class="inline-flex items-center justify-center gap-1.5 min-w-[7.5rem] px-4 py-2 rounded-lg bg-violet-600 text-white text-sm font-medium hover:bg-violet-700 disabled:bg-zinc-200 dark:disabled:bg-zinc-800 disabled:text-zinc-400 dark:disabled:text-zinc-600 disabled:cursor-not-allowed transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg>Generate</button></div></div></div></div></div></aside><section class="lg:min-h-[600px] rounded-2xl border border-zinc-200 dark:border-zinc-800 overflow-hidden shadow-sm bg-white dark:bg-zinc-900 scroll-mt-4"><div class="flex flex-col sm:flex-row min-h-[70vh] lg:min-h-[600px]"><div class="flex-1 min-w-0 min-h-[60vh] sm:min-h-0"><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><div class="w-full h-full min-h-[60vh] bg-transparent" aria-hidden="true"></div><!--/$--></div></div></section></div><div class="mt-8 flex justify-center"><a href="https://www.producthunt.com/products/text2mermaid?embed=true&utm_source=badge-featured&utm_medium=badge&utm_campaign=badge-text2diagram" target="_blank" rel="noopener noreferrer" class="inline-block transition-opacity hover:opacity-80"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1216603&theme=light&t=1786074863333" alt="VizText - AI Diagram Generator â from Prompt or Chat | Product Hunt" width="250" height="54" class="dark:hidden"/><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1216603&theme=dark&t=1786074863333" alt="VizText - AI Diagram Generator â from Prompt or Chat | Product Hunt" width="250" height="54" class="hidden dark:block"/></a></div></div></main></div><div class="w-full bg-gradient-to-b from-white to-zinc-50 dark:from-zinc-950 dark:to-zinc-950"><section aria-labelledby="home-seo-how-it-works" class="max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 py-12 sm:py-16"><h2 id="home-seo-how-it-works" class="text-2xl sm:text-3xl font-semibold text-zinc-900 dark:text-white mb-8">How the AI diagram generator works</h2><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"><div class="p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm"><div class="w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dar
1k:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400 mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-type" aria-hidden="true"><path d="M12 4v16"></path><path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"></path><path d="M9 20h6"></path></svg></div><h3 class="text-base font-semibold text-zinc-900 dark:text-white">1. Describe your diagram â one sentence or a chat</h3><p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">Write what you want in one or two 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.</p></div><div class="p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm"><div class="w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dark:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400 mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle></svg></div><h3 class="text-base font-semibold text-zinc-900 dark:text-white">2. AI clarifies intent â then picks the right diagram type</h3><p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</p></div><div class="p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm"><div class="w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dark:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400 mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg></div><h3 class="text-base font-semibold text-zinc-900 dark:text-white">3. Get a rendered diagram â review and adjust</h3><p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</p></div><div class="p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm"><div class="w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dark:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400 mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download" aria-hidden="true"><path d="M12 15V3"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><path d="m7 10 5 5 5-5"></path></svg></div><h3 class="text-base font-semibold text-zinc-900 dark:text-white">4. Edit and export</h3><p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</p></div></div></section><section aria-labelledby="home-seo-use-cases" class="max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 py-12 sm:py-16"><h2 id="home-seo-use-cases" class="text-2xl sm:text-3xl font-semibold text-zinc-900 dark:text-white mb-4">What people use the diagram generator for</h2><p class="text-sm sm:text-base text-zinc-600 dark:text-zinc-400 leading-relaxed max-w-3xl mb-8">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.</p><ul class="space-y-4"><li><a class="flex gap-4 p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm hover:shadow-md hover:border-violet-300 dark:hover:border-violet-500/50 transition-all" href="/flowchart-from-text"><div class="flex-shrink-0 w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dar
1k:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-branch" 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></div><div class="flex-1 min-w-0"><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Flowcharts from plain English</h3><p class="mt-1.5 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</p></div></a></li><li><a class="flex gap-4 p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm hover:shadow-md hover:border-violet-300 dark:hover:border-violet-500/50 transition-all" href="/sequence-diagram-from-text"><div class="flex-shrink-0 w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dark:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left-right" aria-hidden="true"><path d="M8 3 4 7l4 4"></path><path d="M4 7h16"></path><path d="m16 21 4-4-4-4"></path><path d="M20 17H4"></path></svg></div><div class="flex-1 min-w-0"><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Sequence diagrams for API interactions</h3><p class="mt-1.5 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</p></div></a></li><li><a class="flex gap-4 p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm hover:shadow-md hover:border-violet-300 dark:hover:border-violet-500/50 transition-all" href="/erd-from-text"><div class="flex-shrink-0 w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dark:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-database" aria-hidden="true"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M3 5V19A9 3 0 0 0 21 19V5"></path><path d="M3 12A9 3 0 0 0 21 12"></path></svg></div><div class="flex-1 min-w-0"><h3 class="text-base font-semibold text-zinc-900 dark:text-white">ERD for database schema design</h3><p class="mt-1.5 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</p></div></a></li><li><a class="flex gap-4 p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm hover:shadow-md hover:border-violet-300 dark:hover:border-violet-500/50 transition-all" href="/mindmap-from-text"><div class="flex-shrink-0 w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dark:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-network" aria-hidden="true"><rect x="16" y="16" width="6" height="6" rx="1"></rect><rect x="2" y="16" width="6" height="6" rx="1"></rect><rect x="9" y="2" width="6" height="6" rx="1"></rect><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"></path><path d="M12 12V8"></path></svg></div><div class="flex-1 min-w-0"><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Mindmaps for planning and study notes</h3><p class="mt-1.5 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</p></div></a></li><li><a class="flex gap-4 p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm hover:shadow-md hover:border-violet-300 dark:hover:border-violet-500/50 transition-all" href="/state-diagram-from-text"><div class="flex-shrink-0 w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dar
1k:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-dot" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="1"></circle></svg></div><div class="flex-1 min-w-0"><h3 class="text-base font-semibold text-zinc-900 dark:text-white">State diagrams for lifecycle modeling</h3><p class="mt-1.5 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</p></div></a></li><li><a class="flex gap-4 p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm hover:shadow-md hover:border-violet-300 dark:hover:border-violet-500/50 transition-all" href="/class-diagram-from-text"><div class="flex-shrink-0 w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dark:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-box" 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></div><div class="flex-1 min-w-0"><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Class diagrams for OO design</h3><p class="mt-1.5 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</p></div></a></li><li><a class="flex gap-4 p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm hover:shadow-md hover:border-violet-300 dark:hover:border-violet-500/50 transition-all" href="/gantt-from-text"><div class="flex-shrink-0 w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dark:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-workflow" aria-hidden="true"><rect width="8" height="8" x="3" y="3" rx="2"></rect><path d="M7 11v4a2 2 0 0 0 2 2h4"></path><rect width="8" height="8" x="13" y="13" rx="2"></rect></svg></div><div class="flex-1 min-w-0"><h3 class="text-base font-semibold text-zinc-900 dark:text-white">Gantt charts for project timelines</h3><p class="mt-1.5 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</p></div></a></li></ul></section><section aria-labelledby="home-seo-faq" class="max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 py-12 sm:py-16"><h2 id="home-seo-faq" class="text-2xl sm:text-3xl font-semibold text-zinc-900 dark:text-white mb-4">Frequently asked questions</h2><p class="text-sm sm:text-base text-zinc-600 dark:text-zinc-400 leading-relaxed max-w-3xl mb-8">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.</p><ul class="space-y-3"><li><details class="group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:sha
1dow-md transition-shadow"><summary class="cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors"><span class="flex-1">Is VizText really free?</span><span aria-hidden="true" class="flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45">+</span></summary><div class="px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</div></details></li><li><details class="group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow"><summary class="cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors"><span class="flex-1">What diagram types does the AI generator support?</span><span aria-hidden="true" class="flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45">+</span></summary><div class="px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</div></details></li><li><details class="group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow"><summary class="cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors"><span class="flex-1">Do I need to know Mermaid syntax?</span><span aria-hidden="true" class="flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45">+</span></summary><div class="px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</div></details></li><li><details class="group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow"><summary class="cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors"><span class="flex-1">What is the difference between Quick mode and Chat mode?</span><span aria-hidden="true" class="flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45">+</span></summary><div class="px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</div></details></li><li>
1<details class="group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow"><summary class="cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors"><span class="flex-1">How many questions does Chat mode ask before drawing?</span><span aria-hidden="true" class="flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45">+</span></summary><div class="px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</div></details></li><li><details class="group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow"><summary class="cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors"><span class="flex-1">Can I skip the questions and just generate?</span><span aria-hidden="true" class="flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45">+</span></summary><div class="px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</div></details></li><li><details class="group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow"><summary class="cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors"><span class="flex-1">What if AI adds elements I did not ask for?</span><span aria-hidden="true" class="flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45">+</span></summary><div class="px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</div></details></li><li><details class="group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow"><summary class="cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors"><span class="flex-1">Can I edit the generated diagram?</span><span aria-hidden="true" class="flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45">+</span></summary><div class="px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</div></details></li><li>
1<details class="group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow"><summary class="cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors"><span class="flex-1">How do I export the diagram?</span><span aria-hidden="true" class="flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45">+</span></summary><div class="px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</div></details></li><li><details class="group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow"><summary class="cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors"><span class="flex-1">Does it support Chinese input?</span><span aria-hidden="true" class="flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45">+</span></summary><div class="px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</div></details></li><li><details class="group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow"><summary class="cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors"><span class="flex-1">Is there a rate limit?</span><span aria-hidden="true" class="flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45">+</span></summary><div class="px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</div></details></li><li><details class="group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow"><summary class="cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors"><span class="flex-1">Is my prompt data stored?</span><span aria-hidden="true" class="flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45">+</span></summary><div class="px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">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.</div></details></li></ul></section></div><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">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.</p><div class="mt-4 flex flex-wrap items-center gap-3"><a href="https://www.producthunt.com/products/text2mermaid?embed=true&utm_source=badge-featured&utm_medium=badge&utm_campaign=badge-text2diagram" target="_blank" rel="noopener noreferrer" class="inline-block transition-opacity hover:opacity-80"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1216603&theme=light&t=1786074863333" alt="VizText - AI Diagram Generator â from Prompt or Chat | Product Hunt" width="250" height="54" class="dark:hidden"/><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1216603&theme=dark&t=1786074863333" alt="VizText - AI Diagram Generator â from Prompt or Chat | Product Hunt" width="250" height="54" class="hidden dark:block"/></a><a href="https://findly.tools/viztext?utm_source=viztext" target="_blank" rel="noopener noreferrer" class="inline-block transition-opacity hover:opacity-80"><img src="https://findly.tools/badges/findly-tools-badge-light.svg" alt="Featured on Findly.tools" width="175" height="55"/></a><a href="https://smollaunch.com" target="_blank" rel="noopener" class="inline-block transition-opacity hover:opacity-80"><img src="https://smollaunch.com/badges/featured.svg" alt="VizText â Featured on Smol Launch" loading="lazy" width="250" height="60"/></a><a href="https://theresanaiforthat.com/ai/text2diagram/?ref=featured&v=11895154" target="_blank" rel="noopener noreferrer nofollow" class="inline-block transition-opacity hover:opacity-80"><img src="https://media.theresanaiforthat.com/featured-on-taaft.png?width=600" alt="VizText - Featured on There's An AI For That" width="300" height="75"/></a><a href="https://aidirs.org/item/text2diagram-ai" target="_blank" rel="noopener noreferrer" class="hidden" aria-hidden="true"><img src="https://aidirs.org/badges/badge-listed-dark.svg" alt="Listed on AIDirs" class="h-11 w-auto"/></a><a href="https://frogdr.com/viztext.com" target="_blank" rel="noopener noreferrer" class="text-xs text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white transition-colors">DR monitored by FrogDR</a></div></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\"]\n16: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:T79c,"])</script>
1<script>self.__next_f.push([1,"{\"@context\":\"https://schema.org\",\"@type\":\"HowTo\",\"name\":\"How the AI diagram generator works\",\"description\":\"Describe a diagram in plain text, let AI pick the type and render it, then edit and export as SVG, PNG, Markdown or OPML.\",\"inLanguage\":\"en\",\"totalTime\":\"PT1M\",\"supply\":[],\"tool\":[{\"@type\":\"HowToTool\",\"name\":\"VizText\"}],\"step\":[{\"@type\":\"HowToStep\",\"position\":1,\"name\":\"1. Describe your diagram â one sentence or a chat\",\"text\":\"Write what you want in one or two 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.\",\"url\":\"https://viztext.com/#step-1\"},{\"@type\":\"HowToStep\",\"position\":2,\"name\":\"2. AI clarifies intent â then picks the right diagram type\",\"text\":\"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.\",\"url\":\"https://viztext.com/#step-2\"},{\"@type\":\"HowToStep\",\"position\":3,\"name\":\"3. Get a rendered diagram â review and adjust\",\"text\":\"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.\",\"url\":\"https://viztext.com/#step-3\"},{\"@type\":\"HowToStep\",\"position\":4,\"name\":\"4. Edit and export\",\"text\":\"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.\",\"url\":\"https://viztext.com/#step-4\"}]}"])</script>
1<script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"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\":[[[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebApplication\\\",\\\"name\\\":\\\"VizText\\\",\\\"description\\\":\\\"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.\\\",\\\"url\\\":\\\"https://viztext.com/\\\",\\\"applicationCategory\\\":\\\"DesignApplication\\\",\\\"o
1peratingSystem\\\":\\\"Any (web-based)\\\",\\\"inLanguage\\\":\\\"en\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":\\\"0\\\",\\\"priceCurrency\\\":\\\"USD\\\"}}\"}}],[\"$\",\"script\",\"1\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$a\"}}],\"$Lb\"],\"$Lc\",\"$Ld\",\"$Le\"],[\"$Lf\",\"$L10\",\"$L11\",\"$L12\",\"$L13\"],\"$L14\"]}],{},null,false,null]},null,false,null],\"$L15\",false]],\"m\":\"$undefined\",\"G\":[\"$16\",[\"$L17\"]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"oKHaYynEdul9mjab8o1oB\"}\n"])</script>
1<script>self.__next_f.push([1,"19:I[20261,[\"/_next/static/chunks/405rlzg65uo7z.js\",\"/_next/static/chunks/3peschsa_l2ll.js\",\"/_next/static/chunks/3mzusch06t-8r.js\",\"/_next/static/chunks/0l7i004z-m9hh.js\",\"/_next/static/chunks/21_s6r9tsfv_0.js\",\"/_next/static/chunks/0v9-5l57ry184.js\",\"/_next/static/chunks/20b7-8vqxw1sc.js\"],\"default\"]\n1a:I[51701,[\"/_next/static/chunks/405rlzg65uo7z.js\",\"/_next/static/chunks/3peschsa_l2ll.js\",\"/_next/static/chunks/3mzusch06t-8r.js\",\"/_next/static/chunks/0l7i004z-m9hh.js\",\"/_next/static/chunks/21_s6r9tsfv_0.js\",\"/_next/static/chunks/0v9-5l57ry184.js\",\"/_next/static/chunks/20b7-8vqxw1sc.js\"],\"default\"]\n20:I[37456,[\"/_next/static/chunks/405rlzg65uo7z.js\",\"/_next/static/chunks/3peschsa_l2ll.js\",\"/_next/static/chunks/3mzusch06t-8r.js\",\"/_next/static/chunks/0l7i004z-m9hh.js\",\"/_next/static/chunks/21_s6r9tsfv_0.js\",\"/_next/static/chunks/0v9-5l57ry184.js\",\"/_next/static/chunks/20b7-8vqxw1sc.js\"],\"\"]\n21:I[73262,[\"/_next/static/chunks/405rlzg65uo7z.js\",\"/_next/static/chunks/3peschsa_l2ll.js\",\"/_next/static/chunks/3mzusch06t-8r.js\",\"/_next/static/chunks/0l7i004z-m9hh.js\",\"/_next/static/chunks/21_s6r9tsfv_0.js\",\"/_next/static/chunks/0v9-5l57ry184.js\",\"/_next/static/chunks/20b7-8vqxw1sc.js\"],\"default\"]\n2a:I[23210,[\"/_next/static/chunks/3u2c5pk4fxsmt.js\",\"/_next/static/chunks/3t6e4rue2il0k.js\"],\"OutletBoundary\"]\n2b:\"$Sreact.suspense\"\n2d:I[23210,[\"/_next/static/chunks/3u2c5pk4fxsmt.js\",\"/_next/static/chunks/3t6e4rue2il0k.js\"],\"ViewportBoundary\"]\n2f:I[23210,[\"/_next/static/chunks/3u2c5pk4fxsmt.js\",\"/_next/static/chunks/3t6e4rue2il0k.js\"],\"MetadataBoundary\"]\n:HL[\"https://findly.tools/badges/findly-tools-badge-light.svg\",\"image\"]\n:HL[\"https://media.theresanaiforthat.com/featured-on-taaft.png?width=600\",\"image\"]\n:HL[\"https://aidirs.org/badges/badge-listed-dark.svg\",\"image\"]\n18:T13c9,"])</script>
1<script>self.__next_f.push([1,"{\"@context\":\"https://schema.org\",\"@type\":\"FAQPage\",\"inLanguage\":\"en\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"Is VizText really free?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"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.\"}},{\"@type\":\"Question\",\"name\":\"What diagram types does the AI generator support?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"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.\"}},{\"@type\":\"Question\",\"name\":\"Do I need to know Mermaid syntax?\",\"acceptedA
1nswer\":{\"@type\":\"Answer\",\"text\":\"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.\"}},{\"@type\":\"Question\",\"name\":\"What is the difference between Quick mode and Chat mode?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"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.\"}},{\"@type\":\"Question\",\"name\":\"How many questions does Chat mode ask before drawing?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"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.\"}},{\"@type\":\"Question\",\"name\":\"Can I skip the questions and just generate?\",\"acceptedA
1nswer\":{\"@type\":\"Answer\",\"text\":\"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.\"}},{\"@type\":\"Question\",\"name\":\"What if AI adds elements I did not ask for?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"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.\"}},{\"@type\":\"Question\",\"name\":\"Can I edit the generated diagram?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"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.\"}},{\"@type\":\"Question\",\"name\":\"How do I export the diagram?\",\"acceptedA
1nswer\":{\"@type\":\"Answer\",\"text\":\"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.\"}},{\"@type\":\"Question\",\"name\":\"Does it support Chinese input?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"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.\"}},{\"@type\":\"Question\",\"name\":\"Is there a rate limit?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"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.\"}},{\"@type\":\"Question\",\"name\":\"Is my prompt data stored?\",\"acceptedA
1nswer\":{\"@type\":\"Answer\",\"text\":\"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.\"}}]}"])</script>
1<script>self.__next_f.push([1,"b:[\"$\",\"script\",\"2\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$18\"}}]\nc:[\"$\",\"$L19\",null,{\"locale\":\"en\"}]\n"])</script>
1<script>self.__next_f.push([1,"d:[\"$\",\"div\",null,{\"className\":\"w-full bg-gradient-to-b from-white to-zinc-50 dark:from-zinc-950 dark:to-zinc-950\",\"children\":[[\"$\",\"section\",null,{\"aria-labelledby\":\"home-seo-how-it-works\",\"className\":\"max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 py-12 sm:py-16\",\"children\":[[\"$\",\"h2\",null,{\"id\":\"home-seo-how-it-works\",\"className\":\"text-2xl sm:text-3xl font-semibold text-zinc-900 dark:text-white mb-8\",\"children\":\"How the AI diagram generator works\"}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\",\"children\":[[\"$\",\"div\",\"1. Describe your diagram â one sentence or a chat\",{\"className\":\"p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dark:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400 mb-4\",\"children\":[\"$\",\"$L1a\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M12 4v16\",\"key\":\"1654pz\"}],[\"path\",{\"d\":\"M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2\",\"key\":\"e0r10z\"}],[\"path\",{\"d\":\"M9 20h6\",\"key\":\"s66wpe\"}]],\"className\":\"lucide-type\",\"size\":20,\"aria-hidden\":true}]}],[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"1. Describe your diagram â one sentence or a chat\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"Write what you want in one or two 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.\"}]]}],[\"$\",\"div\",\"2. AI clarifies intent â then picks the right diagram type\",{\"className\":\"p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dark:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400 mb-4\",\"children\":[\"$\",\"$L1a\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"circle\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\",\"key\":\"1mglay\"}]],\"className\":\"lucide-circle\",\"size\":20,\"aria-hidden\":true}]}],[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"2. AI clarifies intent â then picks the right diagram type\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]]}],[\"$\",\"div\",\"3. Get a rendered diagram â review and adjust\",{\"className\":\"p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dark:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400 mb-4\",\"children\":[\"$\",\"$L1a\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z\",\"key\":\"1s2grr\"}],[\"path\",{\"d\":\"M20 2v4\",\"key\":\"1rf3ol\"}],[\"path\",{\"d\":\"M22 4h-4\",\"key\":\"gwowj6\"}],[\"circle\",{\"cx\":\"4\",\"cy\":\"20\",\"r\":\"2\",\"key\":\"6kqj1y\"}]],\"className\":\"lucide-sparkles\",\"size\":20,\"aria-hidden\":true}]}],\"$L1b\",\"$L1c\"]}],\"$L1d\"]}]]}],\"$L1e\",\"$L1f\"]}]\n"])</script>
1<script>self.__next_f.push([1,"e:[\"$\",\"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\":[[\"$\",\"$L20\",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\":\"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.\"}],[\"$\",\"div\",null,{\"className\":\"mt-4 flex flex-wrap items-center gap-3\",\"children\":[[\"$\",\"$L21\",null,{\"locale\":\"en\",\"placement\":\"footer\"}],[\"$\",\"a\",null,{\"href\":\"https://findly.tools/viztext?utm_source=viztext\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"inline-block transition-opacity hover:opacity-80\",\"children\":[\"$\",\"img\",null,{\"src\":\"https://findly.tools/badges/findly-tools-badge-light.svg\",\"alt\":\"Featured on Findly.tools\",\"width\":\"175\",\"height\":\"55\"}]}],[\"$\",\"a\",null,{\"href\":\"https://smollaunch.com\",\"target\":\"_blank\",\"rel\":\"noopener\",\"className\":\"inline-block transition-opacity hover:opacity-80\",\"children\":[\"$\",\"img\",null,{\"src\":\"https://smollaunch.com/badges/featured.svg\",\"alt\":\"VizText â Featured on Smol Launch\",\"loading\":\"lazy\",\"width\":\"250\",\"height\":\"60\"}]}],[\"$\",\"a\",null,{\"href\":\"https://theresanaiforthat.com/ai/text2diagram/?ref=featured\u0026v=11895154\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"className\":\"inline-block transition-opacity hover:opacity-80\",\"children\":[\"$\",\"img\",null,{\"src\":\"https://media.theresanaiforthat.com/featured-on-taaft.png?width=600\",\"alt\":\"VizText - Featured on There's An AI For That\",\"width\":\"300\",\"height\":\"75\"}]}],[\"$\",\"a\",null,{\"href\":\"https://aidirs.org/item/text2diagram-ai\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"hidden\",\"aria-hidden\":\"true\",\"children\":[\"$\",\"img\",null,{\"src\":\"https://aidirs.org/badges/badge-listed-dark.svg\",\"alt\":\"Listed on AIDirs\",\"className\":\"h-11 w-auto\"}]}],[\"$\",\"a\",null,{\"href\":\"https://frogdr.com/viztext.com\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-xs text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white transition-colors\",\"children\":\"DR monitored by FrogDR\"}]]}]]}],[\"$\",\"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\":[\"$\",\"$L20\",null,{\"href\":\"/\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Home\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Generator\"}]}],[[\"$\",\"li\",\"flowchart-template\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/flowchart-template\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Flowchart templates\"}]}],\"$L22\",\"$L23\",\"$L24\"],\"$L25\",\"$L26\"]}]]}],\"$L27\",\"$L28\"]}],\"$L29\"]}]\n"])</script>
1<script>self.__next_f.push([1,"f:[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/3mzusch06t-8r.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n10:[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0l7i004z-m9hh.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n11:[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/21_s6r9tsfv_0.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n12:[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/0v9-5l57ry184.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n13:[\"$\",\"script\",\"script-4\",{\"src\":\"/_next/static/chunks/20b7-8vqxw1sc.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n14:[\"$\",\"$L2a\",null,{\"children\":[\"$\",\"$2b\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@2c\"}]}]\n15:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L2d\",null,{\"children\":\"$L2e\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L2f\",null,{\"children\":[\"$\",\"$2b\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L30\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n17:[\"$\",\"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,"1b:[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"3. Get a rendered diagram â review and adjust\"}]\n1c:[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]\n1d:[\"$\",\"div\",\"4. Edit and export\",{\"className\":\"p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dark:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400 mb-4\",\"children\":[\"$\",\"$L1a\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M12 15V3\",\"key\":\"m9g1x1\"}],[\"path\",{\"d\":\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\",\"key\":\"ih7n3h\"}],[\"path\",{\"d\":\"m7 10 5 5 5-5\",\"key\":\"brsn70\"}]],\"className\":\"lucide-download\",\"size\":20,\"aria-hidden\":true}]}],[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"4. Edit and export\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]]}]\n"])</script>
1<script>self.__next_f.push([1,"1e:[\"$\",\"section\",null,{\"aria-labelledby\":\"home-seo-use-cases\",\"className\":\"max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 py-12 sm:py-16\",\"children\":[[\"$\",\"h2\",null,{\"id\":\"home-seo-use-cases\",\"className\":\"text-2xl sm:text-3xl font-semibold text-zinc-900 dark:text-white mb-4\",\"children\":\"What people use the diagram generator for\"}],[\"$\",\"p\",null,{\"className\":\"text-sm sm:text-base text-zinc-600 dark:text-zinc-400 leading-relaxed max-w-3xl mb-8\",\"children\":\"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.\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"li\",\"Flowcharts from plain English\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/flowchart-from-text\",\"className\":\"flex gap-4 p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm hover:shadow-md hover:border-violet-300 dark:hover:border-violet-500/50 transition-all\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-shrink-0 w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dark:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400\",\"children\":[\"$\",\"$L1a\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M15 6a9 9 0 0 0-9 9V3\",\"key\":\"1cii5b\"}],[\"circle\",{\"cx\":\"18\",\"cy\":\"6\",\"r\":\"3\",\"key\":\"1h7g24\"}],[\"circle\",{\"cx\":\"6\",\"cy\":\"18\",\"r\":\"3\",\"key\":\"fqmcym\"}]],\"className\":\"lucide-git-branch\",\"size\":20,\"aria-hidden\":true}]}],[\"$\",\"div\",null,{\"className\":\"flex-1 min-w-0\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"Flowcharts from plain English\"}],[\"$\",\"p\",null,{\"className\":\"mt-1.5 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]]}]]}]}],[\"$\",\"li\",\"Sequence diagrams for API interactions\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/sequence-diagram-from-text\",\"className\":\"flex gap-4 p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm hover:shadow-md hover:border-violet-300 dark:hover:border-violet-500/50 transition-all\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-shrink-0 w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dark:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400\",\"children\":[\"$\",\"$L1a\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M8 3 4 7l4 4\",\"key\":\"9rb6wj\"}],[\"path\",{\"d\":\"M4 7h16\",\"key\":\"6tx8e3\"}],[\"path\",{\"d\":\"m16 21 4-4-4-4\",\"key\":\"siv7j2\"}],[\"path\",{\"d\":\"M20 17H4\",\"key\":\"h6l3hr\"}]],\"className\":\"lucide-arrow-left-right\",\"size\":20,\"aria-hidden\":true}]}],[\"$\",\"div\",null,{\"className\":\"flex-1 min-w-0\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"Sequence diagrams for API interactions\"}],[\"$\",\"p\",null,{\"className\":\"mt-1.5 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]]}]]}]}],[\"$\",\"li\",\"ERD for database schema design\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/erd-from-text\",\"className\":\"flex gap-4 p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm hover:shadow-md hover:border-violet-300 dark:hover:border-violet-500/50 transition-all\",\"children\":\"$L31\"}]}],\"$L32\",\"$L33\",\"$L34\",\"$L35\"]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"1f:[\"$\",\"section\",null,{\"aria-labelledby\":\"home-seo-faq\",\"className\":\"max-w-[clamp(320px,88vw,1024px)] mx-auto px-4 py-12 sm:py-16\",\"children\":[[\"$\",\"h2\",null,{\"id\":\"home-seo-faq\",\"className\":\"text-2xl sm:text-3xl font-semibold text-zinc-900 dark:text-white mb-4\",\"children\":\"Frequently asked questions\"}],[\"$\",\"p\",null,{\"className\":\"text-sm sm:text-base text-zinc-600 dark:text-zinc-400 leading-relaxed max-w-3xl mb-8\",\"children\":\"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.\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-3\",\"children\":[[\"$\",\"li\",\"Is VizText really free?\",{\"children\":[\"$\",\"details\",null,{\"className\":\"group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-1\",\"children\":\"Is VizText really free?\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45\",\"children\":\"+\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]]}]}],[\"$\",\"li\",\"What diagram types does the AI generator support?\",{\"children\":[\"$\",\"details\",null,{\"className\":\"group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-1\",\"children\":\"What diagram types does the AI generator support?\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45\",\"children\":\"+\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]]}]}],[\"$\",\"li\",\"Do I need to know Mermaid syntax?\",{\"children\":[\"$\",\"details\",null,{\"className\":\"group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-1\",\"children\":\"Do I
1need to know Mermaid syntax?\"}],\"$L36\"]}],\"$L37\"]}]}],\"$L38\",\"$L39\",\"$L3a\",\"$L3b\",\"$L3c\",\"$L3d\",\"$L3e\",\"$L3f\",\"$L40\"]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"22:[\"$\",\"li\",\"sequence-diagram-template\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/sequence-diagram-template\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Sequence diagram templates\"}]}]\n23:[\"$\",\"li\",\"class-diagram-template\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/class-diagram-template\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Class diagram templates\"}]}]\n24:[\"$\",\"li\",\"erd-template\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/erd-template\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"ER diagram templates\"}]}]\n25:[\"$\",\"li\",null,{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/diagram-tutorials\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Tutorials\"}]}]\n26:[\"$\",\"li\",null,{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/changelog\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Changelog\"}]}]\n"])</script>
1<script>self.__next_f.push([1,"27:[\"$\",\"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\":[\"$\",\"$L20\",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\":[\"$\",\"$L20\",null,{\"href\":\"/sequence-diagram-from-text\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Sequence Diagram\"}]}],[\"$\",\"li\",\"erd-from-text\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/erd-from-text\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"ERD\"}]}],[\"$\",\"li\",\"state-diagram-from-text\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/state-diagram-from-text\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"State Diagram\"}]}],[\"$\",\"li\",\"class-diagram-from-text\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/class-diagram-from-text\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"UML Class Diagram\"}]}],[\"$\",\"li\",\"mindmap-from-text\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/mindmap-from-text\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Text to Mind Map\"}]}],[\"$\",\"li\",\"gantt-from-text\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/gantt-from-text\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Gantt Chart\"}]}],[\"$\",\"li\",\"chat-to-diagram\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/chat-to-diagram\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Chat to Diagram\"}]}],[\"$\",\"li\",\"architecture-diagram-from-text\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/architecture-diagram-from-text\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Architecture Diagram\"}]}],[\"$\",\"li\",\"uml-diagram-from-text\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/uml-diagram-from-text\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"UML Diagram\"}]}],[\"$\",\"li\",\"ai-diagram-from-text\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/ai-diagram-from-text\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Diagram\"}]}],[\"$\",\"li\",\"ai-diagram-from-code\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/ai-diagram-from-code\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Diagram from Code\"}]}],[\"$\",\"li\",\"ai-diagram-from-json\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/ai-diagram-from-json\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Diagram from JSON\"}]}],[\"$\",\"li\",\"chatgpt-mermaid-fixer\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/chatgpt-mermaid-fixer\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"ChatGPT Mermaid Fixer\"}]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"28:[\"$\",\"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\":[\"$\",\"$L20\",null,{\"href\":\"/privacy\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Privacy\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/terms\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Terms\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/contact\",\"className\":\"hover:text-zinc-900 dark:hover:text-white transition-colors\",\"children\":\"Contact\"}]}]]}]]}]\n29:[\"$\",\"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,"31:[[\"$\",\"div\",null,{\"className\":\"flex-shrink-0 w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dark:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400\",\"children\":[\"$\",\"$L1a\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"ellipse\",{\"cx\":\"12\",\"cy\":\"5\",\"rx\":\"9\",\"ry\":\"3\",\"key\":\"msslwz\"}],[\"path\",{\"d\":\"M3 5V19A9 3 0 0 0 21 19V5\",\"key\":\"1wlel7\"}],[\"path\",{\"d\":\"M3 12A9 3 0 0 0 21 12\",\"key\":\"mv7ke4\"}]],\"className\":\"lucide-database\",\"size\":20,\"aria-hidden\":true}]}],[\"$\",\"div\",null,{\"className\":\"flex-1 min-w-0\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"ERD for database schema design\"}],[\"$\",\"p\",null,{\"className\":\"mt-1.5 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]]}]]\n"])</script>
1<script>self.__next_f.push([1,"32:[\"$\",\"li\",\"Mindmaps for planning and study notes\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/mindmap-from-text\",\"className\":\"flex gap-4 p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm hover:shadow-md hover:border-violet-300 dark:hover:border-violet-500/50 transition-all\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-shrink-0 w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dark:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400\",\"children\":[\"$\",\"$L1a\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"rect\",{\"x\":\"16\",\"y\":\"16\",\"width\":\"6\",\"height\":\"6\",\"rx\":\"1\",\"key\":\"4q2zg0\"}],[\"rect\",{\"x\":\"2\",\"y\":\"16\",\"width\":\"6\",\"height\":\"6\",\"rx\":\"1\",\"key\":\"8cvhb9\"}],[\"rect\",{\"x\":\"9\",\"y\":\"2\",\"width\":\"6\",\"height\":\"6\",\"rx\":\"1\",\"key\":\"1egb70\"}],[\"path\",{\"d\":\"M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3\",\"key\":\"1jsf9p\"}],[\"path\",{\"d\":\"M12 12V8\",\"key\":\"2874zd\"}]],\"className\":\"lucide-network\",\"size\":20,\"aria-hidden\":true}]}],[\"$\",\"div\",null,{\"className\":\"flex-1 min-w-0\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"Mindmaps for planning and study notes\"}],[\"$\",\"p\",null,{\"className\":\"mt-1.5 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]]}]]}]}]\n"])</script>
1<script>self.__next_f.push([1,"33:[\"$\",\"li\",\"State diagrams for lifecycle modeling\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/state-diagram-from-text\",\"className\":\"flex gap-4 p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm hover:shadow-md hover:border-violet-300 dark:hover:border-violet-500/50 transition-all\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-shrink-0 w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dark:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400\",\"children\":[\"$\",\"$L1a\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"circle\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\",\"key\":\"1mglay\"}],[\"circle\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"1\",\"key\":\"41hilf\"}]],\"className\":\"lucide-circle-dot\",\"size\":20,\"aria-hidden\":true}]}],[\"$\",\"div\",null,{\"className\":\"flex-1 min-w-0\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"State diagrams for lifecycle modeling\"}],[\"$\",\"p\",null,{\"className\":\"mt-1.5 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]]}]]}]}]\n"])</script>
1<script>self.__next_f.push([1,"34:[\"$\",\"li\",\"Class diagrams for OO design\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/class-diagram-from-text\",\"className\":\"flex gap-4 p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm hover:shadow-md hover:border-violet-300 dark:hover:border-violet-500/50 transition-all\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-shrink-0 w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dark:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400\",\"children\":[\"$\",\"$L1a\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"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\",\"key\":\"hh9hay\"}],[\"path\",{\"d\":\"m3.3 7 8.7 5 8.7-5\",\"key\":\"g66t2b\"}],[\"path\",{\"d\":\"M12 22V12\",\"key\":\"d0xqtd\"}]],\"className\":\"lucide-box\",\"size\":20,\"aria-hidden\":true}]}],[\"$\",\"div\",null,{\"className\":\"flex-1 min-w-0\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"Class diagrams for OO design\"}],[\"$\",\"p\",null,{\"className\":\"mt-1.5 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]]}]]}]}]\n"])</script>
1<script>self.__next_f.push([1,"35:[\"$\",\"li\",\"Gantt charts for project timelines\",{\"children\":[\"$\",\"$L20\",null,{\"href\":\"/gantt-from-text\",\"className\":\"flex gap-4 p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm hover:shadow-md hover:border-violet-300 dark:hover:border-violet-500/50 transition-all\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-shrink-0 w-11 h-11 rounded-xl bg-violet-50 dark:bg-violet-500/10 border border-violet-100 dark:border-violet-500/20 flex items-center justify-center text-violet-600 dark:text-violet-400\",\"children\":[\"$\",\"$L1a\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"rect\",{\"width\":\"8\",\"height\":\"8\",\"x\":\"3\",\"y\":\"3\",\"rx\":\"2\",\"key\":\"by2w9f\"}],[\"path\",{\"d\":\"M7 11v4a2 2 0 0 0 2 2h4\",\"key\":\"xkn7yn\"}],[\"rect\",{\"width\":\"8\",\"height\":\"8\",\"x\":\"13\",\"y\":\"13\",\"rx\":\"2\",\"key\":\"1cgmvn\"}]],\"className\":\"lucide-workflow\",\"size\":20,\"aria-hidden\":true}]}],[\"$\",\"div\",null,{\"className\":\"flex-1 min-w-0\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base font-semibold text-zinc-900 dark:text-white\",\"children\":\"Gantt charts for project timelines\"}],[\"$\",\"p\",null,{\"className\":\"mt-1.5 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]]}]]}]}]\n"])</script>
1<script>self.__next_f.push([1,"36:[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45\",\"children\":\"+\"}]\n37:[\"$\",\"div\",null,{\"className\":\"px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]\n38:[\"$\",\"li\",\"What is the difference between Quick mode and Chat mode?\",{\"children\":[\"$\",\"details\",null,{\"className\":\"group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-1\",\"children\":\"What is the difference between Quick mode and Chat mode?\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45\",\"children\":\"+\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]]}]}]\n39:[\"$\",\"li\",\"How many questions does Chat mode ask before drawing?\",{\"children\":[\"$\",\"details\",null,{\"className\":\"group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-1\",\"children\":\"How many questions does Chat mode ask before drawing?\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45\",\"children\":\"+\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]]}]}]\n3a:[\"$\",\"li\",\"Can I skip the questions and just generate?\",{\"children\":[\"$\",\"details\",null,{\"className\":\"group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-1\",\"children\":\"Can I skip the questions and just generate?\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45\",\"children\":\"+\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 "])</script>
1<script>self.__next_f.push([1,"leading-relaxed\",\"children\":\"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.\"}]]}]}]\n3b:[\"$\",\"li\",\"What if AI adds elements I did not ask for?\",{\"children\":[\"$\",\"details\",null,{\"className\":\"group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-1\",\"children\":\"What if AI adds elements I did not ask for?\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45\",\"children\":\"+\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]]}]}]\n3c:[\"$\",\"li\",\"Can I edit the generated diagram?\",{\"children\":[\"$\",\"details\",null,{\"className\":\"group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-1\",\"children\":\"Can I edit the generated diagram?\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45\",\"children\":\"+\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]]}]}]\n3d:[\"$\",\"li\",\"How do I export the diagram?\",{\"children\":[\"$\",\"details\",null,{\"className\":\"group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-1\",\"children\":\"How do I export the diagram?\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45\",\"children\":\"+\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]]}]}]\n3e:[\"$\",\"li\",\"Does it support Chinese input?\",{\"children\":[\"$\",\"details\",null,{\"className\":\"group rounded-2x"])</script>
1<script>self.__next_f.push([1,"l border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-1\",\"children\":\"Does it support Chinese input?\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45\",\"children\":\"+\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]]}]}]\n3f:[\"$\",\"li\",\"Is there a rate limit?\",{\"children\":[\"$\",\"details\",null,{\"className\":\"group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-1\",\"children\":\"Is there a rate limit?\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45\",\"children\":\"+\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]]}]}]\n40:[\"$\",\"li\",\"Is my prompt data stored?\",{\"children\":[\"$\",\"details\",null,{\"className\":\"group rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm open:shadow-md transition-shadow\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none p-5 flex items-center justify-between gap-4 text-base font-medium text-zinc-900 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 transition-colors\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-1\",\"children\":\"Is my prompt data stored?\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"flex-shrink-0 w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 flex items-center justify-center text-xs transition-transform group-open:rotate-45\",\"children\":\"+\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-5 pb-5 -mt-1 text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed\",\"children\":\"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.\"}]]}]}]\n"])</script>
1<script>self.__next_f.push([1,"2e:[[\"$\",\"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,"41:I[11206,[\"/_next/static/chunks/3u2c5pk4fxsmt.js\",\"/_next/static/chunks/3t6e4rue2il0k.js\"],\"IconMark\"]\n2c:null\n"])</script>
1<script>self.__next_f.push([1,"30:[[\"$\",\"title\",\"0\",{\"children\":\"VizText â AI Diagram Generator from Prompt or Chat\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"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.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"canonical\",\"href\":\"https://viztext.com\"}],[\"$\",\"link\",\"3\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://viztext.com\"}],[\"$\",\"link\",\"4\",{\"rel\":\"alternate\",\"hrefLang\":\"zh\",\"href\":\"https://viztext.com/zh\"}],[\"$\",\"link\",\"5\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://viztext.com\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:title\",\"content\":\"VizText â AI Diagram Generator from Prompt or Chat\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:description\",\"content\":\"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.\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:url\",\"content\":\"https://viztext.com\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:site_name\",\"content\":\"VizText\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:image\",\"content\":\"https://viztext.com/opengraph-image?8bd97b12cd902aa7\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image:type\",\"content\":\"image/png\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image:alt\",\"content\":\"VizText â AI Diagram Generator from Prompt or Chat\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:locale:alternate\",\"content\":\"zh_CN\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:title\",\"content\":\"VizText â AI Diagram Generator from Prompt or Chat\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:description\",\"content\":\"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.\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:image\",\"content\":\"https://viztext.com/opengraph-image?8bd97b12cd902aa7\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:image:alt\",\"content\":\"VizText â AI Diagram Generator from Prompt or Chat\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:image:type\",\"content\":\"image/png\"}],[\"$\",\"meta\",\"24\",{\"name\":\"twitter:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"25\",{\"name\":\"twitter:image:height\",\"content\":\"630\"}],[\"$\",\"link\",\"26\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.1zn-p5cp-swfa.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"27\",{\"rel\":\"icon\",\"href\":\"/icon.svg?icon.0xngbc1s43sx3.svg\",\"sizes\":\"any\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"28\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png?apple-icon.0ph69_ayudfri.png\",\"sizes\":\"180x180\",\"type\":\"image/png\"}],[\"$\",\"$L41\",\"29\",{}]]\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.