PROMPT TIPS
Ten copy-paste prompt suffixes for getting better diagrams out of your AI.
Before color, before layout — how the AI shapes the diagram.
Flowcharts aren't always the answer — sequence for request/response, state for lifecycles, ER for data.
sequenceDiagram
participant U as User
participant API
participant DB as Postgres
U->>API: POST /login
API->>DB: SELECT user
DB-->>API: row
API-->>U: 200 + session
DiagramZu auto-colors groups; you just have to name them.
flowchart TD
A[Browser] --> B[CDN] --> C[Gateway]
C --> D[Auth] & E[Billing]
D & E --> F[(Postgres)]
class A,B edge
class C,D,E core
class F data
Subgraphs make "this is one service" / "this is one team" visually obvious.
flowchart LR
subgraph client[Browser]
UI[Web app]
end
subgraph services[Backend services]
API[API gateway]
AUTH[Auth]
BILL[Billing]
end
subgraph data[Data]
DB[(Postgres)]
end
UI --> API
API --> AUTH & BILL
AUTH & BILL --> DB
class UI edge
class API,AUTH,BILL core
class DB data
LR for pipelines and request flow, TD for hierarchies and decisions.
flowchart LR
A[Source] --> B[Transform] --> C[Validate] --> D[Sink]
class A edge
class B,C core
class D data
How you make each node and arrow load-bearing instead of decorative.
"Stripe" beats "Payment provider"; specific names make the diagram quotable.
flowchart LR
U[User] --> APP[Web app]
APP --> STRIPE[Stripe]
APP --> POSTGRES[(Postgres)]
APP --> S3[S3]
class U edge
class APP core
class STRIPE,POSTGRES,S3 data
An unlabeled arrow says "something happens"; a labeled one teaches.
flowchart LR
U[User] -- "submits form" --> API[API]
API -- "validates" --> AUTH[Auth]
AUTH -- "token" --> API
API -- "writes row" --> DB[(Postgres)]
class U edge
class API,AUTH core
class DB data
Mermaid renders unicode in labels. One emoji on a key node = instant focal point.
flowchart LR
U[User] --> APP[🔑 Auth gateway]
APP --> SVC[Service]
SVC --> DB[(💾 Postgres)]
SVC --> AI[🤖 LLM]
class U edge
class APP,SVC core
class DB,AI data
A diagram of "everything" is a diagram of nothing. Split by question.
flowchart LR
REQ[Request] --> AUTH[Auth check] --> HANDLER[Handler] --> RES[Response]
class REQ edge
class AUTH,HANDLER core
class RES data
How the first draft becomes something you'd actually ship.
The first diagram is a draft. Edit it the same way you'd edit prose.
flowchart TD
V1[v1: flat] --> V2[v2: grouped] --> V3[v3: labeled] --> V4[v4: shipped]
class V1 edge
class V2,V3 core
class V4 accent
Midnight for slides, Paper for docs, Forest for nature/health, Ocean for ops, Mono for print.
flowchart LR
SLIDES[📽 Slides] --> M[Midnight]
DOCS[📄 Docs] --> P[Paper]
PRINT[🖨 Print] --> MO[Mono]
class SLIDES,DOCS,PRINT edge
class M,P,MO core