salaye

説明

小さく要点を絞った図で、現在のトピックを明確にします。まず表現を示し、補足説明は簡潔にします。読者が理解する必要のある関係を最もよく示せる形式を使います。

• ロジックは擬似コードで記述します：

on(publish)
  if draft is invalid
    return validation errors
  save revision
  queue notification

• ネストした実行と順序は、呼び出しツリーで示します：

publishDraft
  validateDraft
  saveRevision
  queueNotification

• UI の構成は、コンポーネントツリーで図示します。関連するソースパス、状態、モジュールの境界を含めます：

<DraftPage> (src/pages/draft.tsx)
  useDraftState()
  <DraftToolbar> (src/components)
    <PublishButton />

• ファイルの役割や広範なリファクタリングは、注釈付きの浅いツリーで図示します：

src/
├── commands/       # accepts publishing actions
├── drafts/         # owns draft state and validation
└── notifications/  # delivers revision updates

• インタラクション、データフロー、状態遷移には Mermaid を使います：

sequenceDiagram
    participant Editor
    participant API
    participant Store
    Editor->>API: publish draft
    API->>Store: save revision
    Store-->>API: revision id
    API-->>Editor: published revision

• 既存の構成を活用できる場合は、同じ形式で変更を差分として示します。

コンポーネントの変更：

 <DraftPage>
   useDraftState()
   <DraftToolbar>
+    <PublishButton />
   <DraftBody />

ファイルの役割の変更：

 src/
 ├── commands/
 ├── drafts/
-└── notifications.ts
+└── notifications/
+    ├── queue.ts
+    └── worker.ts

呼び出し順序の変更：

 publishDraft
   validateDraft
+  checkExpectedRevision
   saveRevision
-  sendNotification
+  queueNotification

状態または制御フローの変更：

 on(publish)
+  if draft is invalid
+    return validation errors
   save revision
-  send notification
+  queue notification

• 大部分が新規である場合、省略した文脈によって所有関係や順序が分かりにくくなる場合、または読者がコピーできる形を必要としている場合は、ブロック全体を示します：

function revisionLabel(revision: number): string {
  return `Revision ${revision}`;
}

• UI、レイアウト、状態の比較、または Mermaid よりも視覚的な自由度が必要な概念には、html-artifact を使って要点を絞った HTML 図またはインフォグラフィックを作成します。短いスライド資料には slides を使います。製品の色、タイポグラフィ、余白、コンポーネントに合わせ、実際のラベルとデータを使い、デスクトップとモバイルの両方で読みやすくします。利用可能なホストのプレビューで検証済みの結果を開き、更新後も同じ画面を再利用します。プレビューが利用できない場合は、動作するロケーターを返します。

ガイダンス

各図は、それが裏付ける簡潔な説明や根拠のそばに配置します。現在の質問に関係する呼び出し、ファイル、プロパティ、状態、境界、代替案だけを含めます。

役立つ場合は、1 つまたは複数の表現を選びます。すべての形式を回答に無理に盛り込まないでください。図によって明確さが増さない場合は、簡潔な文章だけで十分です。

提示された資料に忠実な表現にします。提案または説明用の構成と、実際に確認された実装を区別し、不確実な点はそのまま保ち、関係や判断をでっち上げないでください。変更前後の表示は、規模、詳細度、ラベルを揃えて比較できるようにします。