プロンプトのコツ

良いプロンプトが、良い図を生む

AIから、より良い図を引き出すための10個のコピー＆ペースト用プロンプト末尾。

構造

色や配置の前に — AIが図をどう組み立てるか。

適切な図の種類を選ぶ

フローチャートが正解とは限りません — リクエスト／レスポンスならシーケンス図、ライフサイクルなら状態図、データなら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

意味でノードをグループ化

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

境界をsubgraphで囲む

subgraph を使うと「これは1つのサービス」「これは1つのチーム」が一目で分かります。

Browser、Backend services、Data の3つの 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

レイアウト方向を選ぶ

パイプラインやリクエストフローには LR、階層や判定には TD。

ソースを表示

mermaid

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

明瞭さ

各ノードと矢印を、装飾ではなく意味を担うものにする方法。

具体的に命名する

「Stripe」は「決済プロバイダー」より勝ります。具体名は図を引用しやすくします。

Stripe、Postgres、S3 という具体的なサービス名を持つフローチャート。

ソースを表示

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

エッジにラベルを付ける

ラベルのない矢印は「何かが起きる」と言うだけ。ラベル付きの矢印は何が起きるかを教えてくれます。

ソースを表示

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

絵文字を道しるべに

Mermaid はラベル内の Unicode をレンダリングします。重要なノードに1つの絵文字 = 一目で焦点が分かります。

ソースを表示

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

1つの図には1つの関心事

「全て」の図は「何も」の図です。質問ごとに分けてください。

ソースを表示

mermaid

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

反復

最初の下書きを、実際に共有できるものに磨き上げる方法。

やり直さず、磨く

最初の図は下書きです。文章を編集するのと同じように編集してください。

ソースを表示

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

用途に合うスタイルを選ぶ

スライドには Midnight、ドキュメントには Paper、自然・健康なら Forest、運用なら Ocean、印刷なら Mono。

3つのメディア種別と、対応する DiagramZu のスタイルプリセット3つの対応関係。

ソースを表示

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