diagram-generator

図の生成

アーキテクチャを可視化する Mermaid 図を作成します。

有効化

次の内容を検出したら有効化します。

• 「X の図を作成して」
• 「アーキテクチャを可視化して」
• 「データフローを見せて」
• 「エンティティ間の関係を描いて」

ワークフロー

1. 図の種類を決定する

不明な場合は質問します。

What should this diagram show?
1. Data flow (how data moves through system)
2. Service relationships (dependencies between services)
3. Entity relationships (database structure)
4. Sequence (interaction over time)
5. State (entity lifecycle)

2. 要素を収集する

種類に応じて、次の内容を尋ねます。

データフロー：

• 開始地点はどこですか？
• 処理の手順は何ですか？
• 最終的な到達先はどこですか？

サービス間の関係：

• 主なサービスは何ですか？
• どのサービスに依存していますか？
• イベントの購読者はいますか？

エンティティ間の関係：

• 関係するエンティティは何ですか？
• どのような関係ですか（1 対多など）？

3. 図を生成する

適切な Mermaid コードを作成します。

データフロー：

flowchart LR
    A[Input] --> B[Process]
    B --> C[Output]

サービスの依存関係：

graph TD
    A[MainService] --> B[Dependency1]
    A --> C[Dependency2]

エンティティ間の関係：

erDiagram
    ENTITY1 ||--o{ ENTITY2 : has
    ENTITY1 ||--|| ENTITY3 : references

シーケンス：

sequenceDiagram
    Actor->>Component: Action
    Component-->>Actor: Response

状態：

stateDiagram-v2
    [*] --> State1
    State1 --> State2
    State2 --> [*]

4. 図を提示する

Mermaid コードをユーザーに提示して、次のように尋ねます。

Here's the diagram:

{mermaid code block}

Adjustments needed? (describe changes or "looks good")

5. アーキテクチャに追加する

承認されたら、Edit ツールを使用して適切なアーキテクチャファイルに追加します。

## {Diagram Title}

{One sentence describing what this shows}

\`\`\`mermaid
{diagram code}
\`\`\`

図のテンプレート

Drupal のリクエストフロー

flowchart LR
    A[Request] --> B[Routing]
    B --> C[Controller]
    C --> D[Service]
    D --> E[Entity]
    E --> F[Response]

プラグインシステム

graph TD
    A[PluginManager] --> B[Discovery]
    A --> C[Factory]
    B --> D[Annotations]
    B --> E[YAML]
    C --> F[Plugin Instance]

フォーム送信フロー

sequenceDiagram
    User->>Form: Submit
    Form->>Form: validateForm()
    Form->>Form: submitForm()
    Form->>Service: Process data
    Service-->>Form: Result
    Form-->>User: Redirect/Message

停止ポイント

次のタイミングで停止して、ユーザーを待ちます。

• 図の種類を尋ねた後
• 生成した図を提示した後
• アーキテクチャファイルに追加する前