提示词技巧 · DiagramZu

结构

在颜色和布局之前 —— AI 怎么把图搭起来。

01

选对图表类型

流程图并非万能 —— 请求/响应用时序图，生命周期用状态图，数据关系用 ER 图。

查看源码

mermaid

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

02

按含义分组

DiagramZu 会自动给分组上色；你只需要给分组命名。

把浏览器、CDN、网关、Auth、Billing、Postgres 按职责分组上色的流程图。

查看源码

mermaid

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

03

用 subgraph 包裹边界

subgraph 让「这是一个服务」「这是一个团队」一目了然。

带有 Browser、Backend services、Data 三个 subgraph 边界的流程图。

查看源码

mermaid

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

04

选择布局方向

管道和请求流用 LR，层级和决策用 TD。

查看源码

mermaid

flowchart LR
  A[Source] --> B[Transform] --> C[Validate] --> D[Sink]
  class A edge
  class B,C core
  class D data

清晰

怎样让每个节点和箭头都有承重作用，而不只是装饰。

05

具体地命名

「Stripe」胜过「支付提供商」；具体名字让图表更容易被引用。

查看源码

mermaid

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

06

给边加标签

没标签的箭头只说「发生了什么」；有标签的箭头在教你。

查看源码

mermaid

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

07

用 emoji 当路标

Mermaid 支持渲染标签里的 Unicode。给关键节点加一个 emoji，焦点立现。

查看源码

mermaid

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

08

一张图只讲一件事

一张「啥都讲」的图等于啥也没讲。按问题拆开。

查看源码

mermaid

flowchart LR
  REQ[Request] --> AUTH[Auth check] --> HANDLER[Handler] --> RES[Response]
  class REQ edge
  class AUTH,HANDLER core
  class RES data

迭代

怎样把第一版草稿，变成你愿意真正共享出去的图。

09

迭代，不要重来

第一张图是草稿。像编辑文章那样编辑它。

查看源码

mermaid

flowchart TD
  V1[v1: flat] --> V2[v2: grouped] --> V3[v3: labeled] --> V4[v4: shipped]
  class V1 edge
  class V2,V3 core
  class V4 accent

10

搭配合适的样式

幻灯片用 Midnight、文档用 Paper、自然/健康用 Forest、运维用 Ocean、印刷用 Mono。

查看源码

mermaid

flowchart LR
  SLIDES[📽 Slides] --> M[Midnight]
  DOCS[📄 Docs] --> P[Paper]
  PRINT[🖨 Print] --> MO[Mono]
  class SLIDES,DOCS,PRINT edge
  class M,P,MO core

好的提示词，好的图表