Playwright MCPとPlantUML検証MCPを使って画面みながら対話的にUML図作る

# 概要

[PlantUMLコードを検証するMCPサーバーを実装してみた](https://qiita.com/kwhrkzk/items/a7ae51aa2e00406b9c8f)の続きです。

新たにデコードのツールとエンコードのツールを追加してみました。
それらを使用して以下の構成でエージェントモードと対話的にUML図作れたのでご報告です。

```plantuml
@startuml
left to right direction
!include <logos/visual-studio-code.puml>
!include <cloudogu/dogus/plantuml.puml>
!include <logos/chrome.puml>

title "Project Overview"
  node myplantuml as "PlantUML Server" <<$plantuml>> {
  }
  note bottom of myplantuml
    Remote Service
  end note

package "MCP Server" {
package "Docker" {
  node plantuml_mcp_server as "PlantUML MCP Server" <<container>> {
  }
}
package "NPM" {
  node playwright as "Playwright MCP Server" <<$npm>>
}
}
plantuml_mcp_server <-> myplantuml : check, decode, encode
actor user
node vscode as "github copilot" <<$visual-studio-code>>
note bottom of vscode
  Host with MCP Client
end note

label browser as "browser" <<$chrome>>

user --> vscode: Chat
user --> browser : look
vscode --> playwright
vscode --> plantuml_mcp_server
playwright --> browser : Controls
browser <--> myplantuml : Communicates
@enduml
```

# 使用したライブラリ、ツール
* [playwright-mcp](https://github.com/microsoft/playwright-mcp)
* [Plantuml Validation MCP Server](https://github.com/kwhrkzk/plantuml-validator-mcp-server/tree/main)
* vscode
* github Copilot 
* plantuml server

# settings.json例

```json: settings.json
    "mcp": {
        "servers": {
            "my-plantuml-mcp-server-docker": {
                "type": "stdio",
                "command": "docker",
                "args": [
                    "run",
                    "--rm",
                    "-i",
                    "--network=host",
                    "plantuml-mcp-server-stdio",
                    "PlantumlBaseUrl=http://your_plantuml_server/"
                ],
            },
            "playwright": {
                "type":"stdio",
                "command": "npx",
                "args": [
                    "@playwright/mcp@latest"
                ]
            }
        }
    },
```

# 適用するプロンプト
今回は[copilot-instructions.md](https://docs.github.com/ja/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot)に記載してみました。


```md: copilot-instructions.md
# 目的
plantumlコードを対話的に作成することが目的です。
plantumlサーバーは"http://your_plantuml_server/"にあります。

# 検証
あなたはplantumlコードを作成する場合、常にValidatePlantumlを利用して検証します。

# 表示
検証でエラーがでなくなったら、playwrightを利用してブラウザに表示します。
表示する内容は検証でエラーがでなくなったコードです。
ブラウザに表示する際のurlは/uml/{エンコード文字列}です。
エンコード文字列はEncodePlantumlを利用して取得してください。
ブラウザに表示する際はbrowser_navigateを利用してください。

# 取得
plantumlコードはplaywrightを利用してブラウザから取得してください。
ブラウザからは/uml/{エンコード文字列}の形式で返ってくるので
エンコード文字列はDecodePlantumlを利用してデコードしてください。
```

# 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109302/d154fad4-a7b1-4148-b258-fa58ef4d5dfa.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109302/a8f90e38-be76-43c6-8630-4dee9a818e4f.png)

この間、playwrightによって制御されたブラウザが別窓で開かれて操作されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109302/c5f7009b-1778-4855-8241-3dfe29fc58f7.png)

# 所感
今までは自分でplantumlコードをplantumlサーバーに張り付けるという作業が必要でしたが、この仕組みを使えばコードのキャッチボールがより簡潔にできる気がしてきました。