1(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,29121,e=>{"use strict";e.s(["DEFAULT_LOCALE",0,"en","LOCALES",0,["en","zh"],"localizedPath",0,function(e,t){let a=t.startsWith("/")?t:`/${t}`;return"en"===e?a:`/${e}${"/"===a?"":a}`}])},24433,e=>{"use strict";var t=e.i(29121);let a=[{slug:"flowchart-from-text",relatedSlugs:["state-diagram-from-text","sequence-diagram-from-text","gantt-from-text","mindmap-from-text"]},{slug:"sequence-diagram-from-text",relatedSlugs:["class-diagram-from-text","flowchart-from-text","state-diagram-from-text"]},{slug:"erd-from-text",relatedSlugs:["class-diagram-from-text","flowchart-from-text","mindmap-from-text"]},{slug:"state-diagram-from-text",relatedSlugs:["flowchart-from-text","sequence-diagram-from-text","class-diagram-from-text"]},{slug:"class-diagram-from-text",relatedSlugs:["erd-from-text","sequence-diagram-from-text","state-diagram-from-text"]},{slug:"mindmap-from-text",relatedSlugs:["gantt-from-text","flowchart-from-text","erd-from-text","class-diagram-from-text"]},{slug:"gantt-from-text",relatedSlugs:["mindmap-from-text","flowchart-from-text","sequence-diagram-from-text","class-diagram-from-text"]},{slug:"chat-to-diagram",relatedSlugs:["flowchart-from-text","sequence-diagram-from-text","mindmap-from-text"]},{slug:"architecture-diagram-from-text",relatedSlugs:["flowchart-from-text","sequence-diagram-from-text","class-diagram-from-text"]},{slug:"uml-diagram-from-text",relatedSlugs:["class-diagram-from-text","sequence-diagram-from-text","state-diagram-from-text"]},{slug:"ai-diagram-from-text",relatedSlugs:["flowchart-from-text","sequence-diagram-from-text","mindmap-from-text"]},{slug:"ai-diagram-from-code",relatedSlugs:["uml-diagram-from-text","architecture-diagram-from-text","class-diagram-from-text"]},{slug:"ai-diagram-from-json",relatedSlugs:["erd-from-text","class-diagram-from-text","ai-diagram-from-code"]},{slug:"chatgpt-mermaid-fixer",relatedSlugs:["ai-diagram-from-text","chat-to-diagram","flowchart-from-text","sequence-diagram-from-text"]}],i=["auto","flowchart","sequence","erd","state","class","mindmap","gantt","arch"],r={auto:null,flowchart:"Flowchart",sequence:"Sequence",erd:"ERD",state:"State",class:"Class",mindmap:"Mindmap",gantt:"Gantt",arch:"Arch"},o={en:{"flowchart-from-text":{keyword:"text to flowchart ai",metaTitle:"Text to Flowchart AI â VizText",metaDescription:"Text to Flowchart AI â describe any process in plain English and get an editable Mermaid flowchart. Free, export SVG/PNG. No signup.",tagline:"Describe a process in plain English. Get a diagram. Export SVG or PNG.",examples:[{title:"User signup with email verification",prompt:"A user signup flow: enter email + password, send verification email, user clicks link, mark account active, redirect to dashboard."},{title:"E-commerce checkout with payment retry",prompt:"Checkout flow: cart review, address entry, payment method selection, charge card, on failure retry up to 3 times then show error, on success show order confirmation."},{title:"CI/CD deploy pipeline",prompt:"A CI/CD pipeline: developer pushes to main, run unit tests, if pass then build docker image, push to registry, deploy to staging, run smoke tests, on success promote to production."},{title:"Password reset flow",prompt:"Password reset: user enters email, backend generates one-time token, email sent, user opens link, enters new password twice, backend validates match and strength, updates password, redirects to login."}],useCase:`Flowcharts are the workhorse of process documentation. Reach for them when you need to explain how a system behaves step by step â with decision points, loops, and branching outcomes. They shine for user flows (signup, checkout, password reset), backend pipelines (CI/CD, order fulfillment, background jobs), and incident-response runbooks where an engineer needs to trace "what happens next" at a glance. 2 3Compared to a diagram drawn in Figma or draw.io, a Mermaid flowchart lives in plain text â it version-controls with the rest of your codebase, renders inline in GitHub READMEs and Notion pages, and stays in sync with the code because updating it is a one-line edit rather than a click-and-drag exercise. 4 5Where flowcharts start to break down: highly parallel systems (use a [sequence diagram](/sequence-diagram-from-text) to show message ordering across actors), or state-heavy objects where you care about legal transitions rather than sequential steps ([state diagrams](/state-diagram-from-text) are cleaner). If your "flowchart" has more than about 30 nodes, split it into two â readers get lost past that point.`,scenarios:[{icon:"Workflow",title:"Process & pipeline design",body:"Onboarding flows, deploy pipelines, order fulfillment â anywhere you need to draw a step-by-step happy path plus every branch that can fail or loop back."},{icon:"GitBranch",title:"Decision trees & branching logic",body:"When a spec has more than one 'if/then/else' at the top level, a flowchart shows the shape faster than prose. Product managers grok it, engineers ship it."},{icon:"Bug",title:"Bug tracing & incident postmortems",body:"Trace the exact code path that hit the exception. A flowchart of 'what happened' beats a wall of console logs when the on-call reviewer just landed."},{icon:"BookOpen",title:"Runbooks & onboarding docs",body:"New hires need to know 'when X breaks, do Y next'. A flowchart in the README makes tribal knowledge legible without a 45-minute Zoom call."},{icon:"Repeat",title:"Algorithm sketches",body:"Retry logic with exponential backoff, rate-limit token buckets, state machines drawn as flow â anywhere the code is easier to review as a diagram than as commented pseudocode."}],faq:[{q:"How does text to flowchart AI work?",a:"You type a prompt in plain English describing a process â for example, 'user signup with email verification' â and the AI generates a Mermaid flowchart with the correct nodes, decision diamonds, and edge labels. Behind the scenes we route your prompt through an LLM tuned for structural clarity; the model outputs valid Mermaid source, and the browser renders it live. No syntax to learn, no drawing tool to open."},{q:"What kinds of processes can I turn into a flowchart?",a:"Anything with steps and decision points. Popular categories: user flows (signup, checkout, password reset, KYC), CI/CD pipelines (build, test, deploy, rollback), incident response runbooks, order fulfillment, background job orchestration, and algorithm sketches (retry with exponential backoff, rate limiter, state transitions). If you can describe it as 'first this happens, then either this or that, then this loops back' â it fits."},{q:"Can I edit the flowchart after it's generated?",a:"Yes. Open the split view in the generator and the Mermaid source appears next to the rendered preview. Every keystroke re-renders the diagram in the canvas beside the editor. You can add nodes, change edge labels, tweak layout direction (top-down vs left-right), or restyle nodes as stadiums, cylinders, or diamonds. If you'd rather regenerate from a modified prompt, that also works â just add a sentence and rerun."},{q:"How do I export the flowchart to my docs or slides?",a:"SVG for lossless scaling into design docs, PDFs, and print. PNG for slides, Notion pages, and Slack. The export buttons live in the preview status bar. SVG is preferred whenever the target renderer supports it â the diagram stays crisp at any zoom level and the text remains selectable and searchable, which SEO and accessibility tools appreciate."},{q:"Is the text to flowchart AI free? Any usage limits?",a:"Yes, free. No signup, no watermark, no credit card. There is a generous per-IP daily rate limit to keep API costs sustainable; normal drafting activity will not hit it. If you do hit the limit, the UI displays the reset time. The rate limit is enforced with Upstash Redis and is consistent across all Vercel edge regions, so you cannot bypass it by reloading from a different device on the same IP."},{q:"Does the AI support Chinese prompts, or is it English only?",a:"Both. The generator detects the UI locale and passes it through to the LLM directive, so a Chinese prompt returns a Chinese-labeled flowchart. Mixed Chinese and English prompts also work â the AI picks the dominant language and labels the diagram consistently. If you prefer a specific language for labels, add 'reply in <language>' to the end of your prompt."}]},"sequence-diagram-from-text":{keyword:"AI sequence diagram from description",metaTitle:"AI Sequence Diagram Generator â VizText",metaDescription:"AI sequence diagram from description â describe an API call, login handshake, or system interaction. Get a Mermaid sequence diagram you can export.",tagline:"Turn an API description into a sequence diagram with actors and arrows.",examples:[{title:"OAuth 2.0 authorization code flow",prompt:"OAuth 2.0 authorization code flow: user clicks login on client app, redirected to auth server, logs in and consents, auth server returns authorization code to client via redirect, client exchanges code + secret for access token, uses token to call resource server API."}
5,{title:"Stripe checkout with webhook",prompt:"Stripe checkout flow: frontend creates payment intent via backend, backend calls Stripe API, Stripe returns client secret, frontend confirms payment on Stripe's side, Stripe sends webhook to backend on success, backend fulfills order and notifies frontend via WebSocket."},{title:"Distributed transaction with saga",prompt:"Saga pattern: order service creates order (pending), publishes event, payment service charges card and publishes result event, on success inventory service reserves stock, on failure payment service compensates by refunding. Order service listens for all events to finalize state."},{title:"WebSocket chat message delivery",prompt:"WebSocket chat message: client A sends message via WebSocket to server, server persists to database, server pushes message to client B (recipient) over their WebSocket, client B sends read receipt back, server updates message status and notifies client A."}],useCase:`Sequence diagrams are the sharpest tool when the story
5is about ordering and timing between multiple actors. Reach for them any time you need to show "who calls whom, in what order, with what response" â API integrations, authentication handshakes (OAuth, SAML, JWT refresh), distributed system message flows, database transactions with locks, WebSocket / SSE push patterns. 6 7They're the go-to for engineering docs because they force you to name each actor explicitly â you can't hand-wave "the backend does something." Every arrow has a source, a target, and a message. This makes them ideal for architecture review docs and RFCs where the reader will pick apart every interaction. 8 9A rough rule: if you find yourself saying "and then, and then, and then" more than three times in your explanation, you want a sequence diagram, not a [flowchart](/flowchart-from-text). Sequence diagrams excel with async messages, activation bars showing when an actor is doing work, and notes annotating why a particular arrow matters. They struggle when the interaction is truly parallel with no meaningful ordering â in that case, a component diagram fits better.`,scenarios:[{icon:"FileText",title:"API integration docs",body:"When your REST or GraphQL API has multiple endpoints calling each other â auth, rate limiting, retries, webhooks. Sequence diagrams make every call traceable: who hit what, in what order, with what response."},{icon:"Lock",title:"Authentication & authorization handshakes",body:"OAuth 2.0, SAML, JWT refresh, WebAuthn â any protocol where multiple parties exchange signed tokens. A sequence diagram forces you to name each actor and every message. Ideal for security review docs."},{icon:"Network",title:"Distributed system message flows",body:"Microservice choreography, event-driven pipelines, message queues (Kafka / RabbitMQ), WebSocket / SSE push. When there's no single orchestrator, a sequence diagram shows which service publishes what and who consumes it."},{icon:"Database",title:"Database transactions & locking",body:"Multi-step transactions with read/write locks, optimistic concurrency, two-phase commit. Sequence diagrams clarify the exact order of BEGIN, SELECT FOR UPDATE, INSERT, COMMIT â and what happens on lock timeout."},{icon:"Zap",title:"Event-driven architectures",body:"Domain events fan out to subscribers, sagas coordinate long-running workflows, CQRS commands trigger event streams. A sequence diagram is often clearer than tracing spans when you want the whole story on one page."}]},"erd-from-text":{keyword:"AI ERD generator from description",metaTitle:"AI ERD Generator from Description â VizText",metaDescription:"ERD generator from description â describe entities and relationships (users, posts, comments) and get a Mermaid ER diagram with keys and cardinality.",tagline:"Describe entities and relationships. Get a Mermaid ERD with keys and cardinality.",examples:[{title:"Blog schema: users, posts, comments",prompt:"Blog database schema: users (id, email, name, created_at), posts (id, user_id FK, title, body, published_at), comments (id, post_id FK, user_id FK, body, created_at). A user can write many posts. A post has many comments. A user can leave many comments."},{title:"SaaS multi-tenant schema",prompt:"Multi-tenant SaaS: organizations (id, name, plan), users (id, org_id FK, email, role), workspaces (id, org_id FK, name), documents (id, workspace_id FK, author_id FK, title, content). Each organization has many users and workspaces. Each workspace has many documents. Users author many documents."},{title:"E-commerce: products, orders, line items",prompt:"E-commerce schema: customers (id, email), products (id, sku, name, price), orders (id, customer_id FK, total, status, placed_at), order_items (id, order_id FK, product_id FK, quantity, unit_price). Customer places many orders. Each order has many line items. Each item references one product."},{title:"Analytics event schema",prompt:"Product analytics schema: users (id, anonymous_id, identified_at), events (id, user_id FK, name, timestamp, properties json), sessions (id, user_id FK, started_at, ended_at, device), page_views (id, session_id FK, url, referrer, duration_ms)."}
9],useCase:`Entity relationship diagrams (ERDs) are how you communicate a database schema without dumping raw DDL on the reader. They show entities as tables, their columns with types, primary and foreign keys, and â critically â the cardinality of relationships (one-to-one, one-to-many, many-to-many). 10 11Reach for an ERD when you're designing a new schema before writing migrations, when you're onboarding an engineer to an existing codebase, or when you're writing an architecture doc that needs to justify why the data model looks the way it does. They're also invaluable when planning a migration or refactor â you can annotate which tables are being consolidated or split. If what you're describing is an object model rather than a set of tables, a [class diagram](/class-diagram-from-text) is the closer fit. 12 13Mermaid's erDiagram syntax uses crow's foot notation and supports column types, PK/FK markers, and relationship labels, which makes it detailed enough for real design docs. Where it falls short: it doesn't show indexes, constraints beyond keys, or physical storage details. For those, a full modeling tool like dbdiagram.io or an ORM's schema visualization tool goes deeper â but for the 90% of "let's talk about the shape of this data" conversations, an ERD in plain text you can commit alongside your migration files is exactly right.`,scenarios:[{icon:"Database",title:"New schema design",body:"Before you write the first migration, sketch tables, columns, and relationships. An ERD lets the whole team argue about naming and cardinality on one canvas instead of over five Slack threads."},{icon:"GitCompare",title:"Migration & refactor planning",body:"Splitting one users table into users + profiles + preferences? Annotate which columns move where. An ERD makes the before/after obvious, and reviewers can spot broken foreign keys in seconds."},{icon:"BookOpen",title:"Onboarding & architecture docs",body:"New engineers need to know 'where does the money live'. An ERD in the README, next to migration files, is the fastest way to answer 'which table joins to which' without paging through 40 model files."},{icon:"ShieldCheck",title:"Audit & compliance review",body:"SOC2, HIPAA, GDPR reviewers ask 'where is PII stored, and how does it flow?'. An ERD with PII columns annotated is a one-page answer that beats a spreadsheet of every field."},{icon:"Layers",title:"Normalization & performance review",body:"Denormalize for read speed? Add a materialized join table? An ERD helps you argue trade-offs visually â you can see the 3rd normal form vs the denormalized version side by side."}],faq:[{q:"How does the ERD generator work from a description?",a:"You describe entities and their relationships in plain English â for example, 'users write posts, posts have many comments, users can leave comments' â and the AI generates a Mermaid ER diagram with entities, primary keys, foreign keys, and cardinality (1:1, 1:N, M:N). No need to learn ERD syntax or open a schema design tool."},{q:"What information does the AI infer for each entity?",a:"The AI infers columns from context. When you mention 'users have email and password', those become columns; when you say 'posts have many comments', a foreign key `post_id` is added to comments. Primary keys default to `id BIGINT`; timestamps like `created_at` and `updated_at` are added automatically if you use words like 'audit' or 'timestamped'. Types are inferred by name (`email` â varchar, `price` â decimal, `is_active` â boolean)."},{q:"Can I model many-to-many relationships and junction tables?",a:"Yes. Describe it naturally: 'users can favorite posts' or 'tags belong to many posts, posts have many tags'. The AI adds the junction table with composite primary key and foreign keys back to both sides. You can also spell it out explicitly â 'add a favorites table with user_id and post_id' â and the AI honors the exact shape."},{q:"How do I export the ERD for my migration doc or PR?",a:"Export as SVG or PNG from the preview status bar. SVG works well in docs, README files, and Confluence â the diagram scales cleanly and its text is searchable. PNG is easier for Slack, Notion, and email. The underlying Mermaid source can also be c
13opied and pasted into any Mermaid-compatible renderer (GitHub markdown, Notion, Obsidian) so it stays in sync with your codebase."},{q:"Does the ERD support inheritance, polymorphism, or STI?",a:"Mermaid ER syntax doesn't have native inheritance arrows, but the AI models these patterns pragmatically: single-table inheritance becomes one table with a `type` discriminator column; class-table inheritance becomes a parent table plus per-subtype child tables with FK back. Polymorphic associations show as two nullable FK columns with a `type` string. If you want strict UML class semantics instead, use the class diagram generator."},{q:"Is the ERD generator free? Any signup needed?",a:"Quick mode is free with no signup, watermark, or credit card; a per-IP daily rate limit prevents abuse. Chat mode is also free but requires a Google account so it can keep conversation context. Enterprise or higher-volume use cases that need dedicated capacity can reach out via the contact page."}]},"state-diagram-from-text":{keyword:"AI state diagram generator from text",metaTitle:"AI State Diagram Generator from Text â VizText",metaDescription:"AI state diagram generator from text â describe a state machine (order lifecycle, feature flag, subscription) and get a Mermaid state diagram with transitions.",tagline:"Describe a state machine. Get a Mermaid state diagram with transitions.",examples:[{title:"Order lifecycle with cancel and refund",prompt:"Order lifecycle state machine: draft -> submitted -> paid -> shipped -> delivered. From draft user can cancel. From paid can refund. Failed payment transitions submitted back to draft. Cancelled and refunded are terminal states."},{title:"Feature flag rollout state",prompt:"Feature flag rollout state machine: draft -> internal_testing -> beta -> gradual_rollout -> stable. From any state can be rolled back to previous. From gradual_rollout can jump to killed if metrics regress. Killed is terminal."},{title:"Support ticket workflow",prompt:"Support ticket workflow: new -> triaged -> assigned -> in_progress -> waiting_customer -> resolved -> closed. From any non-terminal state can go to escalated. From resolved customer can reopen back to assigned within 7 days."},{title:"OAuth token lifecycle",prompt:"OAuth access token lifecycle: issued (fresh with expiry). issued -> expired after TTL. issued -> revoked if user logs out or admin invalidates. From expired can be refreshed back to issued if refresh token still valid. Revoked is terminal."}],useCase:`State diagrams are the right tool when what matters is the object's current condition and which transitions are legal from here, not the sequence in which things happen. Reach for them when you have a thing (an order, a document, a user account, a feature flag, a subscription) that moves through named states with clear rules about which state can follow which. 14 15The classic tell you need a state diagram: your team keeps arguing "wait, can a user be both suspended and pending-verification at the same time?" That's a question about state legality, not process order. A state diagram forces you to enumerate every state exactly once and every transition explicitly â which surfaces contradictions you'd otherwise ship as bugs. 16 17Mermaid's stateDiagram-v2 syntax supports composite states, concurrent regions, entry/exit actions, and the standard \`[*]\` start/terminal marker. Use it for order/subscription/document workflows, machine or IoT device modes, feature flag rollout phases, or any lifecycle that a compliance auditor might ask you to prove is bounded. Where state diagrams struggle: when interactions between multiple stateful objects dominate â then a [sequence diagram](/sequence-diagram-from-text) on top helps.`,scenarios:[{icon:"ToggleRight",title:"Form & wizard state",body:"Multi-step wizards, checkout funnels, onboarding. When 'draft', 'in review', 'approved', 'rejected' each have different UI and permissions, a state diagram is the source of truth."},{icon:"Cog",title:"Workflow & approval status",body:"PR review states, order lifecycle, ticket status. Any object that moves through named stages with rules about who can trigger which transition benefits from an explicit state diagram."},{icon:"RefreshCw",title:"Retry & recovery logic",body:"Job runs go pending â running â succeeded / failed / cancelled â retrying. When retry logic gets complex (ex
17ponential backoff, dead-letter), a state diagram is faster to reason about than the retry code."},{icon:"CircleDot",title:"UI component state",body:"Loading, empty, error, success â the four states of every screen. A state diagram makes the design system contract visible: which states does this component handle, and how do you transition between them."},{icon:"FileCode",title:"Protocol & machine specs",body:"TCP handshake, WebSocket connection lifecycle, hardware device modes. State diagrams have been the standard notation for protocol specs since Turing â because they're precise enough for implementation review."}]},"class-diagram-from-text":{keyword:"AI UML class diagram generator from text",metaTitle:"AI UML Class Diagram Generator â VizText",metaDescription:"AI UML class diagram generator from text â describe classes, attributes, methods, and inheritance and get a Mermaid UML class diagram for docs and reviews.",tagline:"Describe classes, attributes, and inheritance. Get a Mermaid UML class diagram.",examples:[{title:"Geometric shapes with abstract base",prompt:"UML class diagram for geometric shapes: abstract Shape with area() method, subclasses Circle (radius: double), Rectangle (width, height), Triangle (base, height). Each overrides area()."},{title:"Employee hierarchy with roles",prompt:"Employee class hierarchy: Person (name, email, phone). Employee extends Person (employeeId, salary, hireDate). Manager extends Employee (directReports list). Contractor extends Person (contractEnd, hourlyRate). Show visibility markers and getters."},{title:"E-commerce domain model",prompt:"E-commerce domain model: Customer has many Orders. Order has many LineItems. LineItem references a Product with unitPrice and quantity. Product has category, sku, price. Show associations with cardinality and key methods."},{title:"Payment processor with strategy pattern",prompt:"Payment processing using strategy pattern: PaymentProcessor uses a PaymentStrategy interface. Concrete strategies: StripeStrategy, PayPalStrategy, CryptoStrategy. Each implements charge(amount) and refund(txId). Show interface implementation and composition."}],useCase:"Class diagrams are the standard vocabulary for talking about software structure. Reach for them when you need to communicate the shape of an object-oriented codebase: which types exist, what attributes and methods they have, and how they relate through inheritance, composition, and association.\n\nWhere they shine: onboarding docs (\"here's how our domain model is organized\"), design RFCs proposing a new class hierarchy or refactor, and technical interviews where you need to sketch out a design in the whiteboard. They're also the go-to for documenting design patterns â factory, strategy, observer, visitor all have a canonical class diagram shape that readers recognize instantly. When the structure you're documenting is a database schema rather than an object model, an [ER diagram](/erd-from-text) is the closer fit.\n\nMermaid's classDiagram supports the full UML notation you'd expect: visibility markers (`+` public, `-` private, `#` protected, `~` package), abstract classes and methods, interfaces via the `<<interface>>` stereotype, generic types, and every relationship (inheritance `<|--`, composition `*--`, aggregation `o--`, association `--`, dependency `..>`). It stops short of full UML â no swimlanes, no full activity semantics â which for most engineering docs is a feature, not a bug. If you need those, you're probably reaching for the wrong tool.",scenarios:[{icon:"Box",title:"OOP domain model",body:"User, Order, Payment, Invoice â the nouns of your business. A class diagram is where they live: fields, methods, relationships. Anyone joining the team gets the mental model in 30 seconds."},{icon:"Layers",title:"DDD aggregates & bounded contexts",body:"Domain-driven design lives on class diagrams. Aggregate roots, value objects, entities, and the exact relationships between them â the diagram is the DDD spec."},{icon:"Library",title:"Library & SDK API design",body:"Before you publish v1.0, sketch the public API as a class diagram. Users grep the docs for the diagram to understand what's exp
17orted. Cleaner than tsdoc alone."},{icon:"GitPullRequest",title:"Refactor & migration mapping",body:"Extract this method, move that field, collapse these three classes into one. A before/after class diagram makes the refactor reviewable at a glance â hard to hide breaking changes."},{icon:"BookOpen",title:"Design pattern documentation",body:"Factory, Strategy, Observer, Visitor â every classic design pattern has a canonical class diagram shape. Reference these in your RFCs and readers recognize the pattern instantly."}]},"mindmap-from-text":{keyword:"text to mind map generator",metaTitle:"Text to Mind Map Generator â VizText",metaDescription:"Text to Mind Map Generator â turn a topic or outline into an interactive mind map. Fold branches, edit nodes, export SVG/PNG/Markdown/OPML.",tagline:"Describe a topic hierarchy. Get a Mermaid mindmap with nested branches.",examples:[{title:"Product launch checklist",prompt:"Mindmap for a product launch: Marketing (SEO, ads, social, PR, email), Engineering (backend, frontend, mobile, infra), Ops (support, billing, legal, compliance), Analytics (dashboards, funnels, cohort tracking). Add 2-3 leaves per branch."},{title:"Software architecture concerns",prompt:"Mindmap of software architecture concerns for a new SaaS: Reliability (SLO, monitoring, incident response), Scalability (caching, sharding, queues), Security (auth, secrets, audit), Cost (compute, egress, storage), DX (docs, dev env, CI speed)."},{title:"Interview prep for senior engineer",prompt:"Mindmap for senior software engineer interview prep: System design (databases, caching, queues, sharding, CDN, load balancing), Algorithms (arrays, trees, graphs, DP, greedy), Behavioral (leadership, conflict, growth), Domain knowledge (whatever the target company builds)."},{title:"Weekend hobby project ideas",prompt:"Mindmap of weekend project ideas: Learning (build a compiler, a database, a shell), Tools (workflow automation, dev productivity), Games (chess AI, roguelike, tower defense), Data (personal analytics, habit tracker, dashboards). Include estimated weekend count for each."}],useCase:`A text to mind map generator is the visual thinking tool for when you're trying to make an unstructured brain-dump legible. Reach for it at the earliest stage of planning any complex topic â before you have a real hierarchy, before you know which concerns are top-level, before an actual outline exists. Feed it a raw topic and let the AI-generated mind map surface the branches you had not yet named. 18 19Their strength is asymmetric: the tree structure is stronger than a bullet list at showing which ideas are peers and which are children, but weaker than a [flowchart](/flowchart-from-text) at showing sequence, and weaker than a [state diagram](/state-diagram-from-text) at showing rules. So use them when the "shape" of the ideas is the useful thing â during brainstorming, in interview scoping (junior engineers reason better with mindmaps than with prose), and when you're capturing the outline of a design doc before you commit to a structure. 20 21Mermaid's mindmap syntax uses indentation for hierarchy and supports different node shapes (rectangles, rounded, hexagons, circles) for visual distinction. It's intentionally spare compared to dedicated mindmap tools like XMind or MindMeister â no icons, no rich formatting, no drag-to-reorganize. That's the tradeoff for keeping it in plain text you can commit alongside code.`,scenarios:[{icon:"Lightbulb",title:"Brainstorming & ideation",body:"Kickoff meetings, feature ideation, whiteboarding a new product. Mindmaps capture divergent thinking better than lists â you can see the shape of what you know and what you're missing."},{icon:"Rocket",title:"Feature & release planning",body:"Break a big theme into workstreams. Marketing / engineering / support / analytics each get a branch, and every leaf is a concrete deliverable. A mindmap makes gaps visually obvious."},{icon:"Search",title:"Research & competitive analysis",body:"Sizing up a new market? Every competitor gets a node, every dimension (pricing / features / integrations / audie
21nce) gets a sub-branch. Faster than a spreadsheet for the exploration phase."},{icon:"MessagesSquare",title:"Meeting notes & recap",body:"During a discussion, capturing topics as a mindmap lets you jump between threads without losing where each was going. Post-meeting, the mindmap is easier to skim than linear notes."},{icon:"Sparkles",title:"Product vision & strategy docs",body:"The one-pager 'what is this company / product'. A mindmap forces you to be concrete about pillars, principles, and non-goals. Better than a wall of paragraphs."}],faq:[{q:"How does the text to mind map generator work?",a:"You give the AI a topic â a subject you want to study, a project you're planning, a book you're outlining â and it returns a structured mind map with a root topic and 3-5 branches, each with sub-branches 2-3 levels deep. Under the hood we route your prompt through an LLM tuned for hierarchical thinking; the model outputs markmap markdown (indented `#` levels), and the browser renders it into an interactive canvas you can fold, pan, and zoom."},{q:"What kinds of topics work well as mind maps?",a:"Anything that has a natural hierarchy. Popular categories: study notes (a historical era, a scientific field, a book chapter), project plans (product launch, wedding checklist, semester schedule), brainstorming (feature ideas, positioning angles, pros/cons for a decision), and content outlines (blog post, keynote talk, YouTube video). If you can imagine drawing a tree with a topic at the center and offshoots radiating out, it fits."},{q:"Can I interact with the mind map, or is it a static image?",a:"Interactive. Every node is clickable â click to fold or unfold its subtree, drag on empty canvas to pan, scroll or pinch to zoom. On mobile, tap to fold. The state is preserved when you edit and re-render, so exploring a large map does not reset your view. This is where markmap-based mind maps beat static SVG diagrams from tools like draw.io: 200+ node maps stay navigable."},{q:"How do I export the mind map to XMind or Obsidian?",a:"The generator exports four formats: SVG (lossless vector, drops into docs), PNG (raster, for slides and social), Markdown (the indented `#` source, editable in any markdown tool including Obsidian), and OPML (the outline standard that XMind, MindNode, and most outline tools import cleanly). OPML preserves the full hierarchy and text; SVG preserves the visual layout. Pick the one that matches your target tool."},{q:"Can I edit the mind map after generation?",a:"Yes. Switch to the split view and the markdown source appears next to the interactive canvas. Every edit re-renders in real time. Add a branch by typing a new `## `, deepen a level by adding another `#`, move a subtree by cut-and-paste. If you'd rather add content via natural language, re-run the prompt with your additions ('...and also cover the marketing budget') and the AI regenerates with the new scope."},{q:"Is the text to mind map generator free and unlimited?",a:"Free with a generous per-IP daily rate limit â enough for normal outlining and note-taking, not so unlimited that abusive scripts drain our LLM budget. No signup, no watermark, no credit card. If you hit the limit, the UI shows the reset time. The rate limit is enforced with Upstash Redis so it is consistent across all Vercel edge regions."}]}
21,"gantt-from-text":{keyword:"AI Gantt chart generator from text",metaTitle:"AI Gantt Chart Generator from Text â VizText",metaDescription:"AI Gantt chart generator from text â describe project phases, milestones, and dependencies. Get a Mermaid Gantt chart with dates and durations.",tagline:"Describe project phases and dependencies. Get a Mermaid Gantt chart.",examples:[{title:"MVP launch timeline (12 weeks)",prompt:"12-week MVP launch Gantt chart starting 2026-01-01. Phases: Research (2 weeks), Design (3 weeks, starts week 2 overlapping), Backend (5 weeks, after Design), Frontend (4 weeks, parallel with Backend from week 5), Testing (2 weeks, after all dev), Launch prep (1 week). Milestone at Launch."},{title:"Wedding planning timeline",prompt:"Wedding planning Gantt chart, 6 months out. Phases: Venue booking (weeks 1-3), Guest list (weeks 2-4), Invitations (weeks 5-8, after guest list), Vendor booking (weeks 3-10), Menu planning (weeks 8-12, after vendors), Final details (weeks 20-24), Wedding day at week 25."},{title:"Product feature Q1 roadmap",prompt:"Q1 product roadmap Gantt starting 2026-01-01: Feature A (design 2 weeks + build 4 weeks + launch 1 week), Feature B (design 1 week + build 3 weeks, starts week 5), Feature C (only 2 weeks build, starts week 8), Bug bash (last 2 weeks of quarter)."},{title:"Rocket launch countdown schedule",prompt:"Rocket launch countdown Gantt: L-30 days fueling prep, L-14 days final integration test, L-7 days weather assessment window opens, L-3 days launch rehearsal, L-1 day hold review, L-0 launch day (only 6 hours: pre-flight checks, fueling, terminal count, ignition, ascent). Milestone at ignition."}],useCase:"Gantt charts are the classical project management view. Reach for them when your audience needs to see three things at once: what phases exist, how they overlap in time, and where the dependencies are. They shine for engineering planning docs (\"here's our 12-week MVP timeline\"), stakeholder updates that need a visual TL;DR of \"when is this ready?\", and any pitch where you need to demonstrate you've thought through sequencing. If the phases themselves aren't settled yet, start with a [mind map](/mindmap-from-text) and turn it into a timeline once the shape holds.\n\nWhere they fall short: as living documents. A Gantt chart in a static doc is out-of-date the moment reality diverges from plan. Real teams that live in Gantt charts use dedicated tools (Asana, Monday, Jira Advanced Roadmaps) that auto-update from actual task status. Use Mermaid Gantt for the initial \"here's the plan\" artifact â the checkpoint at project kickoff â not for ongoing tracking.\n\nMermaid's gantt syntax supports date formats, section grouping, task durations, dependencies (`after taskId`), and milestones. It's intentionally simple c
21ompared to full PM tools â no resource assignment, no critical path highlighting, no exact-date-drag rescheduling. That's the tradeoff for something you can `git commit` and version-control alongside the code the roadmap describes.",scenarios:[{icon:"Calendar",title:"Project timeline & kickoff",body:"Six-week project, four workstreams, three milestones. A Gantt chart at kickoff makes 'when is this done' visible to everyone, not just the PM. Best for the plan-at-t-zero snapshot."},{icon:"Rocket",title:"Sprint & launch planning",body:"Marketing needs a landing page live by Tuesday, engineering ships the feature by Thursday, DevRel writes the blog post by Friday. A Gantt shows the dependencies before Slack thread #47 tries to."},{icon:"GitBranch",title:"Dependency tracking",body:"Task A blocks B, B blocks C. When there are more than 3 dependencies to track, a written list becomes unclear. A Gantt chart visualizes which tasks are on the critical path."},{icon:"Map",title:"Roadmap communication",body:"Quarter-level 'what are we shipping when'. Gantt is the language executives read â used for board updates, all-hands slides, and 'why is your quota this'."},{icon:"ShieldCheck",title:"Contract & SLA planning",body:"Client contracts with milestone-based payments, vendor SLAs with delivery dates. A Gantt chart is your source of truth for 'we said we'd have X by Y' â bring it to every progress review."}]},"chat-to-diagram":{keyword:"chat to diagram",metaTitle:"Chat to Diagram â AI Asks Questions, Draws for You (Free)",metaDescription:"Chat with AI to draw flowcharts, sequence diagrams, ERD, mind maps. AI asks 2-3 clarifying questions before drawing â better than one-shot for complex flows.",tagline:"Chat with AI to draw diagrams â no syntax, no guessing at the details.",examples:[{title:"Login flow with 2FA (chat mode)",prompt:"Draw a login flow. User enters email, then password, then a 2FA code. If 2FA fails, redirect to a reset page."},{title:"Order fulfillment sequence",prompt:"Sequence diagram: customer places order, gateway forwards to order service, order service writes to DB and calls notification service asynchronously."},{title:"Product launch mindmap",prompt:"Mind map for a SaaS launch: engineering, marketing, sales, support â each with 3-4 sub-tasks."},{title:"User signup with edge cases",prompt:"Draw the flow of user signup. Include email verification, password reset if forgot, and account lockout after 5 failed attempts."}],useCase:`Chat mode is the antidote to one-shot AI generation. Instead of guessing what you meant, the AI asks 2-3 clarifying questions â who are the actors, what are the events, is the call synchronous or asynchronous â before drawing anything. 22 23When the AI does draw, it also lists any assumptions it made in a confirmation card. If it added a return arrow you did not describe, an actor you did not mention, or a branch you did not intend, click Reject and the diagram redraws without that element. 24 25Chat mode is best for complex flows where a one-shot prompt would miss important details â a login flow with edge cases, a [sequence diagram](/sequence-diagram-from-text) with multiple services, a [state machine](/state-diagram-from-text) with lifecycle transitions. Reach for it when you want the AI to help you think through what to draw, not just execute a prompt verbatim. 26 27Everything else is the same as Quick mode â the same seven diagram types (flowchart, sequence, ERD, class, state, mindmap, Gantt), the same free tier, the same SVG / PNG / Markdown / OPML export. You can also mix the two: start with Quick to sketch a first draft, then switch to Chat to iterate on it. Both modes share the same underlying AI diagram generator.`,scenarios:[{icon:"Lightbulb",title:"Not sure how to phrase the prompt",body:"The AI's clarifying questions help you think through actors, events, and edge cases you may have missed. Better than staring at a blank input box wondering where to start."},{icon:"GitBranch",title:"Complex flow with many branches",body:"Multi-turn refinement lets you build up the diagram step by step. The AI tracks what you confirmed and what's still open, then draws everything at once."},{icon:"MessageSquare",title:"You want to double-check AI's assumptions",body:"Every generated diagram comes with a confirmation card listing anything the AI inferred. Reject anything wrong and the diagram redraws in seconds â no re-prompt needed."},{icon:"RefreshCw",title:"Iterating on a design review",body:"Chat mode is great for group design sessions â start with a rough description, refine as reviewers point out gaps. The AI keeps the conversation context across turns."},{icon:"Book",title:"Teaching or onboarding",body:"Show a new team member how a system works by letting them chat with the AI to derive the sequence diagram themselves. Better retention than reading finished docs."}],faq:[{q:"How is Chat mode different from Quick mode?",a:"Quick mode: one prompt in, one diagram out. Chat mode: AI asks 2-3 clarifying questions first, then draws. Use Quick when the flow is already clear in your head. Use Chat when you want the AI to help you think through actors, events, and edge cases."},{q:"How many questions does the AI ask before drawing?",a:"Typically 2-3, sometimes up to 4-5 for complex flows. There is a built-in budget so the AI will not ask forever. You can also type 'just draw it' at any point to skip remaining questions and let the AI use whatever context it already has."},{q:"What if the AI adds something I did not ask for?",a:"After drawing, the AI shows a confirmation card with anything it inferred â a return arrow, an actor, an edge c
27ase. Click Reject and the diagram redraws without that element. Click Accept and it's added to the diagram spec for the next iteration."},{q:"Which diagram types does Chat mode support?",a:"All seven â flowchart, sequence diagram, ERD, class diagram, state diagram, mindmap, and Gantt chart. Chat mode is deepest for sequence diagrams (actors + events + sync mode are structured slots); other types get lighter clarification but still benefit from the multi-turn refinement."},{q:"Is Chat mode free?",a:"Yes. Chat mode is free for logged-in users, with a generous daily rate limit that resets every 24 hours. Anonymous users can use Quick mode without signing in. Both modes share the same free tier."}]},"architecture-diagram-from-text":{keyword:"AI architecture diagram generator",metaTitle:"AI Architecture Diagram Generator â VizText",metaDescription:"Describe your system in plain English â services, databases, gateways, queues â and get an editable Mermaid architecture diagram. Free, export SVG/PNG.",tagline:"Describe your system's components and how they talk to each other. Get a layered architecture diagram.",examples:[{title:"Three-tier web app on AWS",prompt:"Architecture diagram for a web app on AWS: CloudFront CDN in front of an Application Load Balancer, routing to an ECS Fargate service running the API, which reads and writes to an RDS Postgres database and caches hot reads in ElastiCache Redis. Static assets served from S3."},{title:"Microservices with event bus",prompt:"Microservices architecture: API gateway in front of order service, payment service, and inventory service. Order service publishes events to Kafka, consumed by inventory service and a notification service. Each service owns its own Postgres database."},{title:"Serverless data pipeline",prompt:"Serverless data pipeline: S3 upload triggers a Lambda that validates the file and writes raw data to a data lake in S3, publishing an event to EventBridge. A second Lambda consumes that event, transforms the data, and loads it into a Redshift warehouse for analytics."},{title:"Mobile backend with auth",prompt:"Mobile app backend architecture: iOS and Android clients call an API gateway, which forwards to an auth service backed by Cognito, and a core API service backed by DynamoDB. Push notifications go through SNS. Static content is served from CloudFront and S3."}],useCase:`Architecture diagrams answer one question at a glance: what are the pieces of this system, and how do they talk to each other? Reach for one when you're writing a design doc that needs a birds-eye view before it dives into detail, when you're onboarding an engineer who needs "where does a request go" in ten seconds, or when you're presenting a proposed system to stakeholders who won't read a wall of bullet points. 28 29Where architecture diagrams differ from [flowcharts](/flowchart-from-text): a flowchart shows a process unfolding over time (step 1, then step 2, then a decision); an architecture diagram shows a system's static shape (this service calls that service, this queue sits between these two). The AI reads your description of components â gateways, services, databases, queues, caches, CDNs â and lays them out in layers (edge, compute, data) with labeled connections, using stadiums, cylinders, and rectangles to distinguish node kinds the way a whiteboard sketch would. 30 31One honest limitation: the diagram uses generic labeled shapes, not official AWS/GCP/Azure icon sets â Mermaid doesn't ship vendor iconography, so "RDS" or "S3" show up as clearly labeled cylinder/rectangle nodes rather than branded logos. For a quick internal design doc or an RFC that needs to communicate shape and data flow, this is exactly enough; for a client-facing slide deck that needs official cloud icons, you'll want to trace the generated layout into a tool like Lucidchart afterward.`,scenarios:[{icon:"LayoutTemplate",title:"System design docs & RFCs",body:"Before you write the detailed sections, give reviewers the shape of the system in one diagram. An architecture diagram at the top of an RFC saves ten Slack threads asking 'wait, what talks to what?'"}
31,{icon:"Cloud",title:"Cloud infrastructure planning",body:"Sketch a proposed AWS/GCP/Azure setup before you provision anything. Reviewers can spot a missing cache layer or an unnecessary hop faster on a diagram than in a Terraform plan."},{icon:"BookOpen",title:"Onboarding & architecture overviews",body:"New engineers ask 'how does a request flow through this system' on day one. An architecture diagram in the README answers it before they open a single file."},{icon:"ShieldCheck",title:"Security & vendor review",body:"Auditors and security reviewers want to see the trust boundaries â what's public-facing, what's internal, where data crosses a boundary. A labeled architecture diagram is the fastest way to answer 'show me the attack surface.'"},{icon:"GitCompare",title:"Migration & modernization planning",body:"Moving from a monolith to microservices, or from self-hosted to managed services? A before/after architecture diagram makes the migration plan concrete and reviewable."}],faq:[{q:"How does the AI architecture diagram generator work?",a:"You describe your system in plain English â the services, databases, queues, and gateways involved and how they connect â and the AI generates a Mermaid flowchart-style diagram with components grouped into layers (edge, compute, data) and labeled connections. There's no separate 'architecture' rendering engine; under the hood it uses the same flowchart syntax with conventions (cylinders for storage, subgraphs for layers) tuned specifically for system diagrams."},{q:"Does it use official AWS, GCP, or Azure icons?",a:"No. Mermaid doesn't ship vendor icon sets, so components render as clearly labeled shapes â cylinders for databases and storage, rectangles for compute and services, stadiums for gateways â rather than branded cloud logos. This keeps the diagram provider-agnostic and fast to generate; if you need official iconography for a client deck, use this as your first-draft layout and re-skin it in a tool like Lucidchart or draw.io."},{q:"Can I describe a multi-cloud or hybrid system?",a:"Yes. The AI doesn't care which cloud a component belongs to â describe an on-prem database talking to a cloud-hosted API, or a system spanning AWS and GCP, and it draws the connections as described. Naming the provider in your prompt (e.g. 'S3', 'GCS', 'on-prem Postgres') helps the AI label nodes accurately."},{q:"How detailed can the architecture diagram get before it becomes unreadable?",a:"Past roughly 15-20 components in one diagram, readability drops fast â the same rule of thumb as flowcharts. For large systems, describe one bounded context or one layer at a time (e.g. 'just the payment subsystem') and generate several focused diagrams rather than one sprawling map."},{q:"Can I edit the generated diagram?",a:"Yes. The split view shows the Mermaid source next to the live preview â add a service, rename a connection, or regroup layers by editing text. If you'd rather regenerate, add a sentence to your original prompt and rerun it."},{q:"Is the architecture diagram generator free?",a:"Yes, free with no signup. A generous per-IP daily rate limit (enforced via Upstash Redis, consistent across all Vercel edge regions) prevents abuse without affecting normal usage. Export as SVG for docs or PNG for slides, straight from the preview status bar."}]},"uml-diagram-from-text":{keyword:"AI UML diagram generator",metaTitle:"AI UML Diagram Generator â VizText",metaDescription:"Describe classes, a login sequence, or a lifecycle in plain English. The AI picks the right UML diagram â class, sequence, or state â and draws it.",tagline:"Describe your design. The AI figures out whether it's a class, sequence, or state diagram.",examples:[{title:"Class diagram: library system",prompt:"UML class diagram for a library system: Book (isbn, title, author), Member (id, name, email), Loan (dueDate, returnedDate) links a Member to a Book. Librarian extends Member with canManageCatalog boolean. Show associations and cardinality."},{title:"Sequence diagram: login handshake",prompt:"UML sequence diagram for a login handshake: client sends credentials to auth service, auth service verifies against the user database, on success issues a JWT, client stores the token and uses it for subsequent API calls."},{title:"State diagram: order lifecycle",prompt:"UML state diagram for an order: created -> paid -> shipped -> delivered. From created, can be cancelled. From paid, can be refunded. Cancelled and refunded are terminal."},{title:"Class diagram: strategy pattern",prompt:"UML class diagram using the strategy pattern: PaymentProcessor depends on a PaymentStrategy interface. Concrete strategies StripeStrategy and PayPalStrategy each implement charge(amount). Show the interface, implementations, and the composition relationship."}],useCase:`The full UML specification defines 14 diagram types, but in day-to-day engineering work, three do almost all the heavy lifting: [class diagrams](/class-diagram-from-text) (structure â what types exist, what they have, how they relate), [sequence diagrams](/sequence-diagram-from-text) (behavior over time â who calls whom, in what order), and [state diagrams](/state-diagram-from-text) (behavior over state â what states exist, which transitions are legal). This page is a UML hub: describe your design in plain English and the AI figures out which of the three fits, then draws it. 32 33Reach for a class diagram when the question is "what does the type system look like" â domain models, DDD aggregates, library APIs. Reach for a sequence diagram when the question is "what's the order of calls between actors" â API handshakes, distributed transactions, authentication flows. Reach for a state diagram when the question is "what states can this object be in, and what moves it between them" â order lifecycles, workflow statuses, protocol states. 34 35If you already know exactly which of the three you need, the dedicated pages (class diagram generator, sequence diagram generator, state diagram generator) go deeper on that one type â more examples, a longer syntax rundown, and type-specific FAQ. This page is for when you know you want "a UML diagram" but haven't decided which shape the answer takes â describe the design, and let the AI choose.`,scenarios:[{icon:"Box",title:"OOP design docs",body:"Not sure yet whether your design doc needs a structure view or a behavior view? Describe the design in plain English and let the AI classify it â you can always regenerate as a different UML type if it guesses wrong."},{icon:"Layers",title:"Architecture & code review prep",body:"Before a design review, sketch the relevant classes, the critical call sequence, or the object's lifecycle â whichever best explains the change you're proposing."},{icon:"GraduationCap",title:"Learning & teaching UML",body:"Students and bootcamp instructors use this to see canonical UML notation quickly â visibility markers, arrow types, lifelines â without opening a UML modeling tool."},{icon:"PenTool",title:"Technical interview whiteboarding",body:"Sketch a class hierarchy or a sequence of API calls the way you'd draw it on a whiteboard, then export it to include in a take-home submission or portfolio."},{icon:"BookOpen",title:"Design pattern documentation",body:"Factory, strategy, observer, and other classic patterns each have a canonical UML shape. Describe the pattern and get the standard diagram other engineers will recognize instantly."}
35],faq:[{q:"Which UML diagram types does this support?",a:"Three: class diagrams, sequence diagrams, and state diagrams â the three UML types engineering teams actually use day to day. This page doesn't generate use case, activity, component, or deployment diagrams; the full UML spec has 14 types, and Mermaid (the rendering engine underneath) only implements a practical subset."},{q:"How does the AI decide which UML diagram to draw?",a:"It reads your description for structural language ('has a', 'extends', 'implements' â class), interaction language ('sends', 'calls', 'responds' â sequence), or lifecycle language ('transitions to', 'moves from X to Y' â state) and classifies accordingly. If you want to guarantee a specific type, use the dedicated class/sequence/state diagram page instead â it locks the type so there's no ambiguity."},{q:"What if the AI picks the wrong diagram type?",a:"Regenerate with more explicit language ('draw a sequence diagram of...') or jump to the dedicated page for that type, which skips classification entirely and always draws that shape."},{q:"Does it support full UML notation â visibility markers, stereotypes, multiplicity?",a:"Yes for the supported subset: visibility markers (+/-/#/~), the <<interface>> stereotype, generics, and all standard relationship arrows for class diagrams; activation bars, async messages, and notes for sequence diagrams; composite states and the [*] start/end marker for state diagrams."},{q:"Can I edit the generated UML diagram?",a:"Yes. Every diagram opens in a split view with the Mermaid source next to the live render â edit the text directly, or add a sentence to your prompt and regenerate."},{q:"Is it free?",a:"Yes, free with no signup and a generous per-IP daily rate limit. Export as SVG or PNG from the preview status bar."}]},"ai-diagram-from-text":{keyword:"AI diagram generator from text",metaTitle:"AI Diagram Generator From Text â VizText",metaDescription:"Describe anything in plain English. The AI picks the right diagram type â flowchart, sequence, ERD, class, state, mindmap, or Gantt â and draws it.",tagline:"Describe anything in plain text. Get the diagram type that fits â no need to know which one you want first.",examples:[{title:"Onboarding flow (auto-classified as flowchart)",prompt:"New employee onboarding: HR sends offer letter, candidate signs, IT provisions laptop and accounts, manager schedules first-week 1:1s, employee completes compliance training by day 5."},{title:"Webhook delivery (auto-classified as sequence)",prompt:"Webhook delivery: our backend sends an event to the customer's webhook URL, if the customer's server returns a non-200 we retry with exponential backoff up to 5 times, then move the event to a dead-letter queue."},{title:"Quarterly roadmap (auto-classified as mindmap)",prompt:"Q2 roadmap mindmap: Platform (auth revamp, billing v2), Growth (SEO, referral program), Mobile (offline mode, push notifications), Support (help center rewrite, live chat pilot)."},{title:"Sprint plan (auto-classified as Gantt)",prompt:"Two-week sprint Gantt: design (days 1-2), backend build (days 2-6), frontend build (days 4-8, overlaps backend), QA (days 8-9), release (day 10)."}],useCase:`VizText covers seven diagram types under the hood â flowchart, sequence, ERD, class, state, mindmap, and Gantt â plus architecture diagrams built on the flowchart engine. This page is the entry point for when you have a description in your head but haven't decided which of those shapes fits it best. Type your description and the AI classifies it: process descriptions become [flowcharts](/flowchart-from-text), actor-to-actor interactions become [sequence diagrams](/sequence-diagram-from-text), hierarchical outlines become [mindmaps](/mindmap-from-text), and so on. 36 37This matters because most people don't think in diagram-type taxonomy â they think "I need to explain how our signup works" or "I need to show the shape of our Q2 plan," not "I need a flowchart" or "I need a mindmap." Auto-classification means you can describe the thing you actually care about and let the tool handle the translation into diagram vocabulary. 38 39If you already know exactly which diagram type you want, the dedicated per-type pages (flowchart, sequence, ERD, class, state, mindmap, Gantt, architecture) go deeper on that one type â more examples tuned to it, syntax notes, and type-specific FAQ. Use this page for the "just describe it and see what comes out" workflow, and the type-specific pages when you already know the shape of the answer.`,scenarios:[{icon:"Sparkles",title:"Quick prototyping without deciding a type first",body:"You have a description, not a diagram-type decision. Paste it here and let the classifier pick â faster than reading seven landing pages to figure out which one applies."},{icon:"BookOpen",title:"Documentation hubs for mixed content",body:"A team wiki that needs flowcharts, sequence diagrams, and mindmaps side by side doesn't need seven different tools â one generator that classifies and draws all of them keeps the workflow consistent."},{icon:"NotebookText",title:"Note-taking & knowledge base diagrams",body:"Turning meeting notes or a stream-of-consciousness description into a visual on the spot, without first categorizing what kind of visual it should be."},{icon:"GraduationCap",title:"Teaching & explaining concepts visually",body:"Instructors describing a concept out loud can paste the same description here and get whichever diagram shape best matches â useful when the 'right' diagram type isn't obvious to a non-technical audience."},{icon:"Users",title:"Non-engineers exploring diagramming",body:"Product managers and designers who don't know Mermaid syntax â or diagram-type names â can describe what they want in plain language and let the AI handle classification."}],faq:[{q:"How does auto-classification decide the diagram type?",a:"The AI reads your description for structural cues â steps and decisions suggest a flowchart, named actors exchanging messages suggest a sequence diagram, entities with relationships suggest an ERD, a hierarchy of topics suggests a mindmap, dated phases suggest a Gantt chart â and picks the closest fit before generating."},{q:"Can I force a specific diagram type instead of letting the AI choose?",a:"Yes. Use one of the type-specific pages (flowchart, sequence, ERD, class, state, mindmap, Gantt, or architecture diagram from text) â each one locks the type so there's no classification step, or pick a type explicitly from the picker on the home page before typing your prompt."},{q:"How accurate is the auto-classification?",a:"Accurate for clearly-worded descriptions in one of the seven supported categories. Ambiguous descriptions (e.g. a process that's also somewhat hierarchical) may get classified either way â if the result isn't what you wanted, regenerate with a type explicitly selected."},{q:"Which diagram types are supported?",a:"Seven core types â flowchart, sequence diagram, entity relationship diagram (ERD), UML class diagram, state diagram, mindmap, and Gantt chart â plus architecture diagrams, which use the flowchart engine with layered layout conventions."},{q:"Can I edit the result after it's generated?",a:"Yes, every diagram opens in a split view with editable Mermaid (or markmap, for mindmaps) source next to the live preview."},{q:"Is it free?",a:"Yes, free with no signup and a generous per-IP daily rate limit enforced via Upstash Redis. Export SVG, PNG, and â for mindmaps â Markdown or OPML too."}]},"ai-diagram-from-code":{keyword:"AI diagram from code",metaTitle:"AI Diagram From Code â VizText",metaDescription:"Paste a code snippet and get a class diagram, flowchart, or architecture diagram. No AST parser to install, no repo to clone â just paste and draw.",tagline:"Paste a code snippet. Get a class diagram, flowchart, or architecture diagram back.",examples:[{title:"TypeScript class hierarchy â class diagram",prompt:"Draw a UML class diagram from this code: abstract class Shape { abstract area(): number }
39 class Circle extends Shape { constructor(private radius: number) { super() } area() { return Math.PI * this.radius ** 2 } } class Rectangle extends Shape { constructor(private w: number, private h: number) { super() } area() { return this.w * this.h } }"},{title:"Express route chain â flowchart",prompt:"Draw a flowchart of this Express route handler's control flow: router.post('/checkout', authenticate, validateCart, async (req, res) => { const total = calculateTotal(req.body.items); if (total <= 0) return res.status(400).send('empty cart'); const charge = await chargeCard(req.user, total); if (!charge.success) return res.status(402).send('payment failed'); const order = await createOrder(req.user, req.body.items); res.json(order); })"},{title:"Recursive function â flowchart",prompt:"Draw a flowchart for this function: function quicksort(arr) { if (arr.length <= 1) return arr; const pivot = arr[0]; const left = arr.slice(1).filter(x => x < pivot); const right = arr.slice(1).filter(x => x >= pivot); return [...quicksort(left), pivot, ...quicksort(right)]; }"},{title:"docker-compose services â architecture diagram",prompt:"Draw an architecture diagram from this docker-compose.yml: services are 'web' (nginx, exposes 80, depends on 'api'), 'api' (node app, depends on 'db' and 'redis'), 'db' (postgres, volume mounted), 'redis' (cache), and 'worker' (background job processor, depends on 'redis' and 'db')."}],useCase:`Sometimes the fastest way to explain a piece of code is a picture, and the fastest way to get that picture isn't opening a dedicated static-analysis tool â it's pasting the snippet and describing what you want drawn. This page is for that workflow: paste a class definition and ask for a [class diagram](/class-diagram-from-text), paste a route handler and ask for a flowchart of its control flow, paste a docker-compose file and ask for the service topology as an [architecture diagram](/architecture-diagram-from-text). 40 41Be precise about what you're asking for â "draw a class diagram from this code" gets a different (and better) result than just pasting code with no instruction, because the AI reads code the way an engineer skimming a diff does: semantically, not by building a formal AST. That's the honest tradeoff versus a dedicated code-to-UML tool: no build step, no language server, works on any language the model understands (JavaScript, TypeScript, Python, Java, Go, Rust, and more) â but it's a best-effort reading, not a guaranteed-correct static analysis. For a quick PR review comment or an onboarding doc, that's the right tradeoff; for a diagram that must be pixel-perfect against the actual type system, review the output before you rely on it. 42 43Keep the pasted snippet scoped â one class hierarchy, one function, one docker-compose file â rather than an entire repository. The tool reads what fits in a prompt, not a whole codebase; for large-scale reverse engineering across dozens of files, this is a starting point for individual pieces, not a full-repo visualizer.`,scenarios:[{icon:"Archive",title:"Legacy code archaeology",body:"Inherited a file with no docs and unclear class relationships? Paste it and ask for a class diagram â faster than tracing inheritance by hand across multiple files."},{icon:"GitPullRequest",title:"PR review visual aid",body:"A gnarly control-flow change is easier to review as a flowchart than as a diff. Paste the new function into a comment-ready diagram before the review call."},{icon:"BookOpen",title:"Onboarding to an unfamiliar codebase",body:"New hires paste the core domain classes or the main request handler and get a diagram instead of reading 500 lines cold."},{icon:"GitCompare",title:"Refactor planning",body:"Before splitting a god class into smaller pieces, diagram the current structure so the 'before' state is documented and reviewable."},{icon:"GraduationCap",title:"Teaching code structure",body:"Instructors turn a student's (or a textbook's) code sample into a visual on the fly â useful for explaining inheritance, control flow, or service boundaries without a whiteboard."}],faq:[{q:"How accurate is a diagram generated from pasted code?",a:"It's a best-effort semantic reading by an LLM, not a formal AST-based static analysis. For clear, well-structured code it's reliably accurate; for code with heavy metaprogramming, dynamic typing tricks, or deeply nested logic, review the output â treat it as a strong first draft, not ground truth."},{q:"Which programming languages are supported?",a:"Any language the underlying model can read â JavaScript, TypeScript, Python, Java, Go, Rust, C#, Ruby, and most mainstream languages work well. There's no language server or compiler involved, so even pseudocode or a partial snippet works, just with less precision."},{q:"Can I paste an entire repository or a large file?",a:"Paste what fits comfortably in a single prompt â a class, a function, a route handler, a docker-compose file. This is a snippet-to-diagram tool, not a whole-repo visualizer; for large-scale architecture mapping, diagram one bounded piece at a time."},{q:"What diagram types can I get from code?",a:"Class diagrams (from class/interface definitions), flowcharts (from function control flow), and architecture diagrams (from service definitions like docker-compose or infra config). Say which one you want in your prompt for the best result."},{q:"Can I edit the generated diagram?",a:"Yes. The Mermaid source opens next to the live preview in a split view â edit directly, or refine your original prompt and regenerate."},{q:"Is this free?",a:"Yes, free with no signup and a generous per-IP daily rate limit. Export as SVG or PNG from the preview status bar."}]},"ai-diagram-from-json":{keyword:"AI diagram from JSON",metaTitle:"AI Diagram From JSON â VizText",metaDescription:"Paste a JSON payload, schema, or API response and get an ERD or class diagram showing the implied entities and relationships. Free, export SVG/PNG.",tagline:"Paste JSON â an API response, a schema, a document sample. Get an ERD or class diagram back.",examples:[{title:"Nested API response â E
43RD",prompt:'Draw an ERD from this JSON API response, treating nested objects as related entities: { "order": { "id": 123, "customer": { "id": 9, "email": "[email protected]" }, "items": [ { "productId": 55, "name": "Widget", "quantity": 2, "unitPrice": 9.99 } ], "total": 19.98 } }'},{title:"JSON Schema â ERD with types",prompt:'Draw an ERD from this JSON Schema: { "User": { "id": "integer", "email": "string", "posts": { "type": "array", "items": { "$ref": "Post" } } }, "Post": { "id": "integer", "title": "string", "authorId": "integer", "comments": { "type": "array", "items": { "$ref": "Comment" } } }, "Comment": { "id": "integer", "body": "string", "postId": "integer" } }'},{title:"MongoDB document sample â ERD",prompt:'Draw an ERD from this MongoDB document, showing embedded sub-documents as owned entities and any ObjectId fields as foreign key references: { "_id": "...", "customerId": "...", "shippingAddress": { "street": "...", "city": "..." }, "lineItems": [ { "sku": "...", "qty": 2 } ], "status": "paid" }'},{title:"OpenAPI schema snippet â class diagram",prompt:"Draw a UML class diagram from this OpenAPI component schema: UserDTO { id: integer, email: string, roles: string[] }, CreateUserRequest { email: string, password: string }, UserResponse extends UserDTO { createdAt: string }. Show inheritance and composition."}],useCase:'JSON is easy to read one level deep and painful to read once it\'s five levels of nested arrays and objects â which is exactly when a diagram helps. This page is for pasting raw JSON (an API response, a JSON Schema, a document-database sample, an OpenAPI component definition) and getting back a visual: an [ERD](/erd-from-text) when the shape is relational (entities with implied foreign keys), or a [class diagram](/class-diagram-from-text) when the shape is closer to a typed object model (DTOs, request/response shapes with inheritance).\n\nThe AI infers relationships from JSON structure the way an experienced backend engineer would read it: a nested object becomes an owned/embedded entity or a foreign-key relationship depending on context, an array of objects becomes a one-to-many relationship, and a field that looks like an ID reference (`userId`, `authorId`, a Mongo `ObjectId`) becomes a foreign key even without an explicit `$ref`. For JSON Schema input with real `$ref` pointers, those are honored directly.\n\nThis is a reading, not a formal schema validator â for deeply ambiguous JSON (is this nested object embedded data or a normalized reference? both are valid database designs) the AI makes a reasonable call, and you should sanity-check the cardinality it inferred before using the diagram in a real schema design doc. It shines at turning "here\'s a confusing 200-line JSON blob" into "here\'s the shape of the data" in one step.',scenarios:[{icon:"FileJson",title:"API response documentation",body:"A deeply nested API response is hard to read as raw JSON in a doc. Paste it here and drop the resulting ERD into your API reference instead."},{icon:"Database",title:"NoSQL / document database schema docs",body:"MongoDB and other document stores don't enforce a schema the way SQL does â pasting real document samples and visualizing the implied structure is often the only way to document what's actually being stored."},{icon:"Bug",title:"Debugging deeply nested payloads",body:"When a bug report includes a huge JSON payload, a diagram of its entities is faster to reason about than scrolling through indentation."},{icon:"ClipboardCheck",title:"API design review before building",body:"Sketch your planned response shape as JSON first, visualize it, and get feedback on the data model before you write a single line of backend code."},{icon:"Handshake",title:"Frontend/backend data contract docs",body:"When frontend and backend teams need to agree on a payload shape, a diagram of the agreed JSON structure is a clearer contract than a Slack thread of examples."}],faq:[{q:"How does the AI infer entities and relationships from raw JSON?",a:"Nested objects become related (embedded or foreign-key) entities depen
43ding on context, arrays of objects become one-to-many relationships, and ID-shaped fields (userId, authorId, an ObjectId) become foreign keys even without explicit schema annotations. For JSON Schema input with $ref pointers, those references are honored directly rather than inferred."},{q:"Does it support JSON Schema with $ref?",a:"Yes. Paste a JSON Schema document with $ref pointers between definitions and the AI treats each referenced definition as its own entity, connected by the relationship implied by the reference (array of refs â one-to-many, single ref â one-to-one or many-to-one depending on context)."},{q:"What's the difference between this and the ERD generator page?",a:"The ERD generator (erd-from-text) starts from a plain-English description of your schema. This page starts from actual JSON â a real API response, schema file, or document sample â and reverse-engineers the entity structure from it. Use whichever matches what you already have: a description, or real data."},{q:"Can it get the cardinality wrong?",a:"For genuinely ambiguous JSON â a nested object that could be either embedded data or a normalized reference â the AI makes its best inference. Treat the result as a strong starting point and correct the cardinality in the split-view editor if it doesn't match your actual data model."},{q:"Do I get an ERD or a class diagram?",a:"Whichever fits your description of what you want â say 'draw an ERD' for a relational/database view, or 'draw a class diagram' for a typed object-model view (useful for DTOs, request/response shapes with inheritance). If you don't specify, the AI infers from context."},{q:"Is this free?",a:"Yes, free with no signup and a generous per-IP daily rate limit. Export SVG or PNG from the preview status bar."}]},"chatgpt-mermaid-fixer":{keyword:"chatgpt mermaid fixer",h1:"ChatGPT Mermaid Fixer",metaTitle:"ChatGPT Mermaid Fixer â Render & Fix ChatGPT's Mermaid Code Free",metaDescription:"ChatGPT writes Mermaid but cannot draw it. Paste its output here to render, edit and export SVG/PNG â plus the prompts that make ChatGPT emit clean syntax. Free.",tagline:"ChatGPT writes the Mermaid. This draws it â paste, fix the syntax, edit, export.",ctaCode:`flowchart TD 44 A[User opens login page] --> B[Enter email and password] 45 B --> C{Credentials valid?} 46 C -->|No| D[Show error] 47 D --> B 48 C -->|Yes| E{2FA enabled?} 49 E -->|No| H[Create session] 50 E -->|Yes| F[Send 6-digit code] 51 F --> G{Code correct?} 52 G -->|No| F 53 G -->|Yes| H 54 H --> I[Redirect to dashboard]`,comparison:{heading:"Where ChatGPT stops, and what happens here",stepLabel:"Step",colA:"In the ChatGPT window",colB:"On this page",rows:[{step:"Turning a description into Mermaid",a:"Strong â this is the part it is good at. Describe the flow in plain English and it writes Mermaid that is usually close to correct.",b:"Same job, built in. But if ChatGPT already wrote the code, skip this step entirely and paste it."},{step:"Seeing the actual picture",a:"The chat shows Mermaid as a fenced code block. The window renders Markdown, not diagrams, so you read the syntax instead of looking at the shape.",b:"The canvas draws it as the code lands. No copy step, no third tool in between."},{step:"Finding out the code is broken",a:"The block looks fine either way. A missing bracket and a valid diagram are visually identical until something tries to render it.",b:"You find out immediately: it either draws, or the preview says it could not."},{step:"Fixing a syntax error",a:"Paste the error back and ask again. Sometimes it patches the one line; sometimes it returns a rewritten diagram with different node names.",b:"The error names the line it failed on and points at the character. The source sits in an editor beside the canvas, so you change that line and it re-renders as you type, with the rest of the diagram untouched."},{step:"Changing one node",a:"You describe the change and get a whole new diagram back, including the parts you were already happy with.",b:"Edit that line directly, or ask in Chat mode for a targeted change to the diagram already on the canvas."},{step:"Getting a file out",a:"Not available in the chat window. You copy the code out and go find something that renders it.",b:"SVG, PNG, or the Mermaid source, from the preview status bar."}],note:"Not affiliated with, endorsed by, or sponsored by OpenAI. ChatGPT is a trademark of OpenAI. This table describes two halves of one workflow rather than two competing products â the Mermaid that ChatGPT writes still needs somewhere to render, and that is the gap this page fills. Behaviour described
54in the left column reflects the ChatGPT web interface at the time of writing."},examples:[{title:"Login flow with 2FA and lockout",prompt:"Flowchart of a login flow: email and password, then a 2FA code if enabled. Wrong password shows an error and returns to the form. Lock the account after 5 failed attempts."},{title:"Microservice request path",prompt:"Sequence diagram: browser calls the API gateway, gateway authenticates against the auth service, then calls the order service, which writes to Postgres and publishes an event to Kafka."},{title:"Database schema from a feature spec",prompt:"ERD for a blogging platform: users write posts, posts have comments and tags, tags are many-to-many with posts. Include primary and foreign keys."},{title:"Order lifecycle state machine",prompt:"State diagram for an order: created, paid, packed, shipped, delivered. Payment can fail back to created, and anything before shipped can be cancelled."}],useCase:`Ask ChatGPT for a diagram and you get text, not a picture. Usually that text is Mermaid â a plain-text diagram syntax that looks like "flowchart TD / A[Start] --> B[End]". Sometimes it is ASCII art, sometimes it is a numbered description of boxes and arrows. What you almost never get is something you can paste into a document. 55 56That is not a bug in your prompt. The ChatGPT chat window has no Mermaid renderer built in. It can produce raster images through its image model, but those come out as flat pictures with garbled text in the boxes and no way to move a node or fix a typo. For anything that has to live in a design doc, a README, or a slide, the Mermaid path is the right one â you just need something on the other end that turns the syntax into an actual diagram. That is what this ChatGPT Mermaid fixer is for: paste what ChatGPT gave you, see it rendered, then edit it directly. 57 58To get Mermaid worth pasting, be explicit in your prompt. Something like: "Output only Mermaid code in a single code block. Use flowchart TD. No explanation before or after. Keep node labels under six words and avoid parentheses, colons and quotation marks inside labels." The last constraint matters more than it looks â unescaped punctuation inside a label is the single most common reason a model's Mermaid fails to parse. 59 60Four mistakes show up again and again in model-generated Mermaid, and they are worth recognising on sight. First, punctuation inside node labels: a label like A[Check user (admin?)] breaks the parser, and it needs quotes around the text. Second, invented arrow syntax â real Mermaid has a fixed set of arrows per diagram type, and models occasionally reach for one that belongs to a different type. Third, mixing diagram types in one block, such as sequence-diagram arrows inside a flowchart. Fourth, a stray prose sentence left above or below the code fence. When you paste here, the renderer reports the failing line instead of showing a blank canvas, and you can fix it in place â or hand the diagram to [Chat mode](/chat-to-diagram) and describe the change in words. 61 62Once it renders, everything downstream is normal editing. The split view keeps the source on one side and the diagram on the other, so a change to either shows up immediately. Export SVG for docs and slides, PNG for chat and tickets, or copy the Mermaid back out to commit alongside your code. If you would rather skip ChatGPT entirely, the same page will generate the diagram from a plain-English description â the prompts in the examples above are exactly the kind of thing that works. 63 64A note on names: VizText is an independent tool and is not affiliated with, endorsed by, or sponsored by OpenAI. ChatGPT and GPT are trademarks of OpenAI. This page describes how to render diagram syntax produced by ChatGPT and other language models; it does not use OpenAI's branding and does not claim any connection to it.`,scenarios:[{icon:"MessageSquare",title:"ChatGPT gave you code, not a diagram",body:"The answer ends in a Mermaid code block you cannot see. Paste it here and it becomes a real diagram in one step â no install, no signup, no local toolchain."},{icon:"Bug",title:"The Mermaid does not parse",body:"Unescaped brackets in a label, an arrow from the wrong diagram type, a sentence left above the code. The renderer points at the failing line instead of going blank."},{icon:"RefreshCw",title:"One box is wrong, the rest is fine",body:"Going back to ChatGPT for a small change often rewrites the whole diagram. Edit the node here directly, or describe the change in Chat mode and keep everything else intact."},{icon:"Download",title:"It needs to end up in a doc or a slide",body:"Export SVG for crisp scaling in Notion, Confluence or Google Slides, PNG for Slack and tickets. The chat window gives you neither."},{icon:"FileCode",title:"The diagram belongs next to the code",body:"Copy the cleaned-up Mermaid back out and commit it in a README or an ADR. Plain text diffs in review; a screenshot does not."}],faq:[{q:"Can ChatGPT create diagrams?",a:"It can write the syntax for one â most often Mermaid â but the chat window does not render it, so you see code rather than a picture. It can also generate a diagram as an image, but that c
64omes out as a flat raster with unreliable text and no way to edit it. The practical route is to have it write Mermaid and render that somewhere it can be drawn and edited."},{q:"Does ChatGPT render Mermaid?",a:"No. Mermaid code in a ChatGPT answer stays as text in a code block. Rendering needs a Mermaid engine, which is what this ChatGPT Mermaid fixer provides â paste the block and the diagram appears, broken syntax and all, with the failing line named."},{q:"Is this made by OpenAI?",a:"No. VizText is an independent tool, not affiliated with, endorsed by, or sponsored by OpenAI. ChatGPT and GPT are trademarks of OpenAI. This page exists because ChatGPT users need somewhere to render the Mermaid it writes."},{q:"What prompt makes ChatGPT output clean Mermaid?",a:"Ask for code only, name the diagram type, and constrain the labels: 'Output only Mermaid code in a single code block, use flowchart TD, no explanation, keep node labels under six words, and avoid parentheses, colons and quotation marks inside labels.' The label constraint prevents the most common parse failure."},{q:"Why does ChatGPT's Mermaid have syntax errors?",a:"Four causes cover most of it: punctuation inside node labels that was not quoted, an arrow style borrowed from a different diagram type, two diagram types mixed in one block, and prose left outside the code fence. Paste it here and the error message names the failing line so you can fix that one thing rather than regenerate everything."},{q:"Does it work with output from other models?",a:"Yes. Anything that emits Mermaid works the same way â Claude, Gemini, Copilot, a local model, or Mermaid you wrote by hand. Nothing on this page is specific to one provider."},{q:"Can I edit the diagram after it renders?",a:"Yes. The split view shows the Mermaid source next to the rendered diagram, and edits on either side update the other. You can also switch to Chat mode and describe the change in plain English instead of editing the syntax."},{q:"Is it free?",a:"Yes. Rendering and editing pasted Mermaid is free with no signup. Generating a diagram from a description uses the same free tier as the rest of the site, with a per-IP daily limit. Export SVG or PNG from the preview status bar."}]}},zh:{"flowchart-from-text":{keyword:"AI æµç¨å¾çæå¨",metaTitle:"AI æµç¨å¾çæå¨ ââ ä¸å¥è¯çææµç¨å¾ · VizText",metaDescription:"æä¸æ®µæååææµç¨å¾ãåæ¸ æ¥æ¥éª¤åå¤æåæ¯ ââ ç¨æ·æ³¨åãä¸åç»è´¦ãä¸çº¿é¨ç½² ââ å ç§åºå¾,è½æ¥çæ¹,å¯å¯¼åº SVG å PNGã",tagline:"åä¸æ®µæµç¨,æ¿ä¸å¼ æµç¨å¾,å¯¼åº SVG æ PNGã",examples:[{title:"ç¨æ·æ³¨å(带é®ç®±éªè¯)",prompt:"ç¨æ·æ³¨åæµç¨:è¾å ¥é®ç®±åå¯ç ,åééªè¯é®ä»¶,ç¨æ·ç¹å»éªè¯é¾æ¥,æ è®°è´¦æ·æ¿æ´»,è·³è½¬å° dashboardã"},{title:"ä¸åç»è´¦(æ¯ä»å¤±è´¥éè¯)",prompt:"çµåç»è´¦æµç¨:确认è´ç©è½¦,å¡«åå°å,éæ©æ¯ä»æ¹å¼,æ£æ¬¾,失败æå¤éè¯ 3 次å¦åæ¥é,æåæ¾ç¤ºè®¢å确认页ã"},{title:"CI/CD ä¸çº¿æµæ°´çº¿",prompt:"CI/CD æµæ°´çº¿:å¼åè æ¨éå° main,è·åæµ,éè¿åæ建 docker éå,æ¨éå°éåä»åº,é¨ç½²å° staging,è·åçæµè¯,éè¿åç°åº¦å°ç产ã"},{title:"æ¾åå¯ç ",prompt:"å¯ç éç½®æµç¨:ç¨æ·å¡«é®ç®±,å端çæä¸æ¬¡æ§ token 并åééç½®é®ä»¶,ç¨æ·ç¹å»é¾æ¥,è¾å ¥æ°å¯ç 两次,åç«¯æ ¡éªå¼ºåº¦åä¸è´æ§,æ´æ°å¯ç 并跳转ç»å½ã"}],useCase:`æµç¨å¾ç¨æ¥è®²æ¸ æ¥ä¸ä»¶äºæä¹ä¸æ¥æ¥èµ°å®,ä¸é´å¨åªéååãç¨æ·æ³¨åãä¸åç»è´¦ãæ¾åå¯ç è¿ç±»ç¨æ·æµç¨,CI/CDã订åä»ä¸åå°åè´§ãåå°å®æ¶ä»»å¡è¿ç±»å端æµç¨,è¿æåºæ éæ¶ç §çåçå¼çæå,é½éåç»ææµç¨å¾ã 65 66Mermaid æµç¨å¾æ¯çº¯ææ¬,è¿ä¸ç¹æ¯å¨ Figma æ draw.io éç»æç¨å¾å¤:å®è½è·ä»£ç æ¾å¨åä¸ä¸ªä»åºé,GitHub ç README å Notion éç´æ¥å°±æ¸²æåºæ¥,æ¹æµç¨åªè¦æ¹ä¸è¡å,ä¸ç¨éæ°ææ¡ãå¾ä¸ä¼å 为没人æ¿æéæ°æä¸éèæ ¢æ ¢è¿æã 67 68两ç§æ åµä¸è¦ç¨æµç¨å¾ãä¸æ¯å¤ä¸ªè§è²ä¹é´æ¥åè°ç¨ãè°å è°åææ¯éç¹,é£è¯¥ç»[æ¶åºå¾](/zh/sequence-diagram-from-text)ãäºæ¯ä½ å ³å¿çæ¯ä¸ä¸ªå¯¹è±¡è½å¤äºåªäºç¶æãåªäºè·³è½¬æ¯å 许ç,é£è¯¥ç»[ç¶æå¾](/zh/state-diagram-from-text)ãå¦å¤èç¹è¶ è¿ä¸å个就该ææä¸¤å¼ ââ åå¤,读ç人就è·ä¸ä¸å»äºã`,scenarios:[{icon:"Workflow",title:"æµç¨
68åæµæ°´çº¿",body:"æ°äººå
¥èãä¸çº¿é¨ç½²ã订åä»ä¸åå°åè´§ã主æµç¨ä¹å¤çåæ¯ã失败ãéè¯åè·¯é½è¦ç»åºæ¥çæ¶åç¨å®ã"},{icon:"GitBranch",title:"å¤æåæ¯å¤çé»è¾",body:"éæ±ææ¡£éåºç°å¥½å å±ãå¦æâ¦â¦å¦åâ¦â¦ãçæ¶å,ç»æå¾æ¯åæåå¿«ã产åç»çè½çæ,å¼åå°±è½ç
§çå®ç°ã"},{icon:"Bug",title:"ææ¥é®é¢åæ
éå¤ç",body:"æåºé®é¢æ¶ä»£ç å®é
èµ°çé£æ¡è·¯å¾ç»åºæ¥ãç»å¼ççåäºçä¸å¼ å¾,æ¯ç©ä¸å æ¥å¿æç¨ã"},{icon:"BookOpen",title:"å¼çæååæ°äººææ¡£",body:"ãX åºé®é¢çæ¶åå Yãè¿ç§å£å£ç¸ä¼ çç»éª,ç»æå¾æ¾è¿ README,æ°äººèªå·±å°±è½ç,ä¸ç¨æä¸æ¬¡ä¼è®²ååäºåéã"},{icon:"Repeat",title:"ç®æ³èå¾",body:"éé¿éè¯ã令ç桶éæµãç¶æ跳转 ââ è¿ç±»é»è¾ç»æå¾,æ¯å¨ä»£ç 注ééå伪代ç æ´å®¹æè¯å®¡ã"}],faq:[{q:"AI æµç¨å¾çæå¨æä¹ç¨?",a:"åä¸å¥è¯æè¿°æµç¨,æ¯å¦ã带é®ç®±éªè¯çç¨æ·æ³¨åã,ç´æ¥åºä¸å¼ Mermaid æµç¨å¾ãåªäºæ¯æ¥éª¤ãåªéæ¯å¤æãåæ¯ä¸æ ä»ä¹æ¡ä»¶,é½ä»ä½ çæªè¾éæ¨åºæ¥ãçæçæ¯åæ³ç Mermaid æºç ,æµè§å¨å®æ¶æ¸²æãä¸ç¨å¦è¯æ³,ä¹ä¸ç¨æå¼ç»å¾å·¥å
·ã"},{q:"ä»ä¹æ ·çæµç¨éåç»ææµç¨å¾?",a:"æå
å顺åºãä¸é´è¦åå¤æçé½è¡ã常è§çæ¯ç¨æ·æµç¨(注åãç»è´¦ãæ¾åå¯ç ãç»å½é´æ)ãCI/CD(æ建ãæµè¯ãé¨ç½²ãåæ»)ãæ
éå¤çæåã订åä»ä¸åå°åè´§ãåå°ä»»å¡ç¼æ,è¿æç®æ³èå¾(éé¿éè¯ãéæµãç¶æ跳转)ãä½ è¦æ¯è½ç¨ãå
ææ ·,ç¶åè¦ä¹è¿æ ·è¦ä¹é£æ ·,ååå°æä¸æ¥ãæå®è¯´æ¸
æ¥,å°±éåç»ã"},{q:"çæä¹åè½æ¹å?",a:"è½ãåå°åå±,Mermaid æºç å°±å¨é¢è§æè¾¹,æ¹ä¸ä¸ªåé¢è§ç«å»è·çåãå èç¹ãæ¹åæ¯ä¸çæ¡ä»¶ãææ¹åä»ä¸ä¸æ¹æå·¦å³ãææ个èç¹æ¢æåè§æåæ±å½¢,é½æ¯æ¹æåãä¹å¯ä»¥å¨åæ¥çæè¿°ä¸è¡¥ä¸å¥è¯éæ°çæã"},{q:"æä¹æ¾è¿ææ¡£æè
PPT?",a:"é¢è§åºç¶ææ ä¸æ导åºæé®ãSVG æ¯ç¢é,æ¾å¤å¤§é½ä¸ç³,éå设计ææ¡£åè¦æå°çä¸è¥¿;PNG éå PPTãNotion åè天工å
·ãç®æ é£è¾¹æ¯æ SVG å°±ä¼å
ç¨ SVG ââ 缩æ¾æ¸
æ¥,æåè¿è½éä¸åæç´¢ã"},{q:"å
è´¹å?æ次æ°éå¶å?",a:"å
è´¹,ä¸ç¨æ³¨å,导åºçå¾ä¸æ²¡ææ°´å°ãæ IP 设äºæ¯å¤©ççæ次æ°ä¸é,é²æ¢è¢«èæ¬å·ææ¥å£ææ¬,æ£å¸¸ç»å¾ç¢°ä¸å°ãç触åäº,çé¢ä¼åè¯ä½ è¿æå¤ä¹
éç½®ã计æ°å¨ææèç¹ä¸ä¸è´,æ¢è®¾å¤ç»ä¸è¿å»ã"},{q:"æ¯æä¸æå?",a:"æ¯æãçé¢è¯è¨ä¼ä¸è·¯ä¼ å°ç»æ¨¡åçæ令é,æ以ç¨ä¸æå,åºæ¥çå¾ä¸æ ç¾ä¹æ¯ä¸æ,ä¸ä¼ç»çç»çååè±æãä¸è±ææ··çåä¹è¡,å®ä¼æ主è¦çé£ç§è¯è¨ç»ä¸æ ç¾;æ³æå®çè¯,å¨æè¿°æ«å°¾å ä¸å¥ãç¨ä¸æãã"}]},"sequence-diagram-from-text":{keyword:"AI æ¶åºå¾çæå¨",metaTitle:"AI æ¶åºå¾çæå¨ ââ ä¸å¥è¯çææ¶åºå¾ · VizText",metaDescription:"æè¿°ä¸æ¬¡æ¥å£è°ç¨ãä¸æ¬¡ç»å½æ¡æ,æè
å 个æå¡ä¹é´çæ¶æ¯å¾æ¥,çæ带åä¸è
åç®å¤´ç Mermaid æ¶åºå¾,å¯ä»¥ç´æ¥æ¾è¿ææ¡£ã",tagline:"åæ¸
æ¥è°è°è°,æ¿ä¸å¼ 带åä¸è
åç®å¤´çæ¶åºå¾ã",examples:[{title:"OAuth 2.0 ææç 模å¼",prompt:"OAuth 2.0 ææç æµ:ç¨æ·å¨å®¢æ·ç«¯åºç¨ç¹å»ç»å½,éå®åå°æææå¡å¨,ç»å½å¹¶åæææ,æææå¡å¨éè¿éå®åè¿å code ç»å®¢æ·ç«¯,客æ·ç«¯ç¨ code + client_secret æ¢å access_token,åç¨ token è°ç¨èµæºæå¡å¨ APIã"},{title:"Stripe æ¯ä»ä¸åè°",prompt:"Stripe ç»è´¦æµç¨:å端éè¿å端å建 payment intent,åç«¯è° Stripe API,Stripe è¿å client_secret,åç«¯å¨ Stripe 侧确认æ¯ä»,Stripe éè¿ webhook éç¥å端æ¯ä»æå,å端履约订å并éè¿ WebSocket æ¨éç»å端ã"},{title:"Saga åå¸å¼äºå¡",prompt:"Saga 模å¼:订åæå¡å建订å(pending),åå¸äºä»¶,æ¯ä»æå¡æ£æ¬¾å¹¶åå¸ç»æäºä»¶,æåååºåæå¡éåºå,失败åæ¯ä»æå¡è¡¥å¿é款ã订åæå¡çå¬ææäºä»¶æç»ç¡®å®ç¶æã"},{title:"WebSocket æ¶æ¯æé",prompt:"WebSocket è天æ¶æ¯:客æ·ç«¯ A éè¿ WebSocket åæ¶æ¯å°æå¡å¨,æå¡å¨æä¹
åå°æ°æ®åº,éè¿ B ç WebSocket æ¨éç»æ¥æ¶æ¹ B,B åé已读åæ§,æå¡å¨æ´æ°æ¶æ¯ç¶æ并éç¥ Aã"}],useCase:`è¦è¯´æ¸
æ¥å æ¹ä¹é´è°å
è°è°ãä¼ äºä»ä¹ãè¿åäºä»ä¹,æ¶åºå¾æ
68¯æåéçãæ¥å£èè°ãç»å½é´ææ¡æ(OAuthãSAMLãJWT å·æ°)ãæå¡ä¹é´çæ¶æ¯å¾æ¥ã带éçæ°æ®åºäºå¡ãWebSocket å SSE æ¨é,é½å±äºè¿ä¸ç±»ã 69 70å®å¨å·¥ç¨ææ¡£éç¨å¾å¤,æ¯å 为å®é¼çä½ ææ¯ä¸ªåä¸è ç¹åãä½ æ²¡æ³å«ç³å°åãå端å¤çä¸ä¸ãââ æ¯æ ¹ç®å¤´é½å¾åæ¸ æ¥ä»è°å°è°ãä¼ çæ¯ä»ä¹ãæ¹æ¡è¯å®¡çæ¶åè¿ä¸ç¹å¾æç¨:è¯å®¡ç人å¯ä»¥ä¸æ ¹ç®å¤´ä¸æ ¹ç®å¤´å°æã 71 72ä¸ä¸ªå¤ææ å:ä½ å£å¤´è§£éçæ¶åãç¶åâ¦â¦ç¶åâ¦â¦ç¶åâ¦â¦ã说äºä¸æ¬¡ä»¥ä¸,è¦ç»çå°±æ¯æ¶åºå¾,ä¸æ¯[æµç¨å¾](/zh/flowchart-from-text)ãæ¶åºå¾è½è¡¨è¾¾å¼æ¥æ¶æ¯ãåä¸è çå¿ç¢åºé´,è¿è½å¨åæ ¹ç®å¤´ä¸å 注é说æåå ãå®ä¸æ é¿çæ¯å®å ¨å¹¶è¡ã没ææç¡®å åçå ³ç³»,é£ç§ç»ç»ä»¶å¾æ´åéã`,scenarios:[{icon:"FileText",title:"æ¥å£ææ¡£åèè°å¯¹é½",body:"REST æ GraphQL æ¥å£äºç¸è°ç¨çæ¶å ââ é´æãéæµãéè¯ãåè° ââ æ¶åºå¾ææ¯æ¬¡è°ç¨çæ¥é¾å»èåæ»:è°è°çãä»ä¹é¡ºåºãè¿åä»ä¹ã"},{icon:"Lock",title:"ç»å½åé´ææ¡æ",body:"OAuth 2.0ãSAMLãJWT å·æ°ãWebAuthn,å¡æ¯å¤æ¹äº¤æ¢ä»¤ççåè®®ãæ¶åºå¾é¼çä½ ç»æ¯ä¸ªè§è²åæ¯æ¡æ¶æ¯å½å,å®å ¨è¯å®¡çæ¶åè¦ç¨ã"},{icon:"Network",title:"æå¡ä¹é´çæ¶æ¯å¾æ¥",body:"å¾®æå¡ç¼æãäºä»¶é©±å¨ãæ¶æ¯éå(KafkaãRabbitMQ)ãWebSocket å SSE æ¨éã没æä¸ä¸ªä¸å¿è°åº¦çæ¶å,æ¶åºå¾è½è¯´æ¸ æ¥è°åçãè°æ¶çã"},{icon:"Database",title:"æ°æ®åºäºå¡åå é",body:"å¤æ¥éª¤äºå¡ãä¹è§éã两é¶æ®µæ交ãBEGINãSELECT FOR UPDATEãINSERTãCOMMIT çå åå ³ç³»,以åéè¶ æ¶ä¹åä¼åçä»ä¹,ç»åºæ¥ææ¸ æ¥ã"},{icon:"Zap",title:"äºä»¶é©±å¨çç³»ç»",body:"ä¸ä¸ªé¢åäºä»¶æåºç»å¤ä¸ªè®¢é æ¹ãsaga åè°é¿äºå¡ãCQRS éä¸æ¡å½ä»¤è§¦åä¸ä¸²äºä»¶ãä¸å¼ æ¶åºå¾å¾å¾æ¯ç¿»é¾è·¯è¿½è¸ªæ´å¿«è®²æç½ã"}]},"erd-from-text":{keyword:"AI ER å¾çæå¨",metaTitle:"AI ER å¾çæå¨ ââ ä¸å¥è¯çæ ERD · VizText",metaDescription:"ç¨å¤§ç½è¯æ述表åå段 ââ ç¨æ·ãæç« ãè¯è®º ââ çæ带主é®ãå¤é®åä¸å¯¹å¤å ³ç³»ç Mermaid ER å¾,å migration ä¹åå æç»æ对é½ã",tagline:"æ述表åå®ä»¬ä¹é´çå ³ç³»,æ¿ä¸å¼ 带主é®å¤é®ç ER å¾ã",examples:[{title:"å客åºè¡¨:ç¨æ·ãæç« ãè¯è®º",prompt:"å客æ°æ®åºç»æ:users(id, email, name, created_at)ãposts(id, user_id FK, title, body, published_at)ãcomments(id, post_id FK, user_id FK, body, created_at)ãä¸ä¸ªç¨æ·å¯ä»¥åå¤ç¯æç« ,ä¸ç¯æç« å¯ä»¥æå¤æ¡è¯è®º,ä¸ä¸ªç¨æ·å¯ä»¥çå¤æ¡è¯è®ºã"},{title:"å¤ç§æ· SaaS 表ç»æ",prompt:"å¤ç§æ· SaaS:organizations(id, name, plan)ãusers(id, org_id FK, email, role)ãworkspaces(id, org_id FK, name)ãdocuments(id, workspace_id FK, author_id FK, title, content)ãæ¯ä¸ªç»ç»æå¤ä¸ªç¨æ·å workspace,æ¯ä¸ª workspace æå¤ç¯ææ¡£,ç¨æ·å¯ä»¥åå¤ç¯ææ¡£ã"},{title:"çµå:ååã订åã订å项",prompt:"çµåç»æ:customers(id, email)ãproducts(id, sku, name, price)ãorders(id, customer_id FK, total, status, placed_at)ãorder_items(id, order_id FK, product_id FK, quantity, unit_price)ãä¸ä¸ªå®¢æ·ä¸å¤ä¸ªè®¢å,æ¯ä¸ªè®¢åå å«å¤ä¸ªè®¢å项,æ¯ä¸ªè®¢å项æåä¸ä»¶ååã"},{title:"åç¹åæ表ç»æ",prompt:"产ååæç»æ:users(id, anonymous_id, identified_at)ãevents(id, user_id FK, name, timestamp, properties json)ãsessions(id, user_id FK, started_at, ended_at, device)ãpage_views(id, session_id FK, url, referrer, duration_ms)ã"}],useCase:`ER å¾ç¨æ¥è®²æ¸ æ¥æ°æ®åæä»ä¹æ ·,èä¸ç¨ç´æ¥ç©ä¸æ®µå»ºè¡¨è¯å¥ç»å¯¹æ¹çãå®ææ¯å¼ 表ç»æä¸ä¸ªæ¡,ååºå段åç±»å,æ åºä¸»é®å¤é®,æå ³é®çæ¯æ表ä¹é´æ¯ä¸å¯¹ä¸ãä¸å¯¹å¤è¿æ¯å¤å¯¹å¤æ æ¸ æ¥ã 73 74ä¸ä¸ªæ¶åç¨å¾ä¸:å第ä¸ä¸ª migration ä¹åå æç»æç»åºæ¥ç»å¤§å®¶è¯å®¡;æ°äººæ¥æå·²æ项ç®çæ¶å;ææ¯æ¹æ¡éè¦è§£éæ°æ®æ¨¡å为ä»ä¹é¿è¿æ ·çæ¶åãè¦æ表æè å表çæ¶åä¹å¥½ç¨ ââ å¯ä»¥ç´æ¥å¨å¾ä¸æ åºåªäºå段æ¬å°åªãå¦æä½ è¦è®²çæ¯å¯¹è±¡æ¨¡åèä¸æ¯æ°æ®åºè¡¨,é£æ´è¯¥ç»[ç±»å¾](/zh/class-diagram-from-text)ã 75 76Mermaid ç erDiagram ç¨çæ¯é¸¦çªç¬¦å·,æ¯æå段类åã主é®å¤é®æ è®°åå ³ç³»ä¸ç说ææå,ç»è®¾è®¡ææ¡£å¤ç¨äºãå®ä¸ç»ç´¢å¼ãä¸ç»é®ä¹å¤ç约æ,ä¹ä¸ç®¡ç©çåå¨ ââ è¿äºè¦ç dbdiagram.io æè ORM èªå¸¦çå¯è§åãä½å¤§é¨åæ¶åä½ åªæ¯æ³è¯´æ¸ æ¥ãæ°æ®é¿ä»ä¹æ ·ã,ä¸å¼ è· migration æ¾å¨ä¸èµ·ç纯ææ¬ ER å¾æ£å¥½ã`,scenarios:[{icon:"Database",title:"设计æ°è¡¨ç»æ",body:"å第ä¸ä¸ª migration ä¹å,å æ表ãå段ãå ³ç³»ç»åºæ¥ãå段æä¹å½åãæ¯ä¸å¯¹å¤è¿æ¯å¤å¯¹å¤,对çä¸å¼ å¾è®¨è®º,æ¯æ£å¨äºä¸ªç¾¤éå说åç强ã"},{icon:"GitCompare",title:"æ表åéæ",body:"è¦æ users ä¸å¼ 表ææ usersãprofilesãpreferences?å¨å¾ä¸æ åºåªäºå段æ¬å°åªãååä¸¤å¼ å¾ä¸å¯¹æ¯,è¯å®¡ç人ä¸ç¼å°±è½çåºåªä¸ªå¤é®æäºã"},{icon:"BookOpen",title:"æ°äººä¸æåæ¶æææ¡£",body:"æ°äººç¬¬ä¸ä¸ªé®é¢å¾å¾æ¯ãé±è®°å¨åªå¼ 表éããREADME éç´§æ¨ç migration æ¾ä¸å¼ ER å¾,æ¯è®©ä»ç¿»åå个 model æ件快ã"},{icon:"ShieldCheck",title:"审计ååè§è¯å®¡",body:"çä¿ãSOC2ãGDPR è¯å®¡é½ä¼é®ä¸ªäººä¿¡æ¯åå¨åªãæä¹æµè½¬ãå¨ ER å¾ä¸æè¿äºå段æ åºæ¥,æ¯ç»ä¸å¼ åæ®µæ¸ åè¡¨æ ¼æ¸ æ¥ã"},{icon:"Layers",title:"èå¼åæ§è½çåè",body:"为äºè¯»å¾å¿«è¦ä¸è¦åèå¼?è¦ä¸è¦å ä¸å¼ é¢å join 好ç表?æä¸èå¼çæ¬ååèå¼çæ¬å¹¶ææ¾,讨论起æ¥å¿«å¾å¤ã"}],faq:[{q:"AI ER å¾çæå¨æä¹ç¨?",a:"ç¨å¤§ç½è¯æè¿°æåªäºè¡¨ã表ä¹é´ä»ä¹å ³ç³»,æ¯å¦ãç¨æ·åæç« ,æç« ä¸é¢æè¯è®º,è¯è®ºä¹å±äºç¨æ·ã,ç´æ¥çæä¸å¼ Mermaid ER å¾,带å®ä½ã主é®ãå¤é®,以åä¸å¯¹ä¸ / ä¸å¯¹å¤ / å¤å¯¹å¤å ³ç³»ãä¸ç¨å¦ ER å¾è¯æ³,ä¹ä¸ç¨æå¼å»ºæ¨¡å·¥å ·ã"},{q:"å段æ¯æä¹è¡¥åºæ¥ç?",a:"ä»ä¸ä¸ææ¨ãä½ è¯´ãç¨æ·æé®ç®±åå¯ç ã,è¿ä¸¤ä¸ªå°±æ为å段;ä½ è¯´ãæç« æå¾å¤è¯è®ºã,è¯è®ºè¡¨ä¸å°±å¤ä¸ä¸ª post_id å
76¤é®ã主é®é»è®¤ç» id;æè¿°éæå°å®¡è®¡æè æ¶é´ç,ä¼èªå¨è¡¥ created_at å updated_atãå段类åæååç ââ email ç» varchar,price ç» decimal,is_active ç» booleanã"},{q:"å¤å¯¹å¤åä¸é´è¡¨æä¹ç»?",a:"ç §å¸¸è¯´å°±è¡:ãç¨æ·å¯ä»¥æ¶èæç« ããä¸ä¸ªæ ç¾æå¨å¤ç¯æç« ä¸,ä¸ç¯æç« æå¤ä¸ªæ ç¾ããå®ä¼èªå·±å ä¸å¼ ä¸é´è¡¨,带èå主é®å两边çå¤é®ãä¹å¯ä»¥ç´æ¥æå®:ãå ä¸å¼ favorites 表,åæ®µæ¯ user_id å post_idã,å®å°±æä½ è¯´çå½¢ç¶ç»ã"},{q:"æä¹æ¾è¿ migration ææ¡£æè PR é?",a:"é¢è§åºç¶ææ å¯ä»¥å¯¼åº SVG æ PNGãSVG éåææ¡£ãREADMEãConfluence,缩æ¾æ¸ æ¥èä¸æåè½æ;PNG éåèå¤©å·¥å ·ãNotion åé®ä»¶ãä¹å¯ä»¥ç´æ¥å¤å¶åºå±ç Mermaid æºç ,GitHub markdownãNotionãObsidian é½è½æ¸²æ,以åè¦æ¹è¿æ¯æ¹æåã"},{q:"继æ¿ãå¤æè¿ç±»æ¨¡å¼æä¹è¡¨è¾¾?",a:"Mermaid ç ER å¾æ²¡æ继æ¿ç®å¤´,æ以å®ç¨å®é ç建表模å¼æ¥è¡¨è¾¾:å表继æ¿ç»æä¸å¼ 表å ä¸ä¸ª type å段;类表继æ¿ç»æç¶è¡¨å è¥å¹²å表,å表ååæåç¶è¡¨;å¤æå ³èç»æ两个å¯ç©ºå¤é®å ä¸ä¸ª type å段ãè¦ä¸¥æ ¼ç UML è¯ä¹,ç¨ç±»å¾é£ä¸ªé¡µé¢ã"},{q:"å è´¹å?è¦æ³¨åå?",a:"å¿«é模å¼å è´¹,ä¸ç¨æ³¨å,导åºçå¾ä¸æ²¡ææ°´å°,æ IP ææ¯å¤©ç次æ°ä¸éã对è¯æ¨¡å¼ä¹å è´¹,ä½è¦ç»å½ ââ å¤è½®å¯¹è¯çä¸ä¸æå¾è·è´¦å·ç»å¨ä¸èµ·ãç¨éç¹å«å¤§ãéè¦åç¬å®¹éç,èµ°è系页说ä¸å£°ã"}]},"state-diagram-from-text":{keyword:"AI ç¶æå¾çæå¨",metaTitle:"AI ç¶æå¾çæå¨ ââ ä¸å¥è¯çæç¶ææºå¾ · VizText",metaDescription:"æè¿°ä¸ä¸ªç¶ææº ââ 订åç¶æãç°åº¦åå¸ãå·¥åæµè½¬ ââ çæ带ç¶æå跳转æ¡ä»¶ç Mermaid ç¶æå¾,å¯å¯¼åº SVG å PNGã",tagline:"æè¿°ä¸ä¸ªç¶ææº,æ¿ä¸å¼ 带跳转æ¡ä»¶çç¶æå¾ã",examples:[{title:"订åç¶æ(å«åæ¶åé款)",prompt:"订åç¶ææº:draft -> submitted -> paid -> shipped -> deliveredãdraft å¯åæ¶,paid å¯é款,æ¯ä»å¤±è´¥å submitted éå draftãcancelled å refunded æ¯ç»æã"},{title:"åè½ç°åº¦åå¸",prompt:"åè½ç°åº¦åå¸ç¶ææº:draft -> internal_testing -> beta -> gradual_rollout -> stableãä»»ä½ç¶æå¯åéå°ä¸ä¸ç¶æãgradual_rollout å¦æææ æ¶åå¯ä»¥ç´æ¥è·³å° killedãkilled æ¯ç»æã"},{title:"客æå·¥åæµè½¬",prompt:"客æå·¥åæµè½¬:new -> triaged -> assigned -> in_progress -> waiting_customer -> resolved -> closedãä»»ä½éç»æå¯ä»¥åçº§å° escalatedãresolved å客æ·å¯ä»¥å¨ 7 天å éå¼å assignedã"},{title:"OAuth token ççå½å¨æ",prompt:"OAuth access_token çå½å¨æ:issued(ææ)ãissued -> expired(TTL å°æ)ãissued -> revoked(ç¨æ·ç»åºæ管çåæ¤é)ãexpired è¥ refresh_token ææå¯å·æ°å issuedãrevoked æ¯ç»æã"}],useCase:`å½ä½ å ³å¿çä¸æ¯ãå åä»ä¹ååä»ä¹ã,èæ¯ãè¿ä¸ªä¸è¥¿ç°å¨å¤äºä»ä¹ç¶æ,ä»è¿ä¸ªç¶æè¿è½åæ³å°è·³å°åªã,就该ç»ç¶æå¾ãéç¨ç对象æ¯é£äºä¼ç»è¿ä¸ä¸²æååçç¶æã并ä¸åªä¸ªç¶æè½æ¥åªä¸ªç¶æææç¡®è§åçä¸è¥¿ ââ 订åãææ¡£ãè´¦å·ãç°åº¦å¼å ³ã订é ã 77 78æä¸ä¸ªå¾ææ¾çä¿¡å·:å¢éå¼å§äºè®ºãç¨æ·è½ä¸è½åæ¶å¤äºå·²å»ç»åå¾ éªè¯ããè¿é®çæ¯ç¶æåä¸åæ³,ä¸æ¯æµç¨é¡ºåºãç¶æå¾é¼çä½ ææ¯ä¸ªç¶æåä¸éãæ¯æ¡è·³è½¬æ¾å¼ç»åºæ¥ ââ ç»çè¿ç¨éå°±ä¼åç°é£äºåæ¬ä¼ä»¥çº¿ä¸ bug å½¢å¼åºç°ççç¾ã 79 80Mermaid ç stateDiagram-v2 æ¯æå¤åç¶æã并ååºåãè¿å ¥åéåºæ¶çå¨ä½,è¿ææ åç \`[*]\` èµ·æ¢æ è®°ã订åå订é çæµè½¬ãææ¡£ç审æ¹ç¶æã设å¤çå·¥ä½æ¨¡å¼ãç°åº¦çå个é¶æ®µ,以åéè¦å审计è¯æè¾¹çæ¸ æ¥ççå½å¨æ,é½éåãå®ä¸æ é¿çæ¯å 个æç¶æç对象ä¹é´æä¹äºç¸å½±å ââ é£ç§åé ä¸å¼ [æ¶åºå¾](/zh/sequence-diagram-from-text)ã`,scenarios:[{icon:"ToggleRight",title:"表ååå导çç¶æ",body:"å¤æ¥å导ãç»è´¦æ¼æãæ°æå¼å¯¼ãè稿ãå¾ å®¡ãå·²éè¿ã已驳ååèªå¯¹åºä¸åççé¢åæéæ¶,ç¶æå¾å°±æ¯è¿å¥è§åçå¯ä¸åºå¤ã"},{icon:"Cog",title:"审æ¹åå·¥ä½æµ",body:"代ç è¯å®¡ç¶æã订åç¶æãå·¥åç¶æãå¡æ¯ä¼ç»è¿è¥å¹²ä¸ªæååçé¶æ®µã并ä¸è§å®äºè°è½è§¦ååªæ¬¡è·³è½¬ç对象,é½å¼å¾ç»ä¸å¼ ã"},{icon:"RefreshCw",title:"éè¯åæ¢å¤",body:"ä»»å¡ä»çå¾ å°è¿è¡,åå°æåã失败ãåæ¶ãéè¯ä¸ãéè¯é»è¾ä¸å¤æ(éé¿ãæ»ä¿¡éå),çç¶æå¾æ¯çéè¯ä»£ç 好ç解ã"},{icon:"CircleDot",title:"å端ç»ä»¶ç¶æ",body:"å è½½ä¸ã空ç¶æãåºéãæå ââ æ¯ä¸ªé¡µé¢é½å¾å¤çè¿åç§ãç¶æå¾æ设计è§èéç约å®æå°æé¢ä¸:è¿ä¸ªç»ä»¶ç®¡åªå ç§ç¶æãæä¹è½¬ã"}
80,{icon:"FileCode",title:"åè®®å设å¤è§è",body:"TCP æ¡æãWebSocket è¿æ¥ççå½å¨æã硬件çå·¥ä½æ¨¡å¼ãåè®®è§èä¸ç´ç¨ç¶æå¾å,å 为å®ç²¾ç¡®å°å¯ä»¥ç §çå®ç°ã"}]},"class-diagram-from-text":{keyword:"AI UML ç±»å¾çæå¨",metaTitle:"AI UML ç±»å¾çæå¨ ââ ä¸å¥è¯çæç±»å¾ Â· VizText",metaDescription:"æè¿°ç±»çå±æ§ãæ¹æ³å继æ¿å ³ç³»,çæ Mermaid UML ç±»å¾,ç¨å¨è®¾è®¡ææ¡£ãææ¯æ¹æ¡å代ç è¯å®¡éã",tagline:"æè¿°ç±»ãå±æ§å继æ¿å ³ç³»,æ¿ä¸å¼ UML ç±»å¾ã",examples:[{title:"å ä½å¾å½¢(æ½è±¡åºç±»)",prompt:"UML ç±»å¾:æ½è±¡ç±» Shape å« area() æ¹æ³,åç±» Circle(radius: double)ãRectangle(width, height)ãTriangle(base, height),åèª override area()ã"},{title:"åå·¥å±çº§(带è§è²)",prompt:"å工类å±çº§:Person(name, email, phone)ãEmployee ç»§æ¿ Person(employeeId, salary, hireDate)ãManager ç»§æ¿ Employee(directReports å表)ãContractor ç»§æ¿ Person(contractEnd, hourlyRate)ãæ¾ç¤ºå¯è§æ§æ è®°å getterã"},{title:"çµåé¢å模å",prompt:"çµåé¢å模å:Customer æå¤ä¸ª OrderãOrder æå¤ä¸ª LineItemãLineItem å¼ç¨ Product å« unitPrice å quantityãProduct æ categoryãskuãpriceãæ¾ç¤ºå ³èçåºæ°åå ³é®æ¹æ³ã"},{title:"æ¯ä»å¤ç(çç¥æ¨¡å¼)",prompt:"æ¯ä»å¤çéç¨çç¥æ¨¡å¼:PaymentProcessor ä½¿ç¨ PaymentStrategy æ¥å£ãå ·ä½çç¥:StripeStrategyãPayPalStrategyãCryptoStrategyãæ¯ä¸ªå®ç° charge(amount) å refund(txId)ãæ¾ç¤ºæ¥å£å®ç°åç»åå ³ç³»ã"}],useCase:"ç±»å¾è®²çæ¯ä»£ç çç»æ:æåªäºç±»åãæ¯ä¸ªç±»åæä»ä¹å段åæ¹æ³ãç±»åä¹é´é 继æ¿ãç»åè¿æ¯å ³èè¿èµ·æ¥ã\n\nä¸ä¸ªå¸¸ç¨åºå:æ°äººææ¡£é说æé¢å模åæä¹ç»ç»;ææ¯æ¹æ¡éæä¸å¥æ°çç±»å±æ¬¡æè ä¸æ¬¡éæ;é¢è¯ç½æ¿ä¸å¿«éæ设计ç»åºæ¥ãå®ä¹æ¯å设计模å¼æçäºçæ¹å¼ ââ å·¥åãçç¥ãè§å¯è ã访é®è åæä¸å¥åºå®ç»æ³,çç人ä¸ç¼å°±è®¤åºæ¥ãè¦è®²çæ¯æ°æ®åºè¡¨èä¸æ¯å¯¹è±¡æ¨¡å,é£è¯¥ç» [ER å¾](/zh/erd-from-text)ã\n\nMermaid ç classDiagram æ¯æ常ç¨ç UML è®°å·:å¯è§æ§(`+` å ¬å¼ã`-` ç§æã`#` åä¿æ¤ã`~` å å )ãæ½è±¡ç±»åæ½è±¡æ¹æ³ã`<<interface>>` æ 注ãæ³å,以ååç§å ³ç³»ç®å¤´(ç»§æ¿ `<|--`ãç»å `*--`ãèå `o--`ãå ³è `--`ãä¾èµ `..>`)ãå®ä¸æ¯å®æ´ UML ââ 没ææ³³é,ä¹æ²¡æå®æ´çæ´»å¨å¾è¯ä¹ ââ ä½åå·¥ç¨ææ¡£çæ¶åè¿åèæ¯å¥½äº,è½é¼çä½ åç®åç¹ãçè¦å®æ´ UML,é£å¤åæ¯æ¿éå·¥å ·äºã",scenarios:[{icon:"Box",title:"é¢å模å",body:"UserãOrderãPaymentãInvoice ââ ä¸å¡éçé£äºåè¯ãå段ãæ¹æ³ãå½¼æ¤çå ³ç³»é½å¨ç±»å¾ä¸,æ°äººçä¸ç¼å°±ç¥éè¿ä¸ªç³»ç»å¨ç®¡ä»ä¹ã"},{icon:"Layers",title:"DDD çèååéçä¸ä¸æ",body:"é¢å驱å¨è®¾è®¡ç产åºæ¬æ¥å°±æ¯ç±»å¾ãèåæ ¹ãå®ä½ãå¼å¯¹è±¡,以åå®ä»¬ä¹é´ç¡®åçå ³ç³» ââ ç±»å¾æ¬èº«å°±æ¯è§èã"},{icon:"Library",title:"åºå SDK çæ¥å£è®¾è®¡",body:"å 1.0 ä¹åå æå ¬å¼åºå»ç API ç»æç±»å¾ãå«äººæ¥ææ¡£ä¼å çè¿å¼ å¾,ææ¸ æ¥ä½ æ´é²äºä»ä¹,æ¯åªå注éæ¸ æ¥ã"},{icon:"GitPullRequest",title:"éææ¹æ¡",body:"æ½è¿ä¸ªæ¹æ³ãæªé£ä¸ªå段ãæä¸ä¸ªç±»åæä¸ä¸ªãååä¸¤å¼ ç±»å¾ä¸æ,è¯å®¡ç人ä¸ç¼çå°åªéæ¯ç ´åæ§æ¹å¨ã"},{icon:"BookOpen",title:"å设计模å¼",body:"å·¥åãçç¥ãè§å¯è ã访é®è ,æ¯ä¸ªç»å ¸æ¨¡å¼é½æåºå®çç±»å¾å½¢ç¶ãæ¹æ¡éæ¾ä¸å¼ ,çç人ä¸ç¨è¯»å®å°±ç¥éä½ å¨ç¨åªä¸ªã"}]},"mindmap-from-text":{keyword:"AI æ维导å¾çæå¨",metaTitle:"AI æ维导å¾çæå¨ ââ ä¸å¥è¯çææç»´å¯¼å¾ Â· VizText",metaDescription:"ç»ä¸ä¸ªé¢ç®,çæè½æå å±å¼çæ维导å¾ãåè§åãåæ纲ãæ´ç读书ç¬è®°é½è½ç¨,å¯ä»¥å¯¼åº OPML ä¸¢è¿ XMindã",tagline:"ç»ä¸ä¸ªé¢ç®,æ¿ä¸å¼ è½æå å±å¼çæ维导å¾ã",examples:[{title:"产ååå¸åçåå¤æ¸ å",prompt:"产ååå¸æ维导å¾:å¸åº(SEOã广åã社åªãPRãé®ä»¶),å·¥ç¨(å端ãå端ã移å¨ç«¯ãåºç¡è®¾æ½),è¿è¥(客æãè´¦åãæ³å¡ãåè§),åæ(dashboardãæ¼æã群ç»è¿½è¸ª)ãæ¯æ¡åæ¯ä¸å 2-3 个å¶åèç¹ã"},{title:"软件æ¶æè¦èèåªäºäº",prompt:"æ° SaaS ç软件æ¶ææ维导å¾:å¯é æ§(SLOãçæ§ãäºæ ååº),å¯æ©å±æ§(ç¼åãåçãéå),å®å ¨(认è¯ãå¯é¥ã审计),ææ¬(计ç®ãåºå£ãåå¨),å¼åä½éª(ææ¡£ãå¼åç¯å¢ãCI é度)ã"},{title:"é«çº§å·¥ç¨å¸é¢è¯åå¤",prompt:"èµæ·±è½¯ä»¶å·¥ç¨å¸é¢è¯åå¤æ维导å¾:ç³»ç»è®¾è®¡(æ°æ®åºãç¼åãéåãåçãCDNãè´è½½åè¡¡),ç®æ³(æ°ç»ãæ ãå¾ãDPãè´ªå¿),è¡ä¸ºé¢è¯(é¢å¯¼åãå²çªå¤çãæé¿),é¢åç¥è¯(ç®æ å ¬å¸åä»ä¹å°±å¦ä»ä¹)ã"},{title:"å¨æ«é¡¹ç®ç¹å",prompt:"å¨æ«é¡¹ç®æ维导å¾:å¦ä¹ (åç¼è¯å¨ãåæ°æ®åºãå shell),å·¥å ·(å·¥ä½æµèªå¨åãå¼åæç),游æ(å½é è±¡æ£ AIãroguelikeãå¡é²),æ°æ®(个人åæãä¹ æ¯è¿½è¸ªãdashboard)ãæ¯æ¡ä¼°ç®éè¦å¤å°ä¸ªå¨æ«ã"}],useCase:`æ维导å¾ç¨å¨æ³æ³è¿æ²¡æå½¢çé¶æ®µ:é¢ç®å¾å¤§,ä½ è¿ä¸ç¥éåªäºæ¯ä¸çº§ãåªäºæ¯äºçº§,è¿æ纲é½åä¸åºæ¥ã 81 82å®çé¿å¤æ¯æ并åå ³ç³»åä»å±å ³ç³»åå¼ãåæ ·ä¸å å 容,åæä¸ä¸²ç¬¦å·å表çä¸åºå±æ¬¡,ç»ææ å°±è½çåºæ¥ãä½å®ä¸ç®¡é¡ºåº,ä¹ä¸ç®¡è§å ââ é£æ¯[æµç¨å¾](/zh/flowchart-from-text)å[ç¶æå¾](/zh/state-diagram-from-text)çäºãæ以å®éåçåºåæ¯ãæ³æ³çå½¢ç¶ãæ¬èº«å°±æ¯è¦ä¼ è¾¾çä¸è¥¿:头èé£æ´ãç»æ°äººåå®ä¸ä¸ªå¦ä¹ èå´ãåææ¡£ä¹åå æç»æã 83 84Mermaid ç mindmap ç¨ç¼©è¿è¡¨ç¤ºå±çº§,èç¹å¯ä»¥æ¯æ¹æ¡ãåè§ãå 边形ãåå½¢,ç¨æ¥åè§è§åºåãè· XMindãMindMeister è¿ç±»ä¸ä¸å·¥å ·æ¯,å®æ æåå¾å¾ç®å ââ 没æå¾æ ãä¸è½å¯ææ¬ãä¸è½æçéæãæ¢æ¥çæ¯çº¯ææ¬,å¯ä»¥è·ä»£ç ä¸èµ·è¿çæ¬åºã`,scenarios:[{icon:"Lightbulb",title:"头èé£æ´",body:"ç«é¡¹ä¼ãæ³åè½ãå¼æ°æ¹åãåæ£é¶æ®µç¨æ维导å¾æ¯ç¨å表好 ââ å·²ç»æ³å°çæ¯ä»ä¹å½¢ç¶ãåªä¸åè¿æ¯ç©ºç,çå¾è§ã"},{icon:"Rocket",title:"åè½è§åååå¸åå¤",body:"æä¸ä»¶å¤§äºææå ææ´»ãç åãå¸åºãè¿è¥ãæ°æ®åå ä¸æ¯,æ¯çå¶åæ¯ä¸ä»¶å
84
·ä½è¦äº¤ä»çä¸è¥¿,æ¼äºåªåä¸ç¼è½çåºæ¥ã"},{icon:"Search",title:"è°ç åç«ååæ",body:"çä¸ä¸ªæ°æ¹å?æ¯ä¸ªç«åä¸ä¸ªèç¹,å®ä»·ãåè½ãéæãç®æ ç¨æ·åå ä¸æ¯ãæ¢ç´¢é¶æ®µæ¯æè¡¨æ ¼å¿«ã"},{icon:"MessagesSquare",title:"ä¼è®®è®°å½åå¤ç",body:"边讨论边å¾å¾ä¸è®°,è¯é¢è·³æ¥è·³å»ä¹ä¸ä¼ä¸¢ä¸ä¸æãä¼ååç,æ维导å¾æ¯ä¸æ¡ä¸æ¡çæµæ°´è®°å½å¥½æ«ã"},{icon:"Sparkles",title:"产åå®ä½åçç¥",body:"ä¸é¡µçº¸è¯´æ¸
æ¥æ们æ¯åä»ä¹çãæ维导å¾é¼çä½ ææ¯æ±ãååãä¸åä»ä¹åå
·ä½,æ¯å 段è¯å¥½è¯»ã"}],faq:[{q:"AI æ维导å¾çæå¨æä¹ç¨?",a:"ç»ä¸ä¸ªé¢ç® ââ æ³å¦çä¸ä¸ªé¢åãè¦è§åçä¸ä¸ªé¡¹ç®ãè¦æ¢³ççä¸æ¬ä¹¦ ââ ç´æ¥çæä¸å¼ æä¸å¿ä¸»é¢ãä¸å°äºæ¡ä¸»å¹²ãæ¯æ¡ä¸»å¹²ä¸é¢ä¸¤ä¸å±ç导å¾ãçæçæ¯ç¼©è¿å¼ç markdown 大纲,æµè§å¨æ¸²ææå¯äº¤äºçç»å¸,è½æå ãè½æãè½ç¼©æ¾ã"},{q:"ä»ä¹é¢ç®éåç»æ维导å¾?",a:"æ天ç¶å±çº§çé½éåã常è§çæ¯å¦ä¹ ç¬è®°(ä¸æ®µåå²ãä¸é¨å¦ç§ãä¸æ¬ä¹¦çç®å½)ã项ç®è§å(åå¸åå¤ãå©ç¤¼æ¸
åãä¸å¦æçå®æ)ã头èé£æ´(åè½ç¹ãåç¹ãå³ççæ£åé¢)ãå
容æ纲(æç« ãæ¼è®²ãè§é¢èæ¬)ãåªè¦ä½ è½æ³è±¡æãä¸å¿ä¸ä¸ªé¢ç®,åå¨æ£å¼è¥å¹²æ¯ã,å°±è½ç»ã"},{q:"ç»åºæ¥è½äº¤äºå?",a:"è½ãç¹èç¹æå æå±å¼è¿ä¸æ¯,空ç½å¤æç平移,æ»è½®æè
åæ缩æ¾,ææºä¸ç¹ä¸ä¸æå ãç¼è¾éç»çæ¶åä¼ä¿çå½åè§è§,ä¸ä¼è·³åå»ãè¿æ¯ markmap æ¯éæ SVG 强çå°æ¹ ââ 两ç¾å¤ä¸ªèç¹ä¹è¿è½çã"},{q:"æä¹å¯¼å° XMind æè
Obsidian?",a:"åç§æ ¼å¼:SVG(ç¢é,è´´ææ¡£)ãPNG(ä½å¾,è´´ PPT åè天工å
·)ãMarkdown(缩è¿å¼æºç ,Obsidian éç´æ¥æ¥çç¼)ãOPML(大纲éç¨æ ¼å¼,XMindãMindNode å大é¨å大纲工å
·è½ç´æ¥è¯»)ãOPML ä¿çå®æ´çå±çº§åæå,SVG ä¿çç»åºæ¥çæ ·å,çä½ è¦å¾åªé
84ã"},{q:"çæä¹åè½æ¹å?",a:"è½ãåå±ä¹å markdown æºç å°±å¨ç»å¸æè¾¹,æ¹ä¸ä¸ªåç»å¸ç«å»è·çåãå ä¸æ¯å°±å¤æä¸ä¸ª ##,æ³å¾ä¸æªä¸çº§å°±å¤å ä¸ä¸ª #,æ¬åæ å°±åªåç²è´´ãä¹å¯ä»¥å¨åæ¥çé¢ç®åé¢è¡¥ä¸å¥ã顺便讲讲é¢ç®ãåçæä¸æ¬¡,å®ä¼ææ°èå´éç»ã"},{q:"å
è´¹å?æ次æ°éå¶å?",a:"å
è´¹,ä¸ç¨æ³¨å,导åºçå¾ä¸æ²¡ææ°´å°ãæ IP ææ¯å¤©ç次æ°ä¸é,æ£å¸¸åç¬è®°ååæ纲å¤ç¨,é²çæ¯èæ¬å·æ¥å£ãç触åäº,çé¢ä¼åè¯ä½ è¿æå¤ä¹
éç½®ã计æ°å¨ææèç¹ä¸ä¸è´ã"}]},"gantt-from-text":{keyword:"AI çç¹å¾çæå¨",metaTitle:"AI çç¹å¾çæå¨ ââ ä¸å¥è¯çæ项ç®ææå¾ Â· VizText",metaDescription:"æ述项ç®çé¶æ®µãéç¨ç¢åå
åä¾èµ,çæ带æ¥æåå·¥æç Mermaid çç¹å¾,æ¾è¿æ¹æ¡ææ¡£æè
æ±æ¥ææéã",tagline:"æè¿°é¶æ®µåå
åä¾èµ,æ¿ä¸å¼ 带工æççç¹å¾ã",examples:[{title:"12 å¨ MVP ææ",prompt:"12 å¨ MVP åå¸çç¹å¾,ä» 2026-01-01 å¼å§ãé¶æ®µ:è°ç (2 å¨),设计(3 å¨,第 2 å¨å¼å§ overlap),å端(5 å¨,设计ä¹å),å端(4 å¨,第 5 å¨èµ·ä¸å端并è¡),æµè¯(2 å¨,ææå¼åä¹å),åå¸åå¤(1 å¨)ãåå¸æ¯ä¸ä¸ªéç¨ç¢ã"},{title:"å©ç¤¼ç¹å¤æ¶é´çº¿",prompt:"å©ç¤¼ç¹å¤çç¹å¾,æå 6 个æãé¶æ®µ:åºå°é¢è®¢(第 1-3 å¨),æ¥å®¾åå(第 2-4 å¨),请æ¬(第 5-8 å¨,ååä¹å),ä¾åºåé¢è®¢(第 3-10 å¨),èåè§å(第 8-12 å¨,ä¾åºåä¹å),æåç»è(第 20-24 å¨),å©ç¤¼å½å¤©å¨ç¬¬ 25 å¨ã"},{title:"ä¸ä¸ªå£åº¦ç产åææ",prompt:"Q1 产å路线å¾çç¹å¾,ä» 2026-01-01 å¼å§:åè½ A(设计 2 å¨ + å¼å 4 å¨ + åå¸ 1 å¨),åè½ B(设计 1 å¨
84+ å¼å 3 å¨,第 5 å¨å¼å§),åè½ C(åªå¼å 2 å¨,第 8 å¨å¼å§),缺é·ä¿®å¤å²åº(å£åº¦æå 2 å¨)ã"},{title:"ç«ç®åå°å计æ¶",prompt:"ç«ç®åå°å计æ¶çç¹å¾:L-30 天å 注åå¤,L-14 天æç»éææµè¯,L-7 天天æ°è¯ä¼°çªå£æå¼,L-3 天åå°æ¼ç»,L-1 天æåè¯ä¼°,L-0 åå°æ¥(6 å°æ¶:é£åæ£æ¥ãå 注ãç»ç«¯å计ãç¹ç«ãä¸å)ãç¹ç«æ¯ä¸ä¸ªéç¨ç¢ã"}],useCase:`çç¹å¾åçä¸ä¸ªé®é¢:æåªå 个é¶æ®µãå®ä»¬å¨æ¶é´ä¸æä¹éå ãè°å¡çè°ãåç åææææ¡£(ãMVP åäºå¨ç计åé¿è¿æ ·ã)ãç»é¢å¯¼æ±æ¥ãä»ä¹æ¶åè½å¥½ããåææ¡æ¶è¯æ顺åºå·²ç»æ³æ¸ æ¥äº,é½ç¨å®ãé¶æ®µæ¬èº«è¿æ²¡å®ä¸æ¥çæ¶å,å ç»ä¸å¼ [æ维导å¾](/zh/mindmap-from-text)æèå´çæ¸ æ¥,å®åäºåæææ¶é´è½´ã 85 86å®æ个æç¡®ççæ¿:æä¸ä½å¨ææ´æ°ãæ¾å¨ææ¡£éçä¸å¼ çç¹å¾,ç°å®ä¸å离计åå°±è¿æäºãçæ¿çç¹å¾ç®¡é¡¹ç®çå¢éç¨çæ¯è½è·ä»»å¡ç¶æèªå¨åæ¥çå·¥å ·ãè¿éç»ççç¹å¾æ¯ãæåçé£ä»½è®¡åãââ ç«é¡¹æ¶çä¸ä¸ªå¿«ç §,ä¸æ¯æ¥å¸¸è¿½è¸ªçå·¥å ·ã 87 88Mermaid ç gantt æ¯ææ¥ææ ¼å¼ãåç»ãå·¥æãä¾èµ(\`after ä»»å¡id\`)åéç¨ç¢ãè·ä¸ä¸é¡¹ç®ç®¡çå·¥å ·æ¯å®æ æåå¾ç®å ââ ä¸åé 人å,ä¸é«äº®å ³é®è·¯å¾,ä¸è½æçæ¹æ¥æãæ¢æ¥çæ¯çº¯ææ¬,å¯ä»¥è·ä»£ç ä¸èµ·è¿çæ¬åºã`,scenarios:[{icon:"Calendar",title:"ææåç«é¡¹",body:"å å¨ç项ç®ãåæ¡å¹¶è¡çæ´»ãä¸ä¸ªéç¨ç¢ãç«é¡¹ä¼ä¸ä¸å¼ çç¹å¾,让ãä»ä¹æ¶åè½å®æãä¸åªæ¯é¡¹ç®ç»çå¿éææ°ãéåå½ä½é¶ç¹ç计åå¿«ç §ã"},{icon:"Rocket",title:"è¿ä»£ååå¸å®æ",body:"å¸åºå¨äºè¦ä¸è½å°é¡µ,ç åå¨å交åè½,å 容å¨äºåæç« ãçç¹å¾å¨ç¾¤éåµå°ç¬¬ååä¸æ¡ä¹å,å°±æä¾èµå ³ç³»æåºæ¥äºã"},{icon:"GitBranch",title:"ä¾èµæ¢³ç",body:"A å¡ç B,B å¡ç Cãä¾èµè¶ è¿ä¸ä¸ª,åææåå°±å¼å§ç»ãç»æå¾,å ³é®è·¯å¾ä¸ç¼è½çå°ã"},{icon:"Map",title:"路线å¾æ²é",body:"å£åº¦å±é¢çãä¸ä¸ªå£åº¦è¦åä»ä¹ããçç¹å¾æ¯é¢å¯¼çå¾æçå½¢å¼ ââ æ±æ¥ãå ¨åä¼ã解é为ä»ä¹å®è¿ä¸ªç®æ ,é½è½ç¨ã"},{icon:"ShieldCheck",title:"ååå SLA",body:"æéç¨ç¢ä»æ¬¾ç客æ·ååãæ交ä»æ¥æçä¾åºååè®®ããæ们æ¿è¯º X æ¥äº¤ä» Yã以çç¹å¾ä¸ºå,æ¯æ¬¡è¿åº¦è¯å®¡é½å¯¹çå®çã"}]},"chat-to-diagram":{keyword:"对è¯çæå¾è¡¨",metaTitle:"对è¯çæå¾è¡¨ ââ AI å é®æ¸ æ¥åç»(ç»å½åå è´¹)",metaDescription:"ç»å½åå¯ä»¥è· AI 对è¯çææµç¨å¾ãæ¶åºå¾ãER å¾åæ维导å¾ãç»ä¹åå®ä¼å é®ä¸¤ä¸ä¸ªé®é¢,æµç¨ä¸å¤æ,æ¯ä¸å¥è¯ç´æ¥åºå¾åå¾å¤ã",tagline:"è· AI 对è¯æå¾ç»åºæ¥ ââ ä¸ç¨å¦è¯æ³,ä¹ä¸ç¨å®ççã",examples:[{title:"带两æ¥éªè¯çç»å½æµç¨",prompt:"ç»ä¸ä¸ªç»å½æµç¨ãç¨æ·å è¾é®ç®±ãåè¾å¯ç ãåè¾ 2FA éªè¯ç ãå¦æ 2FA 失败,è·³å°é置页é¢ã"},{title:"ä¸åå°éç¥çæ¶åº",prompt:"æ¶åºå¾:客æ·ä¸åãç½å ³è½¬åå°è®¢åæå¡ã订åæå¡åå ¥æ°æ®åºå¹¶å¼æ¥è°ç¨éç¥æå¡ã"},{title:"产ååå¸æ维导å¾",prompt:"SaaS 产ååå¸æ维导å¾:å·¥ç¨ãå¸åºãéå®ãæ¯æ ââ æ¯ä¸æ¯ä¸é¢æ 3-4 个åä»»å¡ã"},{title:"注åæµç¨(å«å¼å¸¸åæ¯)",prompt:"ç»ç¨æ·æ³¨åæµç¨ãå æ¬é®ç®±éªè¯ãå¿è®°å¯ç èµ°éç½®ãè¿ç» 5 次ç»å½å¤±è´¥è´¦å·éå®ã"}],useCase:`ä¸å¥è¯ç´æ¥åºå¾çé®é¢æ¯ AI å¾çä½ çææã对è¯æ¨¡å¼ä¸ç:å®å é®ä¸¤ä¸ä¸ªé®é¢ ââ æåªäºè§è²ãé½åçä»ä¹ãè¿äºè°ç¨æ¯çç»æè¿æ¯ååºå»å°±ä¸ç®¡ ââ é®æç½äºåç»ã 89 90ç»å®å®ä¼ç¨ä¸å¼ 确认å¡æèªå·±è¡¥çä¸è¥¿ååºæ¥ãå¦æå®å äºä½ 没说çè¿åç®å¤´ãä½ æ²¡æçè§è²ãä½ æ²¡æç®ç»çåæ¯,ç¹ä¸ä¸å æ,å¾ç«å»éç»ä¸çå»æå®ã 91 92æµç¨è¶å¤æè¶å¼å¾ç¨å¯¹è¯æ¨¡å¼:带å¼å¸¸åæ¯çç»å½ã跨好å 个æå¡ç[æ¶åºå¾](/zh/sequence-diagram-from-text)ãç¶æå¤ççå½å¨æãä½ æ³è®© AI 帮çä¸èµ·æ³æ¸ æ¥è¦ç»ä»ä¹,èä¸åªæ¯ç §çæ§è¡,å°±ç¨å®ã 93 94å ¶ä»é½è·å¿«é模å¼ä¸æ ·:ä¸ç§å¾é½è½ç»,ä¸æ ·å è´¹,ä¸æ ·è½å¯¼åº SVGãPNGãMarkdown å OPMLã两ç§æ¨¡å¼ä¹è½æ··çç¨ ââ å ç¨å¿«é模å¼åºä¸ªå稿,ååå°å¯¹è¯æ¨¡å¼æ¥çæ¹ã`,scenarios:[{icon:"Lightbulb",title:"ä¸ç¥éæä¹æè¿°",body:"å®é®çé£å 个é®é¢,ä¼å¸®ä½ æè§è²ãæ¥éª¤ãå¼å¸¸åæ¯æ³ä¸é,顺便åç°æ¼äºä»ä¹ãæ¯å¯¹ç空è¾å ¥æ¡åå强ã"}
94,{icon:"GitBranch",title:"æµç¨å¤æãåæ¯å¤",body:"åå è½®ä¸ç¹ç¹è¡¥,å®è®°å¾ä½åªäºä½ å·²ç»ç¡®è®¤è¿ãåªäºè¿æ²¡å®,æåä¸æ¬¡æ§ææ´å¼ å¾ç»åºæ¥ã"},{icon:"MessageSquare",title:"æ³æ ¸å¯¹ AI çæ¨æ",body:"æ¯æ¬¡åºå¾é½å¸¦ä¸å¼ 确认å¡,æå®èªå·±è¡¥çå 容åæ¸ æ¥ãåªæ¡ä¸å¯¹ç¹æ,å ç§ééç» ââ ä¸ç¨ææè¿°éåä¸éã"},{icon:"RefreshCw",title:"设计è¯å®¡è¾¹èè¾¹æ¹",body:"è¯å®¡çæ¶åå 说个大æ¦,å«äººæåºé®é¢å°±æ¥çè¡¥ãå¤è½®ä¹é´ä¸ä¸æä¸ç´å¨ã"},{icon:"Book",title:"带æ°äºº",body:"让æ°äººèªå·±è· AI èçæç³»ç»çæ¶åºå¾æ¨åºæ¥,æ¯è¯»ä¸ä»½ç°ææ档记å¾ç¢ã"}],faq:[{q:"对è¯æ¨¡å¼è·å¿«é模å¼å·®å¨åª?",a:"å¿«é模å¼ä¸å¥è¯è¿ãä¸å¼ å¾åºã对è¯æ¨¡å¼å é®ä¸¤ä¸ä¸ªé®é¢åç»ãæµç¨æ¬æ¥å°±å¨ä½ èåé,ç¨å¿«é模å¼;æ³è®© AI 帮çæè§è²ãæ¥éª¤ãå¼å¸¸åæ¯æ³æ¸ æ¥,ç¨å¯¹è¯æ¨¡å¼ã"},{q:"ç»ä¹åä¼é®å 个é®é¢?",a:"ä¸è¬ä¸¤ä¸ä¸ª,å¤æçå°åäºä¸ªãæé®æ¬¡æ°æé¢ç®,ä¸ä¼æ²¡å®æ²¡äºå°è¿½é®ãä»»ä½æ¶å说ä¸å¥ãç´æ¥ç»ã,å®å°±ç¨æ头已æçä¿¡æ¯åºå¾ã"},{q:"å®å äºæ没说çä¸è¥¿æä¹å?",a:"ç»å®ä¼å¼¹ä¸å¼ 确认å¡,æå®æ¨æåºæ¥çä¸è¥¿åæ¸ æ¥ ââ ä½ æ²¡æçä¸æ¡è¿åç®å¤´ãä½ æ²¡è¯´çä¸ä¸ªè§è²ãç¹ãå æãå°±éç»ä¸çå»æ;ç¹ãä¿çãå®å°±è¿å ¥è¿å¼ å¾çå®ä¹,åé¢æ¥çæ¹ä¹ä¸ç´å¨ã"},{q:"对è¯æ¨¡å¼æ¯æåªäºå¾?",a:"ä¸ç§å ¨é½æ¯æ:æµç¨å¾ãæ¶åºå¾ãER å¾ãç±»å¾ãç¶æå¾ãæ维导å¾ãçç¹å¾ãæ¶åºå¾é®å¾æç»(è§è²ãäºä»¶ãæ¯å¦åæ¥é½æ¯ç»æåç槽ä½),å ¶ä»ç±»åé®å¾è½»ä¸äº,ä½å¤è½®ç»ååæ ·æç¨ã"},{q:"对è¯æ¨¡å¼å è´¹å?",a:"å è´¹ãç»å½ä¹åæ¯å¤©æä¸ä¸ªæ¯è¾å®½ç次æ°ä¸é,24 å°æ¶éç½®ãä¸æ³ç»å½çè¯,å¿«é模å¼ç´æ¥å°±è½ç¨ã两ç§æ¨¡å¼å ±ç¨åä¸ä»½å è´¹é¢åº¦ã"}]},"architecture-diagram-from-text":{keyword:"AI æ¶æå¾çæå¨",metaTitle:"AI æ¶æå¾çæå¨ ââ ä¸å¥è¯çæç³»ç»æ¶æå¾ Â· VizText",metaDescription:"æè¿°ç³»ç»éæåªäºæå¡ãæ°æ®åºãç½å ³åéå,以åå®ä»¬æä¹è¿,çæå¯ç¼è¾ç Mermaid æ¶æå¾ãå è´¹,è½å¯¼åº SVG å PNGã",tagline:"æè¿°ç³»ç»éæåªäºç»ä»¶ãå½¼æ¤æä¹è¿,æ¿ä¸å¼ åå±çæ¶æå¾ã",examples:[{title:"AWS ä¸å± Web åºç¨",prompt:"ç»ä¸ä¸ªé¨ç½²å¨ AWS ä¸ç Web åºç¨æ¶æå¾:CloudFront CDN å¨æåé¢,转åå° Application Load Balancer,åè·¯ç±å°è·å¨ ECS Fargate ä¸ç API æå¡,API 读å RDS Postgres æ°æ®åº,çç¹æ°æ®ç¼åå¨ ElastiCache Redisãéæèµæºä» S3 æä¾ã"},{title:"å¾®æå¡ + äºä»¶æ»çº¿",prompt:"å¾®æå¡æ¶æå¾:API ç½å ³åç½®,åé¢æ¯è®¢åæå¡ãæ¯ä»æå¡ãåºåæå¡ã订åæå¡æäºä»¶åå¸å° Kafka,ç±åºåæå¡åéç¥æå¡æ¶è´¹ãæ¯ä¸ªæå¡åèªæ¥æç¬ç«ç Postgres æ°æ®åºã"},{title:"Serverless æ°æ®ç®¡é",prompt:"æ æå¡å¨æ°æ®ç®¡éæ¶æ:ä¸ä¼ å° S3 触åä¸ä¸ª Lambda æ ¡éªæ件并æåå§æ°æ®åå ¥ S3 æ°æ®æ¹,åæ¶å EventBridge åä¸ä¸ªäºä»¶ã第äºä¸ª Lambda æ¶è´¹è¯¥äºä»¶ã转æ¢æ°æ®ãå è½½è¿ Redshift æ°æ®ä»åºä¾åæ使ç¨ã"},{title:"移å¨ç«¯å端(带é´æ)",prompt:"移å¨åºç¨å端æ¶æ:iOS å Android 客æ·ç«¯é½è°ç¨ API ç½å ³,ç½å ³è½¬åå°åºäº Cognito çé´ææå¡,以ååºäº DynamoDB çæ ¸å¿ API æå¡ãæ¨ééç¥èµ° SNSãéæå 容éè¿ CloudFront å S3 æä¾ã"}],useCase:`æ¶æå¾åçä¸ä¸ªé®é¢:è¿ä¸ªç³»ç»ç±åªäºé¨åç»æ,å®ä»¬ä¹é´æä¹è¿ãå设计ææ¡£è¦å ç»ä¸ªå ¨è²ãæ°äººæ³å¨åç§å ææ¸ æ¥ä¸ä¸ªè¯·æ±ä»åªèµ°å°åªãç»ä¸çé¿ææ¡£çé¢å¯¼è®²ä¸å¥æ¹æ¡,é½ç¨å®ã 95 96è·[æµç¨å¾](/zh/flowchart-from-text)çåºå«å¨äº:æµç¨å¾ç»çæ¯ä¸ä»¶äºéæ¶é´æä¹èµ°å®,æ¶æå¾ç»çæ¯ç³»ç»éæ¢æ¶çæ ·å ââ è¿ä¸ªæå¡è°é£ä¸ªæå¡,è¿ä¸ªéå夹å¨ä¸¤ä¸ªæå¡ä¸é´ãä½ æç»ä»¶è¯´åºæ¥ ââ ç½å ³ãæå¡ãæ°æ®åºãéåãç¼åãCDN ââ å®æè¾¹ç¼å±ã计ç®å±ãæ°æ®å±åç»æå¸,ç¨ä¸åå½¢ç¶åºåç±»å,è·å¨ç½æ¿ä¸æç»çæ¶æèå¾ä¸ä¸ªè·¯åã 97 98ä¸ä¸ªè¦è¯´æç½çå±é:å¾ä¸ç¨çæ¯å¸¦æåæ 注çéç¨å½¢ç¶,ä¸æ¯ AWSãGCPãAzure çå®æ¹å¾æ ââ Mermaid æ¬èº«ä¸å¸¦äºå
98åå¾æ åº,æ以 RDS æè S3 ä¼ç»ææ æ³¨æ¸ æ¥çåæ±åæ¹æ¡,ä¸æ¯åç logoãå é¨è®¾è®¡ææ¡£åææ¯æ¹æ¡å¤ç¨äº;è¦ç»å®¢æ·åæ£å¼çäºæ¶æ PPT,å¯ä»¥æ¿è¿å¼ å¾å½å¸å±å稿,åå° Lucidchart ä¹ç±»çå·¥å ·éæ¢æå®æ¹å¾æ ã`,scenarios:[{icon:"LayoutTemplate",title:"设计ææ¡£åææ¯æ¹æ¡",body:"å ç»è¯å®¡ç人ä¸å¼ å ¨è²,åå±å¼ç»èãæ¹æ¡å¼å¤´æ¾ä¸å¼ æ¶æå¾,è½çæåæ¡ãè¿ä¸ªå°åºæä¹è°é£ä¸ªãç追é®ã"},{icon:"Cloud",title:"äºä¸èµæºè§å",body:"çæ£å¼å§å»ºèµæºä¹å,å ææç®æä¹æç»åºæ¥ãè¯å®¡ç人å¨å¾ä¸æ¯å¨ terraform plan éæ´å®¹æåç°å°äºä¸å±ç¼å,æè å¤äºä¸è·³ã"},{icon:"BookOpen",title:"æ°äººä¸æ",body:"æ°äººç¬¬ä¸å¤©å°±ä¼é®è¯·æ±å¨è¿ä¸ªç³»ç»éæä¹æµè½¬ãREADME éæä¸å¼ æ¶æå¾,ä¸ç¨æå¼ä»£ç å°±è½åçã"},{icon:"ShieldCheck",title:"å®å ¨è¯å®¡åä¾åºå审æ¥",body:"审计åå®å ¨è¯å®¡è¦ççæ¯ä¿¡ä»»è¾¹ç ââ åªäºå¯¹å¤æ´é²ãåªäºåªå¨å ç½ãæ°æ®å¨åªéè·¨è¿è¾¹çãæ³è¯´æ¸ æ¥æ»å»é¢,ä¸å¼ æ æ³¨æ¸ æ¥çæ¶æå¾æå¿«ã"},{icon:"GitCompare",title:"è¿ç§»æ¹æ¡",body:"ä»åä½ææå¾®æå¡,æè ä»èªå»ºæ¢ææ管æå¡?è¿ç§»åååä¸å¼ å¾,æ¹æ¡å°±åå¾å ·ä½ãè½è¯å®¡äºã"}],faq:[{q:"AI æ¶æå¾çæå¨æä¹ç¨?",a:"ç¨å¤§ç½è¯æè¿°ç³»ç»éæåªäºæå¡ãæ°æ®åºãéååç½å ³,以åå®ä»¬æä¹è¿ãå®çæä¸å¼ Mermaid å¾,æç»ä»¶æè¾¹ç¼å±ã计ç®å±ãæ°æ®å±åç»å¹¶æ åºè¿æ¥ãåºå±æ²¡æç¬ç«çæ¶æå¾æ¸²æå¼æ,ç¨çè¿æ¯æµç¨å¾è¯æ³,åªæ¯é对系ç»å¾å®äºä¸äºçº¦å® ââ åå¨ç»åæ±,åå±ç¨ subgraph æ¡èµ·æ¥ã"},{q:"è½ç» AWSãGCPãAzure çå®æ¹å¾æ å?",a:"ä¸è½ãMermaid ä¸å¸¦äºååå¾æ åº,ç»ä»¶ä¼ç»ææ æ³¨æ¸ æ¥çå½¢ç¶ ââ æ°æ®åºååå¨ç¨åæ±,æå¡å计ç®ç¨æ¹æ¡,ç½å ³ç¨åè§é¿æ¡ ââ èä¸æ¯åç logoãè¿æ ·å¾è·ååæ å ³,åºå¾ä¹å¿«ãè¦å®æ¹å¾æ å客æ·æ¼ç¤º,å¯ä»¥æ¿å®å½å¸å±å稿,åå° Lucidchart æ draw.io éæ¢ç®ã"},{q:"è½ç»å¤äºæè æ··åé¨ç½²å?",a:"è½ãå®ä¸å ³å¿ç»ä»¶å±äºåªä¸ªäº ââ ä½ è¯´æ¬å°æ°æ®åºè·äºä¸æ¥å£éä¿¡,æè ä¸å¥ç³»ç»æ¨ªè·¨ AWS å GCP,å®å°±ç §ä½ 说çè¿ãå¨æè¿°éç¹åå ·ä½äº§å(S3ãGCSãèªå»º Postgres)æå©äºå®æèç¹æ åç¡®ã"},{q:"ç»å°å¤å°ä¸ªç»ä»¶å°±çä¸æ¸ äº?",a:"ä¸å¼ å¾è¶ è¿åäºå°äºå个ç»ä»¶,å¯è¯»æ§ææ¾ä¸é ââ è·æµç¨å¾æ¯åä¸æ¡ç»éªãç³»ç»å¤§çè¯,ä¸æ¬¡åªæè¿°ä¸ä¸ªååæè ä¸å±(æ¯å¦ãåªç»æ¯ä»è¿åã),åæå å¼ èç¦çå¾,å«ç¡¬å¡è¿ä¸å¼ ã"},{q:"çæä¹åè½æ¹å?",a:"è½ãåå±ä¹å Mermaid æºç åé¢è§å¹¶æ,å ä¸ä¸ªæå¡ãæ¹ä¸æ¡è¿çº¿ä¸ç说æãéæ°åç»,é½æ¯æ¹æåãä¹å¯ä»¥å¨åæ¥çæè¿°ä¸è¡¥ä¸å¥éæ°çæã"},{q:"æ¶æå¾çæå¨å è´¹å?",a:"å è´¹,ä¸ç¨æ³¨åãæ IP ææ¯å¤©ç次æ°ä¸é,é²çæ¯èæ¬å·æ¥å£,æ£å¸¸ç¨ç¢°ä¸å°,计æ°å¨ææèç¹ä¸ä¸è´ãé¢è§åºç¶ææ è½å¯¼åº SVG(è´´ææ¡£)å PNG(è´´ PPT)ã"}]},"uml-diagram-from-text":{keyword:"AI UML å¾çæå¨",metaTitle:"AI UML å¾çæå¨ ââ ä¸å¥è¯çæ UML å¾ Â· VizText",metaDescription:"ç¨å¤§ç½è¯æè¿°ç±»ç»æãä¸æ¬¡ç»å½æ¡æ,æè ä¸ä¸ªå¯¹è±¡ççå½å¨æãAI å¤æ该ç»ç±»å¾ãæ¶åºå¾è¿æ¯ç¶æå¾,ç¶åç»åºæ¥ã",tagline:"æè¿°ä½ ç设计,AI å¤æ该ç»ç±»å¾ãæ¶åºå¾è¿æ¯ç¶æå¾ã",examples:[{title:"ç±»å¾:å¾ä¹¦é¦ç³»ç»",prompt:"ç»ä¸ä¸ªå¾ä¹¦é¦ç³»ç»ç UML ç±»å¾:Book(isbnãtitleãauthor)ãMember(idãnameãemail)ãLoan(dueDateãreturnedDate)æ Member å Book å ³èèµ·æ¥ãLibrarian ç»§æ¿ Member,å¤ä¸ä¸ª canManageCatalog å¸å°å段ãæ åºå ³èå ³ç³»ååºæ°ã"},{title:"æ¶åºå¾:ç»å½æ¡æ",prompt:"ç»ä¸ä¸ªç»å½æ¡æç UML æ¶åºå¾:客æ·ç«¯æåè¯åç»é´ææå¡,é´ææå¡å¨ç¨æ·æ°æ®åºéæ ¡éª,æååç¾å JWT,客æ·ç«¯åä¸ token 并å¨åç» API è°ç¨ä¸æºå¸¦ã"},{title:"ç¶æå¾:订åçå½å¨æ",prompt:"ç»ä¸ä¸ªè®¢åç UML ç¶æå¾:å·²å建 -> å·²æ¯ä» -> å·²åè´§ -> å·²éè¾¾ãä»å·²å建å¯ä»¥åæ¶ãä»å·²æ¯ä»å¯ä»¥é款ãåæ¶åé款é½æ¯ç»æã"},{title:"ç±»å¾:çç¥æ¨¡å¼",prompt:"ç¨çç¥æ¨¡å¼ç»ä¸ä¸ª UML ç±»å¾:PaymentProcessor ä¾èµä¸ä¸ª PaymentStrategy æ¥å£ãå ·ä½çç¥ StripeStrategy å PayPalStrategy åèªå®ç° charge(amount)ãæ åºæ¥å£ãå®ç°ç±»åç»åå ³ç³»ã"}],useCase:`UML è§èä¸å ±å®ä¹äºååç§å¾,ä½æ¥å¸¸å·¥ç¨éçæ£å¨ç¨çå°±ä¸ç§:[ç±»å¾](/zh/class-diagram-from-text)管ç»æ(æåªäºç±»åãåèªæä»ä¹ãæä¹å ³è),[æ¶åºå¾](/zh/sequence-diagram-from-text)管éæ¶é´å±å¼çè¡ä¸º(è°è°è°,ä»ä¹é¡ºåº),[ç¶æå¾](/zh/state-diagram-from-text)管éç¶æå±å¼çè¡ä¸º(æåªäºç¶æ,åªäºè·³è½¬åæ³)ãè¿ä¸ªé¡µé¢æ¯ UML çæ»å ¥å£:ç¨å¤§ç½è¯æè¿°ä½ ç设计,AI å¤æè¿ä¸ç§é该ç¨åªç§,ç¶åç»åºæ¥ã 99 100å¤æçæ åå¾ç®åãé®é¢æ¯ãè¿å¥ç±»åé¿ä»ä¹æ ·ãå°±ç»ç±»å¾ ââ é¢å模åãDDD èåãåºçæ¥å£ãé®é¢æ¯ãè¿å æ¹çè°ç¨é¡ºåºæ¯ä»ä¹ãå°±ç»æ¶åºå¾ ââ æ¥å£æ¡æãåå¸å¼äºå¡ãç»å½é´æãé®é¢æ¯ãè¿ä¸ªå¯¹è±¡è½å¤äºåªäºç¶æ,ä»ä¹è®©å®è·³è½¬ãå°±ç»ç¶æå¾ ââ 订åç¶æã审æ¹æµè½¬ãåè®®ç¶æã 101 102å·²ç»ç¡®å®è¦åªä¸ç§çè¯,å»å¯¹åºçåç¬é¡µé¢(ç±»å¾ãæ¶åºå¾ãç¶æå¾),é£è¾¹è®²å¾æ´ç»,ä¾åæ´å¤,
102è¯æ³è¯´æä¹æ´å ¨ãè¿ä¸ªé¡µé¢éåä½ ç¡®å®è¦ä¸å¼ UML å¾ãä½è¿æ²¡æ³å¥½æ¯åªç§çæ¶å ââ æ设计说åºæ¥,让å®æ¿ä½ åç±»ã`,scenarios:[{icon:"Box",title:"é¢å对象ç设计ææ¡£",body:"è¿æ²¡æ³å¥½ææ¡£é该æ¾ç»æè¿æ¯æ¾è¡ä¸º?å æ设计说åºæ¥è®©å®å¤æ ââ çå¾ä¸å¯¹,éæ¶æ¢ä¸ç§éæ°çæã"},{icon:"Layers",title:"è¯å®¡åçåå¤",body:"è¯å®¡ä¹åæç¸å ³çç±»ç»æãå ³é®çè°ç¨é¡ºåºãæè 对象ççå½å¨æç»åºæ¥,ææè½è¯´æä½ è¿æ¬¡æ¹å¨çé£ä¸ç§ã"},{icon:"GraduationCap",title:"å¦ UML åæ UML",body:"å¦çå讲å¸ç¨å®å¿«éçå°æ åè®°å· ââ å¯è§æ§ç¬¦å·ãå ç§ç®å¤´ãçå½çº¿ ââ ä¸ç¨è£ ä¸é¨çå»ºæ¨¡å·¥å ·ã"},{icon:"PenTool",title:"é¢è¯ç½æ¿é¢",body:"åå¨ç½æ¿ä¸é£æ ·å¾åºç±»çå±æ¬¡,æè ä¸ä¸²æ¥å£è°ç¨ç顺åº,ç»å®å¯¼åºæ¥æ¾è¿ä½ä¸æ交æè ä½åéã"},{icon:"BookOpen",title:"å设计模å¼",body:"å·¥åãçç¥ãè§å¯è è¿äºç»å ¸æ¨¡å¼åæä¸å¥æ åç»æ³ãè¯´æ¸ æ¥ä½ ç¨çæ¯åªä¸ªæ¨¡å¼,æ¿å°çå°±æ¯å«äººä¸ç¼è®¤å¾åºçå¾ã"}],faq:[{q:"è¿ä¸ªé¡µé¢æ¯æåªå ç§ UML å¾?",a:"ä¸ç§:ç±»å¾ãæ¶åºå¾ãç¶æå¾,ä¹å°±æ¯å·¥ç¨å¢éæ¥å¸¸çå¨ç¨çé£ä¸ç§ãç¨ä¾å¾ãæ´»å¨å¾ãç»ä»¶å¾ãé¨ç½²å¾ä¸çæ ââ å®æ´ UML è§èæååç§,åºå±ç Mermaid åªå®ç°äºå®é ç¨å¾ä¸çè¿ä¸ªåéã"},{q:"å®æä¹å¤æ该ç»åªç§?",a:"çä½ æè¿°éçæªè¾ãåºç°ãæä¸ä¸ªãã继æ¿ããå®ç°ãè¿ç±»ç»æè¯,å¤æç±»å¾;åºç°ãåéããè°ç¨ããè¿åãè¿ç±»äº¤äºè¯,å¤ææ¶åºå¾;åºç°ãåæãã跳转å°ãè¿ç±»çå½å¨æè¯,å¤æç¶æå¾ãæ³ç¡®ä¿æ¿å°æå®çé£ç§,ç´æ¥å»ç±»å¾ãæ¶åºå¾æç¶æå¾çåç¬é¡µé¢ ââ é£äºé¡µé¢ä¸åå¤æ,æ°¸è¿ç»é£ä¸ç§ã"},{q:"å¤æéäºæä¹å?",a:"æè¯è¯´æç¡®ä¸ç¹éæ°çæ,æ¯å¦å¼å¤´ç´æ¥åãç»ä¸å¼ æ¶åºå¾ããæè å»å¯¹åºç±»åçåç¬é¡µé¢,é£è¾¹å®å ¨ä¸åå¤æã"},{q:"è®°å·æ¯æå¾å ¨å ââ å¯è§æ§ãæé åãå¤éæ§?",a:"æ¯æçé£ä¸ç§éæ¯å ¨ç:ç±»å¾æå¯è§æ§ç¬¦å·(+ - # ~)ã<<interface>> æé åãæ³ååå ¨é¨æ åå ³ç³»ç®å¤´;æ¶åºå¾ææ¿æ´»æ¡ãå¼æ¥æ¶æ¯å注é;ç¶æå¾æå¤åç¶æå [*] èµ·æ¢æ è®°ã"},{q:"çæä¹åè½æ¹å?",a:"è½ãæ¯å¼ å¾é½ä¼æå¼åå±,Mermaid æºç å¨æè¾¹å®æ¶æ¸²æ ââ ç´æ¥æ¹æå,æè å¨åæè¿°ä¸è¡¥ä¸å¥éæ°çæã"},{q:"å è´¹å?",a:"å è´¹,ä¸ç¨æ³¨å,æ IP ææ¯å¤©ç次æ°ä¸éãé¢è§åºç¶ææ è½å¯¼åº SVG å PNGã"}]},"ai-diagram-from-text":{keyword:"AI ææ¬çæå¾è¡¨",metaTitle:"AI ææ¬çæå¾è¡¨ ââ ä¸å¥è¯åºå¾,ç±»åèªå¨å¤æ · VizText",metaDescription:"ç¨å¤§ç½è¯æè¿°ä»»ä½ä¸è¥¿ãAI å¤æ该ç»æµç¨å¾ãæ¶åºå¾ãER å¾ãç±»å¾ãç¶æå¾ãæ维导å¾è¿æ¯çç¹å¾,ç¶åç»åºæ¥ã",tagline:"ææ³è¯´çååºæ¥,该ç¨åªç§å¾äº¤ç» AI å¤æã",examples:[{title:"å ¥èæµç¨(å¤ææµç¨å¾)",prompt:"æ°åå·¥å ¥èæµç¨:HR å offer,åé人ç¾å,IT é ç½®çµèåè´¦å·,主管å®æ第ä¸å¨ç 1:1,åå·¥å¨ç¬¬ 5 天åå®æåè§å¹è®ã"},{title:"Webhook æé(å¤ææ¶åºå¾)",prompt:"Webhook æéæµç¨:æ们çå端æäºä»¶åç»å®¢æ·ç webhook å°å,å¦æ客æ·çæå¡å¨è¿åé 200,ç¨ææ°éé¿éè¯æå¤ 5 次,ä¹åæäºä»¶è½¬ç§»å°æ»ä¿¡éåã"},{title:"å£åº¦ææ(å¤ææ维导å¾)",prompt:"Q2 路线å¾æ维导å¾:å¹³å°ç»(é´æéæãè´¦å v2)ãå¢é¿ç»(SEOãæ¨è计å)ã移å¨ç«¯(离线模å¼ãæ¨ééç¥)ãæ¯æç»(帮å©ä¸å¿éåãå¨çº¿å®¢æè¯ç¹)ã"},{title:"两å¨è¿ä»£(å¤æçç¹å¾)",prompt:"两å¨å²åºçç¹å¾:设计(第 1-2 天)ãå端å¼å(第 2-6 天)ãå端å¼å(第 4-8 天,åå端éå )ãQA(第 8-9 天)ãåå¸(第 10 天)ã"}],useCase:`VizText ä¸å ±æ¯æä¸ç§å¾ ââ æµç¨å¾ãæ¶åºå¾ãER å¾ãç±»å¾ãç¶æå¾ãæ维导å¾ãçç¹å¾ ââ å¤å ä¸ä¸ªåºäºæµç¨å¾å¼æåçæ¶æå¾ãè¿ä¸ªé¡µé¢æ¯æ»å ¥å£:ä½ èåéæ段æè¿°,ä½è¿æ²¡æ³å¥½è¯¥ç¨åªç§å½¢ç¶è¡¨è¾¾,ç´æ¥åè¿æ¥,让å®æ¿ä½ å¤æã讲è¿ç¨çå¤æ[æµç¨å¾](/zh/flowchart-from-text),讲è§è²ä¹é´æ¥åçå¤æ[æ¶åºå¾](/zh/sequence-diagram-from-text),ä¸å±å¥ä¸å±çæ纲å¤æ[æ维导å¾](/zh/mindmap-from-text),以æ¤ç±»æ¨ã 103 104è¿ä»¶äºæç¨,æ¯å 为大é¨å人ä¸æ¯æå¾è¡¨ç±»åæ¥æ³äºæ çãä»ä»¬æ³çæ¯ãæè¦è®²æ¸ æ¥æ³¨åæµç¨æä¹èµ°ãæè ãæè¦æè¿ä¸ªå£åº¦çå®ææåºæ¥ã,ä¸æ¯ãæéè¦ä¸å¼ æµç¨å¾ããèªå¨å¤æçæææ¯ä½ åªç®¡è¯´ä½ çæ£å ³å¿çäº,ç¿»è¯æå¾è¡¨è¯è¨é£ä¸æ¥äº¤ç»å·¥å ·ã 105 106å·²ç»ç¡®å®è¦åªç§å¾çè¯,å»å¯¹åºçåç¬é¡µé¢(æµç¨å¾ãæ¶åºå¾ãER å¾ãç±»å¾ãç¶æå¾ãæ维导å¾ãçç¹å¾ãæ¶æå¾),é£è¾¹ä¾åæ´è´´ãè¯æ³è¯´ææ´ç»ãè¿ä¸ªé¡µé¢éåãå ååçä¼åºä»ä¹ãçç¨æ³ã`,scenarios:[{icon:"Sparkles",title:"ä¸æ³å å³å®ç±»å",body:"èåéæ段æè¿°,ä½æ²¡æ³å¥½è¯¥ç»åªç§ãç²è¿æ¥è®©å®å¤æ,æ¯æä¸ä¸ªé¡µé¢è¯»ä¸éåæå¿«ã"},{icon:"BookOpen",title:"å 容混æçææ¡£ç«",body:"ä¸ä¸ªå¢é wiki éæµç¨å¾ãæ¶åºå¾ãæ维导å¾é½è¦æãä¸ä¸ªè½å¤æç±»ååè½å ¨ç»çå·¥å ·,æ¯ä¸ä¸ªå·¥å ·åæ¥åå»é¡ºæã"},{icon:"NotebookText",title:"ç¬è®°åç¥è¯åºé å¾",body:"ä¼è®®è®°å½,æè æ³å°åªåå°åªçä¸æ®µè¯,å½åºåæå¾,ä¸ç¨å æ³å®è¯¥å½æåªä¸ç±»ã"},{icon:"GraduationCap",title:"讲课å讲æ¦å¿µ",body:"讲å¸å£å¤´æè¿°ä¸ä¸ªæ¦å¿µ,æåæ ·è¿æ®µè¯ç²è¿æ¥,æ¿å°æè´´çé£ç§å¾ ââ é¢å¯¹éææ¯å¬ä¼ãè¿è¯¥ç¨åªç§å¾é½ä¸ææ¾çæ¶åå°¤å ¶æç¨ã"},{icon:"Users",title:"éç ååå¦ç¨å¾",body:"ä¸æ Mermaid è¯æ³ãä¹å«ä¸åºå¾è¡¨ç±»åååç产åå设计,ç´æ¥ç¨å¤§ç½è¯è¯´æ³è¦ä»ä¹,åç±»çäºäº¤ç» AIã"}],faq:[{q:"å®æ¯æä¹å¤æå¾è¡¨ç±»åç?",a:"çæè¿°éç线索 ââ ææ¥éª¤åå¤æçå¤åæ¯æµç¨å¾,æå ·åè§è²äºç¸åæ¶æ¯çå¤åæ¯æ¶åºå¾,æå®ä½åå ³ç³»çå¤åæ¯ ER å¾,ä¸å±å¥ä¸å±ç主é¢å¤åæ¯æ维导å¾,带æ¥æçé¶æ®µå¤åæ¯çç¹å¾ ââ çæä¹åå éåºæè´´çé£ç§ã"},{q:"è½ä¸è½ä¸è®©å®èªå¨é,èªå·±æå®ç±»å?",a:"è½ãå»æ个åç¬çç±»å页é¢(æµç¨å¾ãæ¶åºå¾ãER å¾ãç±»å¾ãç¶æå¾ãæ维导å¾ãçç¹å¾ææ¶æå¾),é£äºé¡µé¢éæ»ç±»å,ä¸åå¤æ;æè å¨é¦é¡µçç±»åéæ©å¨éå é好ååæè¿°ã"},{q:"èªå¨å¤æåå?",a:"æè¿°æ¸ æ¥ãæç¡®è½å¨æ¯æçä¸ç§éçæ¶åå¾åãå«ç³çæè¿° ââ æ¯å¦ä¸ä¸ªè¿ç¨åæ¶åæç¹å±çº§ç»æ ââ å¯è½å¤å°ä»»ä½ä¸è¾¹ãç»æä¸å¯¹çè¯,å æç¡®æå®ç±»ååéæ°çæã"},{q:"æ¯æåªäºå¾è¡¨ç±»å?",a:"ä¸ç§:æµç¨å¾ãæ¶åºå¾ãER å¾ãUML ç±»å¾ãç¶æå¾ãæ维导å¾ãçç¹å¾,å¤å æ¶æå¾ãæ¶æå¾ç¨æµç¨
106å¾å¼æå®ç°,带ä¸å¥åå±å¸å±ç约å®ã"},{q:"çæä¹åè½æ¹å?",a:"è½ãæ¯å¼ å¾é½ä¼æå¼åå±,æºç åé¢è§å¹¶æ ââ æ维导å¾ç¨çæ¯ markmap 大纲,å ¶ä»é½æ¯ Mermaidã"},{q:"å è´¹å?",a:"å è´¹,ä¸ç¨æ³¨å,æ IP ææ¯å¤©ç次æ°ä¸éãè½å¯¼åº SVG å PNG,æ维导å¾è¿è½å¯¼åº Markdown å OPMLã"}]},"ai-diagram-from-code":{keyword:"AI 代ç çæå¾è¡¨",metaTitle:"AI 代ç çæå¾è¡¨ ââ ç²ä»£ç åºç±»å¾åæµç¨å¾ · VizText",metaDescription:"ç²ä¸æ®µä»£ç ,æ¿ä¸å¼ ç±»å¾ãæµç¨å¾æè æ¶æå¾ãä¸ç¨è£ 解æå¨,ä¸ç¨ææ´ä¸ªä»åºæä¸æ¥ ââ ç²è¿æ¥å°±è½ç»ã",tagline:"ç²ä¸æ®µä»£ç ,æ¿ä¸å¼ ç±»å¾ãæµç¨å¾æè æ¶æå¾ã",examples:[{title:"TypeScript ç±»å±æ¬¡ â ç±»å¾",prompt:"ä»è¿æ®µä»£ç ç»ä¸ä¸ª UML ç±»å¾:abstract class Shape { abstract area(): number } class Circle extends Shape { constructor(private radius: number) { super() } area() { return Math.PI * this.radius ** 2 } } class Rectangle extends Shape { constructor(private w: number, private h: number) { super() } area() { return this.w * this.h } }"},{title:"Express è·¯ç± â æµç¨å¾",prompt:"ç»åºè¿ä¸ª Express è·¯ç±å¤çå½æ°çæ§å¶æµæµç¨å¾:router.post('/checkout', authenticate, validateCart, async (req, res) => { const total = calculateTotal(req.body.items); if (total <= 0) return res.status(400).send('empty cart'); const charge = await chargeCard(req.user, total); if (!charge.success) return res.status(402).send('payment failed'); const order = await createOrder(req.user, req.body.items); res.json(order); })"},{title:"éå½å½æ° â æµç¨å¾",prompt:"为è¿ä¸ªå½æ°ç»ä¸ä¸ªæµç¨å¾:function quicksort(arr) { if (arr.length <= 1) return arr; const pivot = arr[0]; const left = arr.slice(1).filter(x => x < pivot); const right = arr.slice(1).filter(x => x >= pivot); return [...quicksort(left), pivot, ...quicksort(right)]; }"},{title:"docker-compose â æ¶æå¾",prompt:"ä»è¿ä¸ª docker-compose.yml ç»ä¸ä¸ªæ¶æå¾:æå¡æ 'web'(nginx,æ´é² 80 端å£,ä¾èµ 'api')ã'api'(node åºç¨,ä¾èµ 'db' å 'redis')ã'db'(postgres,æè½½ volume)ã'redis'(ç¼å)ã'worker'(åå°ä»»å¡å¤ç,ä¾èµ 'redis' å 'db')ã"}],useCase:`ææ¶åè®²æ¸ æ¥ä¸æ®µä»£ç æå¿«çåæ³æ¯ç»å¼ å¾,èæ¿å°è¿å¼ å¾æå¿«çåæ³ä¸æ¯è£ ä¸ä¸ªéæåæå·¥å ·,æ¯æ代ç ç²è¿æ¥,è¯´æ¸ æ¥ä½ è¦ä»ä¹å¾ãç²ä¸ä¸ªç±»å®ä¹è¦[ç±»å¾](/zh/class-diagram-from-text),ç²ä¸ä¸ªè·¯ç±å¤çå½æ°è¦æ§å¶æµçæµç¨å¾,ç²ä¸ä¸ª docker-compose è¦æå¡ææç[æ¶æå¾](/zh/architecture-diagram-from-text)ã 107 108è¯´æ¸ æ¥è¦ä»ä¹å¾éè¦ ââ ãä»è¿æ®µä»£ç ç»ä¸å¼ ç±»å¾ãæ¯å æ代ç ç²è¿æ¥ãä¸ç»ä»»ä½æ令ææ好å¾å¤ãå 为å®è¯»ä»£ç çæ¹å¼æ¥è¿ä¸ä¸ªå·¥ç¨å¸æ«ä¸ç¼ diff,æ¯è¯ä¹ä¸çç解,ä¸æ¯ä¸¥æ ¼å»ºä¸æ£µè¯æ³æ ãè¿ä¹æ¯è·ä¸é¨ç代ç 转 UML å·¥å ·ç¸æ¯è¦è®¤çè´¦:ä¸ç¨æ建ãä¸ç¨è£ è¯è¨æå¡å¨ãå®è®¤è¯çè¯è¨é½è½ç¨(JavaScriptãTypeScriptãPythonãJavaãGoãRust çç),ä½è¿æ¯å°½åè为çç解,ä¸æ¯ä¿è¯æ£ç¡®çéæåæãåä¸æ¡è¯å®¡çè¨æè ä¸ä»½ä¸æææ¡£,è¿ç¬è´¦åç®;è¦æ¯è¿å¼ å¾å¿ é¡»è·çå®ç±»åç³»ç»ä¸¥ä¸åç¼å°å¯¹ä¸,å çä¸éåç¨ã 109 110ç²çæ¶åå å¶ä¸ç¹ ââ ä¸ä¸ªç±»å±æ¬¡ãä¸ä¸ªå½æ°ãä¸ä¸ª docker-compose æ件,ä¸è¦æ´ä¸ªä»åºãå®è¯»çæ¯è½å¡è¿ä¸æ¬¡å¯¹è¯çå 容,ä¸æ¯æ´ä¸ªä»£ç åºãè·¨å å个æ件çéåå·¥ç¨,è¿æ¯é个ç段çèµ·ç¹,ä¸æ¯å ¨ä»åºå¯è§åå·¥å ·ã`,scenarios:[{icon:"Archive",title:"ç没人管çè代ç ",body:"æ¥æä¸ä¸ªæ²¡ææ¡£ãç±»ä¹é´å ³ç³»ä¹è¯´ä¸æ¸ çæ件?ç²è¿æ¥è®©å®ç»ç±»å¾,æ¯è·¨çå 个æ件æå¨è¿½ç»§æ¿å ³ç³»å¿«ã"},{icon:"GitPullRequest",title:"è¯å®¡æ¶çæ§å¶æµ",body:"ä¸æ®µç»çæ§å¶æµæ¹å¨,ç»ææµç¨å¾æ¯ç diff 好è¯å®¡ãè¯å®¡ä¼ä¹åææ°å½æ°ç²æä¸å¼ å¾,ç´æ¥è´´å°è¯è®ºéã"},{icon:"BookOpen",title:"ä¸æéç项ç®",body:"æ°äººç²ä¸ä¸ªæ ¸å¿é¢åç±»,æè 主请æ±å ¥å£,æ¿å°ä¸å¼ å¾,ä¸ç¨å¹²è¯»äºç¾è¡ã"},{icon:"GitCompare",title:"éæåç个åº",body:"æä¸ä¸ªä»ä¹é½å¹²ç大类æå¼ä¹å,å æç°å¨çç»æç»åºæ¥,让ãéæåãè¿ä¸ªç¶æææ®å¯æ¥ã"},{icon:"GraduationCap",title:"讲代ç ç»æ",body:"讲å¸æå¦çç代ç æè ææéçä¾åå½åºåæå¾ ââ 讲继æ¿ã讲æ§å¶æµã讲æå¡è¾¹ççæ¶åä¸ç¨ç°ç»ç½æ¿ã"}],faq:[{q:"ä»ä»£ç ç»åºæ¥çå¾åå?",a:"è¿æ¯æ¨¡åå°½åèä¸
110ºçè¯ä¹ç解,ä¸æ¯åºäºè¯æ³æ çéæåæã代ç ç»ææ¸ æ¥çæ¶åç¸å½å¯é ;å ç¼ç¨å¤ãå¨æç±»åæå·§å¤ãåµå¥å¾æ·±ç代ç ,建议å çä¸éãæå®å½ä¸ä»½å¾å¼ºçå稿,ä¸æ¯äºå®ã"},{q:"æ¯æåªäºç¼ç¨è¯è¨?",a:"模å读å¾æçé½è¡ ââ JavaScriptãTypeScriptãPythonãJavaãGoãRustãC#ãRuby å大é¨å主æµè¯è¨é½å¯ä»¥ãä¸é´æ²¡æè¯è¨æå¡å¨åç¼è¯å¨åä¸,æ以伪代ç åä¸å®æ´çç段ä¹è½ç¨,åªæ¯å确度ä¼éã"},{q:"è½ç²æ´ä¸ªä»åºæè ä¸ä¸ªå¾å¤§çæ件å?",a:"ç²è½èæå¡è¿ä¸æ¬¡å¯¹è¯çé就好 ââ ä¸ä¸ªç±»ãä¸ä¸ªå½æ°ãä¸ä¸ªè·¯ç±å¤çãä¸ä¸ª docker-composeãè¿æ¯ç段转å¾è¡¨çå·¥å ·,ä¸æ¯æ´ä»åºå¯è§åãè¦ç大èå´æ¶æ,ä¸æ¬¡ç»ä¸åã"},{q:"ä»ä»£ç è½ç»åºåªå ç§å¾?",a:"ç±»å¾(ä»ç±»åæ¥å£å®ä¹)ãæµç¨å¾(ä»å½æ°çæ§å¶æµ)ãæ¶æå¾(ä» docker-compose è¿ç±»æå¡å®ä¹æè åºç¡è®¾æ½é ç½®)ãå¨æè¿°éè¯´æ¸ æ¥è¦åªä¸ç§,ç»ææ´å¥½ã"},{q:"çæä¹åè½æ¹å?",a:"è½ãMermaid æºç ä¼å¨åå±éè·é¢è§å¹¶æ ââ ç´æ¥æ¹æå,æè æåæ¥çæè¿°åç»ä¸ç¹éæ°çæã"},{q:"å è´¹å?",a:"å è´¹,ä¸ç¨æ³¨å,æ IP ææ¯å¤©ç次æ°ä¸éãé¢è§åºç¶ææ è½å¯¼åº SVG å PNGã"}]},"ai-diagram-from-json":{keyword:"AI JSON çæå¾è¡¨",metaTitle:"AI JSON çæå¾è¡¨ ââ ç² JSON åº ER å¾åç±»å¾ Â· VizText",metaDescription:"ç²ä¸æ®µ JSON ââ æ¥å£è¿åãschemaãææ¡£æ ·ä¾ ââ å®æéé¢éå«çå®ä½åå ³ç³»ç»æ ER å¾æç±»å¾ãå è´¹,è½å¯¼åº SVG å PNGã",tagline:"ç²ä¸æ®µ JSON ââ æ¥å£è¿åãschemaãææ¡£æ ·ä¾ ââ æ¿ä¸å¼ ER å¾æç±»å¾ã",examples:[{title:"åµå¥æ¥å£è¿å â ER å¾",prompt:'ä»è¿æ®µ JSON API ååºç»ä¸ä¸ª ER å¾,æåµå¥å¯¹è±¡å½ä½ç¸å ³å®ä½:{ "order": { "id": 123, "customer": { "id": 9, "email": "[email protected]" }, "items": [ { "productId": 55, "name": "Widget", "quantity": 2, "unitPrice": 9.99 } ], "total": 19.98 } }'},{title:"JSON Schema â 带类åç ER å¾",prompt:'ä»è¿æ®µ JSON Schema ç»ä¸ä¸ª ER å¾:{ "User": { "id": "integer", "email": "string", "posts": { "type": "array", "items": { "$ref": "Post" } } }, "Post": { "id": "integer", "title": "string", "authorId": "integer", "comments": { "type": "array", "items": { "$ref": "Comment" } } }, "Comment": { "id": "integer", "body": "string", "postId": "integer" } }'},{title:"MongoDB ææ¡£ â ER å¾",prompt:'ä»è¿ä»½ MongoDB ææ¡£ç»ä¸ä¸ª ER å¾,æå åµåææ¡£å½ä½ä»å±å®ä½,æ ObjectId å段å½ä½å¤é®å¼ç¨:{ "_id": "...", "customerId": "...", "shippingAddress": { "street": "...", "city": "..." }, "lineItems": [ { "sku": "...", "qty": 2 } ], "status": "paid" }'},{title:"OpenAPI schema â ç±»å¾",prompt:"ä»è¿æ®µ OpenAPI ç»ä»¶ schema ç»ä¸ä¸ª UML ç±»å¾:UserDTO { id: integer, email: string, roles: string[] },CreateUserRequest { email: string, password: string },UserResponse ç»§æ¿ UserDTO 并å createdAt: stringãæ åºç»§æ¿åç»åå ³ç³»ã"}],useCase:`JSON ä¸å±ä¸¤å±è¿å¥½è¯»,åµå°ç¬¬äºå±æ°ç»å¥å¯¹è±¡å°±å¼å§çè¦äº,è¿æ¶åç»å¾æç¨ãæåå§ JSON ç²è¿æ¥ ââ æ¥å£è¿åãJSON Schemaãææ¡£æ°æ®åºçæ ·ä¾ãOpenAPI çç»ä»¶å®ä¹ ââ æ¿åä¸å¼ å¾:ç»æåå ³ç³»å(å®ä½ä¹é´æéå«çå¤é®)å°±ç» [ER å¾](/zh/erd-from-text),æ´å带类åç对象模å(DTOã带继æ¿ç请æ±åè¿åç»æ)å°±ç»[ç±»å¾](/zh/class-diagram-from-text)ã 111 112å®æ¨æå ³ç³»çæ¹å¼è·ä¸ä¸ªæç»éªçå端读 JSON å·®ä¸å¤:åµå¥å¯¹è±¡æä¸ä¸æåæå åµå®ä½æè å¤é®å ³ç³»,对象æ°ç»åæä¸å¯¹å¤,ççå ID å¼ç¨çå段(userIdãauthorIdãMongo ç ObjectId)å³ä½¿æ²¡ææ¾å¼å£°æä¹å½å¤é®å¤çãè¾å ¥æ¯å¸¦ $ref ç JSON Schema çè¯,è¿äºå¼ç¨ç´æ¥ç §ç¨,ä¸ç¨çã 113 114è¿æ¯ä¸ç§è§£è¯»,ä¸æ¯ schema æ ¡éªå¨ãçæ£ææ§ä¹ç JSON ââ ä¸ä¸ªåµå¥å¯¹è±¡å°åºæ¯å åµæ°æ®è¿æ¯è§èåä¹åçå¼ç¨,两ç§è®¾è®¡é½è¯´å¾é ââ å®ç»ä¸ä¸ªåççå¤æãä½ å¨æ¿è¿å¼ å¾å½æ£å¼ç表ç»æ设计ææ¡£ä¹å,å æ ¸å¯¹ä¸ä¸å®æ çæ¯ä¸å¯¹å¤è¿æ¯ä¸å¯¹ä¸ãå®ææ é¿çæ¯ä¸æ¥æã两ç¾è¡çä¸æç JSONãåæãæ°æ®é¿è¿æ ·ãã`,scenarios:[{icon:"FileJson",title:"æ¥å£ææ¡£",body:"ä¸ä¸ªåµå¥å¾æ·±çæ¥å£è¿å,åå§ JSON æ¾å¨ææ¡£é没æ³è¯»ãç²è¿æ¥,æ¿çæç ER å¾æ¿æå®ã"},{icon:"Database",title:"ææ¡£æ°æ®åºçç»æè®°å½",body:"MongoDB è¿ç±»ææ¡£æ°æ®åºä¸å¼ºå¶ç»æ,ç²å 份çå®ææ¡£ãæéå«çç»æç»åºæ¥,å¾å¾æ¯è®°å½ãå®é åäºä»ä¹ãçå¯ä¸åæ³ã"},{icon:"Bug",title:"çæä¸å¤§å¨ payload",body:"bug æ¥åééçä¸ä¸ªå·¨å¤§ç JSON,ç»æå®ä½å¾æ¯ä¸å±å±æ°ç¼©è¿å®¹æçæ¸ ã"},{icon:"ClipboardCheck",title:"å¼åä¹åå è¯å®¡æ¥å£è®¾è®¡",body:"å ææç®è¿åçç»æåæ JSON,ç»åºæ¥,å端ä¸è¡ä»£ç 没åå°±è½æ¿å°å ³äºæ°æ®æ¨¡åçåé¦ã"},{icon:"Handshake",title:"åå端对æ¥å£",body:"åå端è¦å°±ä¸ä¸ªè¿åç»æè¾¾æä¸è´çæ¶å,ä¸å¼ å¾æ¯å¨ç¾¤éè´´å æ¡ç¤ºä¾æ¶æ¯æ´å个å¥çº¦ã"}],faq:[{q:"å®æ¯æä¹ä» JSON é认åºå®ä½åå ³ç³»ç?",a:"åµå¥å¯¹è±¡æä¸ä¸æåæå åµå®ä½æè å¤é®å ³è,对象æ°ç»åæä¸å¯¹å¤,é¿å¾å ID çå段(userIdãauthorIdãObjectId)å³ä½¿æ²¡ææ¾å¼å£°æä¹å½å¤é®ãè¾å ¥å¸¦ $ref ç JSON Schema æ¶,è¿äºå¼ç¨ç´æ¥ç §ç¨,ä¸é çã"},{q:"æ¯æ带 $ref ç JSON Schema å?",a:"æ¯æãç²ä¸ä»½å®ä¹ä¹é´ç¨ $ref äºç¸å¼ç¨ç JSON Schema,å®ä¼ææ¯ä¸ªè¢«å¼ç¨çå®ä¹å½æç¬ç«å®ä½,æå¼ç¨å ³ç³»è¿èµ·æ¥ ââ æ°ç»éç ref è¿æä¸å¯¹å¤,å个 ref æä¸ä¸æè¿æä¸å¯¹ä¸æè å¤å¯¹ä¸ã"},{q:"è· ER å¾é£ä¸ªé¡µé¢æä»ä¹åºå«?",a:"ER å¾é¡µé¢ä»ä¸æ®µå¤§ç½è¯æè¿°çç»æåºåãè¿ä¸ªé¡µé¢ä»çå®ç JSON åºå ââ çå®çæ¥å£è¿åãschema æ件æè ææ¡£æ ·ä¾ ââ åæ¨åºå®ä½ç»æãçä½ æä¸æçæ¯ä¸æ®µæè¿°,è¿æ¯ä¸ä»½çå®æ°æ®ã"},{q:"ä¼ä¸ä¼æä¸å¯¹å¤è®¤æä¸å¯¹ä¸?",a:"çææ§ä¹çæ¶åä¼ ââ ä¸ä¸ªåµå¥å¯¹è±¡æ¢å¯è½æ¯å åµæ°æ®,ä¹å¯è½æ¯è§èåä¹åçå¼ç¨ãå®ç»ä¸ä¸ªæåççå¤æ,ä½ æç»æå½èµ·ç¹,è·å®é çæ°æ®æ¨¡å对ä¸ä¸,å°±å¨åå±ç¼è¾å¨éæ¹è¿æ¥ã"},{q:"æ¿å°çæ¯ ER å¾è¿æ¯ç±»å¾?",a:"çä½ æä¹è¯´ã说ãç»ä¸å¼ ER å¾ãæ¿å°å ³ç³»åçè§è§,说ãç»ä¸å¼ ç±»å¾ãæ¿å°å¸¦ç±»åç对象模åè§è§(éå DTOã带继æ¿ç请æ±åè¿åç»æ)ãä¸æå®çè¯,å®æä¸ä¸æå¤æã"},{q:"å è´¹å?",a:"å è´¹,ä¸ç¨æ³¨å,æ IP ææ¯å¤©ç次æ°ä¸éãé¢è§åºç¶ææ è½å¯¼åº SVG å PNGã"}]},"chatgpt-mermaid-fixer":{keyword:"ChatGPT ç»å¾",metaTitle:"ChatGPT ç»å¾ ââ æå®åç Mermaid 渲æåºæ¥ · VizText",metaDescription:"ChatGPT ä¼å Mermaid,ä½ç»ä¸åºæ¥ãæå®çè¾åºç²è¿æ¥å³å¯æ¸²æãç¼è¾ãå¯¼åº SVG/PNG,é让 ChatGPT è¾åºå¹²åè¯æ³çæ示è¯ãå è´¹,ä¸ç¨æ³¨åã",tagline:"ChatGPT è´è´£å Mermaid,è¿éè´è´£ç»åºæ¥ ââ ç²è´´ãä¿®è¯æ³ãæ¹å¾ã导åºã",ctaCode:`flowchart TD 115 A[æå¼ç»å½é¡µ] --> B[å¡«é®ç®±åå¯ç ] 116 B --> C{å¯ç 对å} 117 C -->|ä¸å¯¹| D[æ示é误] 118 D --> B 119 C -->|对| E{å¼äºä¸¤æ¥éªè¯å} 120 E -->|没å¼| H[建ä¼è¯] 121 E -->|å¼äº| F[åå ä½éªè¯ç ] 122 F --> G{éªè¯ç 对å} 123 G -->|ä¸å¯¹| F 124 G -->|对| H 125 H --> I[跳转å°æ§å¶å°]`,comparison:{heading:"ChatGPT è½å¸®ä½ åå°åªä¸æ¥,å©ä¸çè¿éæ¥çå",stepLabel:"ç¯è",colA:"å¨ ChatGPT çè天çªå£é",colB:"å¨è¿ä¸ªé¡µé¢ä¸",rows:[{step:"æä¸æ®µæè¿°åæ Mermaid",a:"è¿ä¸æ¥æ¯å®æ é¿çãä½ ç¨å¤§ç½è¯ææµç¨è®²æ¸ æ¥,å®å°±è½ååºä¸æ®µ Mermaid 代ç ,å¤æ°æ¶ååä½ æ³è¦çå·®ä¸äºå¤å°ã",b:"åæ ·çäºæ è¿ä¸ªé¡µé¢ä¹è½åãä¸è¿å¦æ ChatGPT å·²ç»æ代ç å好äº,ä½ å°±ä¸å¿ åçæä¸é,ç´æ¥ç²è´´è¿æ¥å°±å¯ä»¥ã"},{step:"çå°å¾æ¬èº«",a:"çä¸å°ãè天çªå£æ Mermaid å½æä¸æ®µä»£ç æ¾ç¤ºåºæ¥,å 为å®æ¸²æçæ¯ Markdown,ä¸æ¯å¾ãä½ è¯»å°çå§ç»æ¯è¯æ³,èä¸æ¯ç»åºæ¥çå½¢ç¶ã",b:"代ç ä¸è¿å°ç»å¸ä¸,å¾å°±ç»åºæ¥äºãä¸é´ä¸éè¦å¤å¶å°å«çå°æ¹,ä¹ä¸éè¦åæå¼ç¬¬ä¸ä¸ªå·¥å ·ã"},{step:"åç°ä»£ç æ¯åç",a:"å¾é¾åç°ãå°äºä¸ä¸ªæ¬å·ç代ç åå®å ¨æ£ç¡®ç代ç ,å¨è天çªå£éçèµ·æ¥æ¯ä¸æ ·çãè¦çå°ä½ æå®æ¾è¿æ个çæ£ä¼æ¸²æå®çå°æ¹,æç¥éå®æ¯åçã",b:"ç²è´´è¿æ¥çé£ä¸å»å°±ç¥éäºãè¦ä¹å¾æ£å¸¸ç»äºåºæ¥,è¦ä¹é¢è§åºä¸æ¹ç´æ¥ç»åºæ¥éã"},{step:"ä¿®è¯æ³é误",a:"ä½ éè¦ææ¥éè´´åå»åé®ä¸éãææ¶åå®åªè¡¥ä¸åºéçé£ä¸è¡,ææ¶åå®ä¼ææ´å¼ å¾éåä¸é,è¿èç¹çååé½æ¢æäºã",b:"æ¥éä¼åææ¯ç¬¬å è¡åºçé®é¢,并ç¨ä¸ä¸ªå°å·æå°åºéçä½ç½®ãæ
125ºç å°±å¨ç»å¸æè¾¹çç¼è¾å¨é,ä½ æ¹æé£ä¸è¡,å¾ä¼ç«å»éæ°ç»ä¸é,å ¶ä½é¨åä¿æä¸å¨ã"},{step:"åªæ¹ä¸ä¸ªèç¹",a:"ä½ æè¦æ¹çå°æ¹æè¿°ä¸é,å®è¿ç»ä½ çæ¯ä¸å¼ å ¨æ°çå¾,å ¶ä¸ä¹å æ¬ä½ æ¬æ¥å°±å·²ç»æ»¡æçé£äºé¨åã",b:"ä½ å¯ä»¥ç´æ¥æ¹æºç éçé£ä¸è¡,ä¹å¯ä»¥åæ¢å°å¯¹è¯æ¨¡å¼,é对ç»å¸ä¸ç°å¨è¿å¼ å¾è¯´ä¸å¥ä½ è¦æ¹ä»ä¹ã"},{step:"æ¿å°ä¸ä¸ªæ件",a:"è天çªå£é没æè¿ä¸æ¥ãä½ éè¦æ代ç å¤å¶åºå»,åèªå·±æ¾ä¸ä¸ªè½æå®æ¸²æåºæ¥çå°æ¹ã",b:"é¢è§åºçç¶ææ å¯ä»¥ç´æ¥å¯¼åº SVG å PNG,ä¹å¯ä»¥ææ´ç好ç Mermaid æºç å¤å¶èµ°ã"}],note:"æ¬ç«ä¸ OpenAI 没æä»»ä½é¶å±å ³ç³»,ä¹æªè·å¾å®çè书æèµå©ãChatGPT æ¯ OpenAI çåæ ãè¿å¼ 表æ¯è¾çæ¯åä¸ä»¶äºæ çåå两个ç¯è,èä¸æ¯ä¸¤ä¸ªäºç¸æ¿ä»£ç产å:ChatGPT ååºæ¥ç Mermaid æ»éè¦æ个å°æ¹æ¸²ææå¾,è¿ä¸ªé¡µé¢è¡¥çå°±æ¯åé¢è¿ä¸æ®µã左边ä¸æ æè¿°çæ¯æ¬ææ°åæ¶ ChatGPT ç½é¡µçç表ç°ã"},examples:[{title:"带两æ¥éªè¯åéå®çç»å½æµç¨",prompt:"ç»ä¸å¼ ç»å½æµç¨å¾:å å¡«é®ç®±åå¯ç ,å¼äºä¸¤æ¥éªè¯çåå¡«éªè¯ç ãå¯ç éäºæ示并éå表å,è¿é 5 次éå®è´¦å·ã"},{title:"å¾®æå¡çä¸æ¬¡è¯·æ±è·¯å¾",prompt:"ç»æ¶åºå¾:æµè§å¨è¯·æ± API ç½å ³,ç½å ³å»é´ææå¡éªèº«ä»½,ç¶åè°è®¢åæå¡,订åæå¡å Postgres å¹¶å¾ Kafka åä¸æ¡äºä»¶ã"},{title:"ä»éæ±ææ¡£åæ¨æ°æ®åºç»æ",prompt:"ç»ä¸å¼ å客平å°ç ER å¾:ç¨æ·åæç« ,æç« æè¯è®ºåæ ç¾,æ ç¾åæç« æ¯å¤å¯¹å¤ãæ åºä¸»é®åå¤é®ã"},{title:"订åçå½å¨æç¶ææº",prompt:"ç»è®¢åçç¶æå¾:å·²å建ãå·²æ¯ä»ãå·²æå ãå·²åè´§ãå·²ç¾æ¶ãæ¯ä»å¤±è´¥éåå·²å建,åè´§åçä»»ä½ç¶æé½è½åæ¶ã"}],useCase:`让 ChatGPT ç»å¾,å®ç»ä½ çæ¯ä¸æ®µæå,ä¸æ¯ä¸å¼ å¾ãå¤æ°æ¶åé£æ®µæåæ¯ Mermaid ââ ä¸ç§çº¯ææ¬çç»å¾è¯æ³,é¿å¾åãflowchart TD / A[å¼å§] --> B[ç»æ]ããææ¶åæ¯ ASCII æ¼çå¾,ææ¶åæ¯ã第ä¸ä¸ªæ¡åä»ä¹ãç®å¤´æååªãçç¼å·è¯´æãå¯ç¬ä¸ä¼æ¯ä¸å¼ ä½ è½ç´æ¥è´´è¿ææ¡£çå¾ã 126 127è¿ä¸æ¯ä½ æ示è¯åå¾ä¸å¥½ãChatGPT ç对è¯æ¡é就没æ Mermaid 渲æå¨ãå®è½ç¨å¾å模åçæä¸å¼ å¾ç,ä½é£æ¯ä¸å¼ ä½å¾ ââ æ¡éçæåç»å¸¸æ¯ç³ç,èç¹å¨ä¸äº,åéä¸ä¸ªåä¹æ¹ä¸äºãåªè¦è¿å¼ å¾æåè¦è¿è®¾è®¡ææ¡£ãè¿ READMEãè¿ PPT,èµ° Mermaid è¿æ¡è·¯å°±æ¯å¯¹ç,ä½ ç¼ºçåªæ¯æè¯æ³åæå¾çé£ä¸æ¥ãè¿é¡µå°±æ¯å¹²è¿ä¸ªç:æ ChatGPT ç»ä½ çé£æ®µç²è¿æ¥,çå°å¾,ç¶åç´æ¥æ¹ã 128 129æ³è®©å®è¾åºä¸æ®µè½ç´æ¥ç¨ç Mermaid,æ示è¯è¦åå¾å¾å ·ä½ãæ¯å¦:ãåªè¾åº Mermaid 代ç ,æ¾å¨ä¸ä¸ªä»£ç åé,ç¨ flowchart TD,ååä¸è¦ä»»ä½è§£éãèç¹æåä¸è¶ è¿ 8 个å,éé¢ä¸è¦åºç°æ¬å·ãåå·åå¼å·ããæåé£å¥æ¯çä¸å»éè¦ ââ æ ç¾é没转ä¹çæ ç¹,æ¯æ¨¡åçæç Mermaid 解æ失败ç头å·åå ã 130 131模åå Mermaid 常ç¯çéå°±é£åç±»,认å¾åºæ¥å°±å¥½åãä¸æ¯æ ç¾é带æ ç¹:åæ A[æ£æ¥ç¨æ·(管çå?)] ç´æ¥æ解æå¨å¡ä½,å¾ç»æåå å¼å·ãäºæ¯èªå·±åæç®å¤´:æ¯ç§å¾çç®å¤´åæ³æ¯åºå®ç,模åå¶å°ä¼æå«çå¾çç®å¤´æ¿è¿æ¥ç¨ãä¸æ¯ä¸æ®µéæ··äºä¸¤ç§å¾,æ¯å¦æµç¨å¾éåºç°æ¶åºå¾çç®å¤´ãåæ¯ä»£ç åå¤é¢å¤çäºä¸å¥è§£éçè¯ãè¿äºé误ç²è´´è¿æ¥ä¹å,æ¥éä¼åææ¯ç¬¬å è¡åºçé®é¢,并ç¨ä¸ä¸ªå°å·æå°åºéçä½ç½®,èä¸æ¯ç»ä½ ä¸åç½æ¿ãä½ æ¹æé£ä¸è¡å°±å¯ä»¥äº,ä¹å¯ä»¥åæ¢å°[对è¯æ¨¡å¼](/zh/chat-to-diagram),ç¨ä¸å¥è¯è¯´æ¸ æ¥ä½ è¦æ¹ä»ä¹ã 132 133å¾ç»åºæ¥ä¹åå°±æ¯æ£å¸¸çç¼è¾å·¥ä½äºãåå±ç左边æ¯æºç ,å³è¾¹æ¯å¾,ä½ æ¹å¨å ¶ä¸ä¸è¾¹,å¦ä¸è¾¹ä¼ç«å»è·çåãéè¦æ¾è¿ææ¡£å PPT å°±å¯¼åº SVG,éè¦åå°ç¾¤éæè è´´è¿å·¥åå°±å¯¼åº PNG,ä¹å¯ä»¥æ Mermaid æºç å¤å¶åå»,å代ç ä¸èµ·æ交ãå¦æä½ æ ¹æ¬ä¸æ³ç»è¿ ChatGPT è¿ä¸é,è¿ä¸ªé¡µé¢ä¹è½ç´æ¥ä»ä¸æ®µä¸ææè¿°çæå¾,ä¸é¢é£åå¼ ç¤ºä¾å¡éçåæ³å¯ä»¥ç §çç¨ã 134 135å ³äºå称:VizText æ¯ç¬ç«äº§å,ä¸ OpenAI æ é¶å±ãæ è书ãæ èµå©å ³ç³»ãChatGPT å GPT æ¯ OpenAI çåæ ãè¿ä¸é¡µè®²çæ¯æä¹æ ChatGPT çè¯è¨æ¨¡åååºæ¥çç»å¾è¯æ³æ¸²ææ
135å¾,没æä½¿ç¨ OpenAI çåçæ è¯,ä¹ä¸ä¸»å¼ ä¸å
¶åå¨ä»»ä½å
³èã`,scenarios:[{icon:"MessageSquare",title:"ChatGPT ç»çæ¯ä»£ç ä¸æ¯å¾",body:"åçæ«å°¾ç»ä½ çæ¯ä¸æ®µ Mermaid 代ç ,ä½ æ¢çä¸åºå®é¿ä»ä¹æ ·,ä¹çä¸å°å¾ãç²è´´å°è¿éå°±è½ç´æ¥åæå¾,ä¸ç¨å®è£
ä»»ä½ä¸è¥¿,ä¹ä¸ç¨æ³¨åã"},{icon:"Bug",title:"é£æ®µ Mermaid 解æä¸äº",body:"常è§çåå æä¸ç§:æ ç¾éçæ¬å·æ²¡æå å¼å·,ç®å¤´çåæ³æ¯ä»å«çå¾ç±»ååæ¥ç,æè
代ç åå¤é¢å¤çäºä¸å¥è¯ãæ¥éä¼åææ¯ç¬¬å è¡åºçé®é¢,èä¸æ¯ç»ä½ ä¸åç½æ¿ã"},{icon:"RefreshCw",title:"åªæä¸ä¸ªæ¡ä¸å¯¹,å
¶ä»é½æºå¥½",body:"åå»è®© ChatGPT æ¹ä¸ä¸ªå°å°æ¹,å®å¸¸å¸¸ä¼ææ´å¼ å¾éåä¸éãå¨è¿éä½ å¯ä»¥åªæ¹é£ä¸ä¸ªèç¹,ä¹å¯ä»¥ç¨å¯¹è¯æ¨¡å¼è¯´ä¸å¥è¦æ±,å
¶ä½é¨ååæ ·ä¿çã"},{icon:"Download",title:"è¿å¼ å¾æåè¦è¿ææ¡£æ PPT",body:"导åºæ SVG,æ¾è¿ NotionãConfluence æè
é£ä¹¦,æä¹æ¾å¤§é½æ¯æ¸
æ¥ç;导åºæ PNG,å¯ä»¥ç´æ¥åå°ç¾¤éæè
è´´è¿å·¥åãè¿ä¸¤æ ·è天çªå£é½ç»ä¸äºä½ ã"},{icon:"FileCode",title:"å¾è¦è·ä»£ç æ¾ä¸èµ·",body:"ææ´ç好ç Mermaid æºç å¤å¶åå»,æäº¤è¿ README æè
ADRãå®æ¯çº¯ææ¬,å¨ code review éè½çåºè¿æ¬¡æ¹äºåªä¸è¡,èæªå¾åä¸å°è¿ä¸ç¹ã"}],faq:[{q:"ChatGPT è½ç»å¾å?",a:"å®è½ååºç»å¾çè¯æ³ ââ å¤æ°æ¶åæ¯ Mermaid ââ ä½å¯¹è¯æ¡ä¸æ¸²æ,æä»¥ä½ çå°çæ¯ä»£ç ä¸æ¯å¾ãå®ä¹è½ç¨å¾å模åçæä¸å¼ å¾ç,ä½é£æ¯ä½å¾,æåç»å¸¸ä¸å,èä¸æ¹ä¸äºãå®é
å¯è¡çè·¯åæ¯è®©å®å Mermaid,åæ¿å°è½æ¸²æãè½ç¼è¾çå°æ¹ç»åºæ¥ã"},{q:"ChatGPT ä¼æ¸²æ Mermaid å?",a:"ä¸ä¼ãChatGPT åçéç Mermaid åªæ¯ä»£ç åéçä¸æ®µæåãè¦æå®åæå¾,éè¦ä¸ä¸ª Mermaid 渲æå¼æ,èè¿æ£æ¯è¿ä¸ªé¡µé¢æä¾ç:ç²è´´è¿å»,å¾å°±ç»åºæ¥äºã"},{q:"è¿æ¯ OpenAI åçå?",a:"ä¸æ¯ãVizText æ¯ç¬ç«äº§å,ä¸ OpenAI æ é¶å±ãæ è书ãæ èµå©å
³ç³»ãChatGPT å GPT æ¯ OpenAI çåæ ãåè¿ä¸é¡µæ¯å 为 ChatGPT çç¨æ·éè¦ä¸ä¸ªå°æ¹æå®åç Mermaid 渲æåºæ¥ã"},{q:"ä»ä¹æ示è¯è½è®© ChatGPT è¾åºå¹²åç Mermaid?",a:"ä¸ä»¶äºè¯´æ»:åªè¦ä»£ç ãæå®å¾ç±»åã约ææ ç¾ãæ¯å¦ãåªè¾åº Mermaid 代ç ,æ¾å¨ä¸ä¸ªä»£ç åé,ç¨ flowchart TD,ä¸è¦ä»»ä½è§£éãèç¹æåä¸è¶
è¿ 8 个å,éé¢ä¸è¦åºç°æ¬å·ãåå·åå¼å·ããæåè¿æ¡çº¦æè½æ¡ææ常è§çé£ç±»è§£æ失败ã"},{q:"为ä»ä¹ ChatGPT åç Mermaid èæ¯è¯æ³é误?",a:"åç±»åå å äºç»å¤§å¤æ°:æ ç¾éçæ ç¹æ²¡å å¼å·ãç®å¤´åæ³æ¯ä»å«çå¾ç±»ååæ¥çãä¸æ®µéæ··äºä¸¤ç§å¾ã代ç åå¤é¢çäºäººè¯ãç²è¿æ¥ä¹åæ¥éä¼æææ¯åªä¸è¡,ä½ æ¹é£ä¸å¤å°±è¡,ä¸ç¨æ´å¼ éæ°çæã"},{q:"å«ç模åçè¾åºè½ç¨å?",a:"å¯ä»¥ãåªè¦è¾åºçæ¯ Mermaid 就没æåºå«,æ 论å®æ¥èª ClaudeãGeminiãCopilotãä½ æ¬å°è·ç模å,è¿æ¯ä½ èªå·±æåç代ç ,èµ°çé½æ¯åä¸æ¡è·¯ãè¿ä¸ªé¡µé¢æ²¡æä»»ä½é¨åæ¯ç»å®æä¸å®¶æ¨¡åçã"},{q:"渲æåºæ¥ä¹åè¿è½æ¹å?",a:"å¯ä»¥ãåå±çå·¦è¾¹æ¯ Mermaid æºç ,å³è¾¹æ¯å¾,ä½ æ¹å¨å
¶ä¸ä¸è¾¹,å¦ä¸è¾¹ä¼è·çåãä¹å¯ä»¥åæ¢å°å¯¹è¯æ¨¡å¼,ç¨ä¸å¥è¯è¯´æ¸
æ¥è¦æ¹ä»ä¹,ä¸éè¦èªå·±å¨æåè¯æ³ã"},{q:"å
è´¹å?",a:"å
è´¹ãç²è´´ Mermaid 渲æåç¼è¾ä¸ç¨æ³¨åãä»æè¿°çæå¾èµ°çæ¯å
¨ç«åä¸ä¸ªå
è´¹é¢åº¦,æ IP ææ¯å¤©ä¸éãé¢è§åºç¶ææ è½å¯¼åº SVG å PNGã"}]}}};e.s(["DIAGRAM_TYPES",0,a,"DIAGRAM_TYPE_ICONS",0,{auto:"Sparkles",flowchart:"GitBranch",sequence:"ArrowLeftRight",erd:"Database",state:"CircleDot",class:"Box",mindmap:"Network",gantt:"GanttChart",arch:"LayoutTemplate"},"DIAGRAM_TYPE_KEYS",0,i,"getDiagramType",0,function(e,i=t.DEFAULT_LOCALE){let r=a.find(t=>t.slug===e);if(!r)return;let s=o[i]?.[e];if(s)return{...r,...s}},"mapBackendTypeToKey",0,function(e){return e?Object.entries(r).find(([,t])=>t===e)?.[0]??"auto":"auto"}
135,"mapKeyToBackendType",0,function(e){return r[e]},"normalizeDiagramType",0,function(e){if("string"==typeof e)return i.includes(e)?e:void 0}])}]);
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.