MCPサーバ - Draw.io - 版の履歴

Wiki: /* Draw.io MCP Server (jgraph/drawio-mcp) */

2026-02-22T21:38:10Z

Draw.io MCP Server (jgraph/drawio-mcp)

← 古い版		2026年2月23日 (月) 06:38時点における版
585行目:		585行目:
	! 方式 !! 説明		! 方式 !! 説明
	\|-		\|-
	\| MCP App Server \|\| チャット内にインラインでダイアグラムを表示する方式<br>~~インストール不要で、公式ホストエンドポイント（https~~://mcp.draw.io/~~mcp）を使用する。~~		\| MCP App Server \|\| チャット内にインラインでダイアグラムを表示する方式<br>インストール不要で、公式ホストエンドポイント (https://mcp.draw.io/mcp) を使用する。
	\|-		\|-
	\| MCP Tool Server \|\| WebブラウザでDraw.ioエディタを開いてダイアグラムを表示する方式<br><u>@drawio/mcp</u> パッケージをnpxで実行する。		\| MCP Tool Server \|\| WebブラウザでDraw.ioエディタを開いてダイアグラムを表示する方式<br><u>@drawio/mcp</u> パッケージをnpxで実行する。

2026年2月22日 (日) 21:37にWikiによる

2026-02-22T21:37:32Z

差分を表示

Wiki: /* ポート設定 */

2026-02-06T20:17:32Z

ポート設定

← 古い版		2026年2月7日 (土) 05:17時点における版
178行目:		178行目:
	Draw.io MCP Serverは、デフォルトでWebSocketポート3333を使用してブラウザ拡張機能と通信する。<br>		Draw.io MCP Serverは、デフォルトでWebSocketポート3333を使用してブラウザ拡張機能と通信する。<br>
	このポート番号は、カスタマイズすることができる。<br>		このポート番号は、カスタマイズすることができる。<br>
			<br>
			<u>※注意</u><br>
			<u>各MCPサーバインスタンスが独自のWebSocketサーバを起動しようとするため、同じポートを使う複数のインスタンスは共存できない。</u><br>
			<u>例えば、複数のClaude CodeおよびClaude Desktopを起動してDraw.io MCP Serverを使用する場合、同じポート番号を使用するとエラーになる。</u><br>
			<u>そのため、異なるポート番号を指定する必要がある。</u><br>
	<br>		<br>
	カスタムポートの設定例を以下に示す。<br>		カスタムポートの設定例を以下に示す。<br>
201行目:		206行目:
	<br>		<br>
	<br>		<br>

	==== HTTPトランスポートの使用 ====		==== HTTPトランスポートの使用 ====
	リモートアクセス用にHTTPトランスポートを有効化することができる。<br>		リモートアクセス用にHTTPトランスポートを有効化することができる。<br>

Wiki: /* 設定とカスタマイズ */

2026-01-22T07:11:37Z

設定とカスタマイズ

← 古い版		2026年1月22日 (木) 16:11時点における版
179行目:		179行目:
	このポート番号は、カスタマイズすることができる。<br>		このポート番号は、カスタマイズすることができる。<br>
	<br>		<br>
	~~# カスタムポートの設定例~~ :		カスタムポートの設定例を以下に示す。<br>
	npx @lgazo/drawio-mcp-server --extension-port 4000		<syntaxhighlight lang="json">
			{
			"mcpServers": {
			"drawio": {
			"command": "npx",
			"args": ["@lgazo/drawio-mcp-server", "--extension-port", "4000"]
			}
			}
			}
			</syntaxhighlight>
	<br>		<br>
	この設定により、ポート4000でWebSocket通信を行う。<br>		この設定により、ポート4000でWebSocket通信を行う。<br>
	~~ブラウザ拡張機能側も同じポート番号を設定する必要がある。~~<br>		<br>
			また、ブラウザ拡張機能側も同じポート番号を設定する必要がある。<br>
			* ブラウザ拡張機能のポート設定
			*# ブラウザ拡張機能のアイコンをクリックする。
			*# 設定画面が表示される。
			*# WebSocketポート番号を4000に変更する。
			*# 保存して拡張機能を再読み込みする。
			<br>
	<br>		<br>
	==== HTTPトランスポートの使用 ====		==== HTTPトランスポートの使用 ====
189行目:		205行目:
	デフォルトポートは3000である。<br>		デフォルトポートは3000である。<br>
	<br>		<br>
	~~# HTTPトランスポートの有効化例~~ :		HTTPトランスポートの有効化例を以下に示す。<br>
	npx @lgazo/drawio-mcp-server --transport http		<syntaxhighlight lang="json">
			{
			"mcpServers": {
			"drawio": {
			"command": "npx",
			"args": ["@lgazo/drawio-mcp-server", "--transport", "http"]
			}
			}
			}
			</syntaxhighlight>
	<br>		<br>
	この設定により、HTTP経由でMCPサーバにアクセスできる。<br>		この設定により、HTTP経由でMCPサーバにアクセスできる。<br>

Wiki: /* 使用方法 */

2026-01-22T07:08:36Z

使用方法

← 古い版		2026年1月22日 (木) 16:08時点における版
404行目:		404行目:
	== 使用方法 ==		== 使用方法 ==
	==== プロンプトの基本形式 ====		==== プロンプトの基本形式 ====
	Claude DesktopでDraw.io MCP ~~Serverを使用する場合は、以下の形式でプロンプトを記述する。~~<br>		Claude DesktopでDraw.io MCP Serverを使用する際は、自然言語でダイアグラムの作成を依頼できる。<br>
	<br>		<br>
	# 基本形式 :		# 基本形式 :
411行目:		411行目:
	<br>		<br>
	プロンプト内で、作成するダイアグラムの種類、含めるべき要素、レイアウト、スタイル等を指定する。<br>		プロンプト内で、作成するダイアグラムの種類、含めるべき要素、レイアウト、スタイル等を指定する。<br>
			Claude AIが自動的に適切なツールを選択して実行する。<br>
	<br>		<br>
	==== シンプルなフローチャートの作成 ====		==== シンプルなフローチャートの作成 ====

Wiki: /* インストール */

2026-01-22T06:38:32Z

インストール

@@ 115行目: / 115行目: @@
       "drawio": {
         "command": "pnpm",
         "args": ["dlx", "@lgazo/drawio-mcp-server"]
+      }
@@ 122行目: / 134行目: @@
 <br>
 Claude Desktopを再起動して、Draw.io MCP Serverが利用可能であることを確認する。<br>
 <br>
 ==== ブラウザ拡張機能のインストール ====

Wiki: ページの作成:「== 概要 == Draw.io MCP Server は、AI システムがDraw.io ダイアグラムをプログラマティックに制御・検査できるようにするMCP (Model Context Protocol) サーバである。
このMCPを使用することにより、Claude等のLLMがDraw.io上でフローチャート、シーケンス図、アーキテクチャ図、ネットワーク図等の様々なダイアグラムを自動的に作成・編集することができる。
…」

2026-01-22T05:19:42Z

ページの作成:「== 概要 == Draw.io MCP Server は、AI システムがDraw.io ダイアグラムをプログラマティックに制御・検査できるようにするMCP (Model Context Protocol) サーバである。 このMCPを使用することにより、Claude等のLLMがDraw.io上でフローチャート、シーケンス図、アーキテクチャ図、ネットワーク図等の様々なダイアグラムを自動的に作成・編集することができる。 …」

新規ページ

== 概要 ==
Draw.io MCP Server は、AI システムがDraw.io ダイアグラムをプログラマティックに制御・検査できるようにするMCP (Model Context Protocol) サーバである。 
このMCPを使用することにより、Claude等のLLMがDraw.io上でフローチャート、シーケンス図、アーキテクチャ図、ネットワーク図等の様々なダイアグラムを自動的に作成・編集することができる。 
 
Draw.io MCP Serverは、以下に示すような機能を提供する。 
* ダイアグラムの検査機能 (選択セル取得、シェイプカテゴリ列挙、ページモデル取得)
* ダイアグラムの編集機能 (矩形追加、エッジ追加、カスタムシェイプ追加、セル削除)
* セルのプロパティ編集とスタイル適用
* カスタム属性の保存と管理
 
Draw.io MCP Serverは、WebSocket (デフォルトポート: 3333) を使用してブラウザ拡張機能経由でDraw.ioと通信する。 
これにより、Claude Desktop、oterm、Zed等のMCPクライアントと統合することができる。 
 
Draw.io MCP Serverの最大の特徴は、Webブラウザ拡張機能を介してリアルタイムにDraw.ioダイアグラムを操作できることである。 
全てのダイアグラム処理機能は、TypeScriptで実装されており、Node.js 20以上で動作する。 
 

== Draw.io MCP Serverの機能 ==
==== ダイアグラム検査機能 ====
* 選択されたセルの取得 (get-selected-cells)
* シェイプカテゴリの列挙 (get-shape-categories)
* 特定のシェイプ情報の取得 (get-specific-shapes)
* ページ分割されたダイアグラムモデルの取得 (list-paged-model)
 
==== ダイアグラム編集機能 ====
* 矩形の追加 (add-rectangle)
* エッジ (接続線) の追加 (add-edge)
* カスタムシェイプの追加 (add-custom-shape)
* セルの削除 (delete-cell)
* セルのプロパティ編集 (edit-cell)
 
==== スタイルとデータ管理 ====
* ライブラリスタイルの適用 (apply-library-style)
* カスタム属性の保存 (set-cell-data)
* シェイプのプロパティ変更
 

== 対応ダイアグラムタイプ ==
Draw.io MCP Serverは、Draw.ioで作成可能なすべてのダイアグラムタイプをサポートしている。 
 
<center>
{| class="wikitable"
|+ 対応ダイアグラムタイプ
|-
! タイプ !! 説明
|-
| フローチャート || プロセスフローと意思決定を視覚化
|-
| シーケンス図 || システムコンポーネント間の相互作用を時系列で表現
|-
| アーキテクチャ図 || システムアーキテクチャとコンポーネント構成を記述
|-
| ネットワーク図 || ネットワークトポロジーとデバイス接続を表現
|-
| データベース設計図 || データベーススキーマとER図を記述
|-
| UML図 || クラス図、アクティビティ図、ユースケース図等
|-
| マインドマップ || アイデアと概念の階層構造を視覚化
|-
| 組織図 || 組織構造と報告関係を表現
|-
| Ganttチャート || プロジェクトタイムラインとタスク管理
|}
</center>
 

== 動作要件 ==
==== システム要件 ====
* Node.js 20以上
* Draw.io MCP Browser Extension (Chrome または Firefox)
* MCPクライアント (Claude Desktop、oterm、Zed等)
 
==== 必須コンポーネント ====
* Draw.io MCP Server (TypeScript実装)
* Draw.io MCP Extension (ブラウザ拡張機能)
* app.diagrams.net へのアクセス
 
==== ネットワーク要件 ====
* WebSocketポート (デフォルト: 3333) の利用可能性
* ファイアウォールでの指定ポートの開放
* ブラウザ拡張機能とサーバ間の通信許可
 

== インストール ==
==== Draw.io MCP Serverのインストール ====
Draw.io MCP Serverは、MCPクライアントの設定ファイルを編集することにより、自動的にインストールされる。 
以下に示す設定例を参照すること。 
 
==== Claude Desktopでの設定 ====
Claude Desktopの設定ファイルを編集する。 
 
設定ファイルの場所は、以下の通りである。 
* Linux
*: ~/.config/Claude/claude_desktop_config.json
* Windows
*: %APPDATA%\Claude\claude_desktop_config.json
 
npmを使用する場合の設定を以下に示す。 
<syntaxhighlight lang="json">
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@lgazo/drawio-mcp-server"]
}
}
}
</syntaxhighlight>
 
pnpmを使用する場合の設定を以下に示す。 
<syntaxhighlight lang="json">
{
"mcpServers": {
"drawio": {
"command": "pnpm",
"args": ["dlx", "@lgazo/drawio-mcp-server"]
}
}
}
</syntaxhighlight>
 
Claude Desktopを再起動して、Draw.io MCP Serverが利用可能であることを確認する。 
 
==== ブラウザ拡張機能のインストール ====
Draw.io MCP Extensionをブラウザにインストールする必要がある。 
 
===== Google Chromeの場合 =====
# Chrome Web Storeから「Draw.io MCP Extension」を検索
# [追加] ボタンをクリックしてインストール
# 拡張機能がアクティブであることを確認
 
===== Mozilla Firefoxの場合 =====
# Firefox Add-onsから "Draw.io MCP Extension" を検索する。
# [Firefoxに追加]ボタンを押下してインストールする。
# 拡張機能がアクティブであることを確認する。
 
==== app.diagrams.netへのアクセス ====
# Webブラウザで app.diagrams.net を開く。
# Draw.io MCP Serverは、このページ上でダイアグラムを操作する。
 

== 設定とカスタマイズ ==
==== ポート設定 ====
Draw.io MCP Serverは、デフォルトでWebSocketポート3333を使用してブラウザ拡張機能と通信する。 
このポート番号は、カスタマイズすることができる。 
 
# カスタムポートの設定例 :
npx @lgazo/drawio-mcp-server --extension-port 4000
 
この設定により、ポート4000でWebSocket通信を行う。 
ブラウザ拡張機能側も同じポート番号を設定する必要がある。 
 
==== HTTPトランスポートの使用 ====
リモートアクセス用にHTTPトランスポートを有効化することができる。 
デフォルトポートは3000である。 
 
# HTTPトランスポートの有効化例 :
npx @lgazo/drawio-mcp-server --transport http
 
この設定により、HTTP経由でMCPサーバにアクセスできる。 
 

== 利用可能なツール ==
==== get-selected-cells ====
選択されたセルの情報を取得する。 
 
* 機能
*: ダイアグラム上で選択されているセル (シェイプ、エッジ) の詳細情報を取得する
*: セルID、スタイル、位置、サイズ等の属性を返す
 
# 使用例 :

選択されているセルの情報を取得してください。
 
==== get-shape-categories ====
利用可能なシェイプカテゴリの一覧を取得する。 
 
* 機能
*: Draw.ioライブラリで利用可能なシェイプカテゴリを列挙する
*: 各カテゴリに含まれるシェイプタイプを確認できる
 
# 使用例 :

利用可能なシェイプカテゴリを一覧表示してください。
 
==== get-specific-shapes ====
特定のシェイプ情報を取得する。 
 
* 機能
*: 指定されたシェイプタイプの詳細情報を取得する
*: スタイルプロパティ、デフォルト設定、カスタマイズオプションを確認できる
 
# 使用例 :

矩形シェイプの詳細情報を取得してください。
 
==== list-paged-model ====
ページ分割されたダイアグラムモデルを取得する。 
 
* 機能
*: 複数ページを持つダイアグラムの構造を取得する
*: 各ページのセル、階層、接続関係を確認できる
 
# 使用例 :

ダイアグラムの全ページモデルを取得してください。
 
==== add-rectangle ====
ダイアグラムに矩形を追加する。 
 
<center>
{| class="wikitable"
|+ パラメータ
|-
! パラメータ !! 型 !! 説明
|-
| x || number || X座標位置
|-
| y || number || Y座標位置
|-
| width || number || 矩形の幅
|-
| height || number || 矩形の高さ
|-
| style || string || スタイル設定 (オプション)
|-
| value || string || 表示テキスト (オプション)
|}
</center>
 
# 使用例 :

座標 (100, 100) に幅200、高さ100の矩形を追加してください。
 
==== add-edge ====
2つのセルを接続するエッジ (接続線) を追加する。 
 
<center>
{| class="wikitable"
|+ パラメータ
|-
! パラメータ !! 型 !! 説明
|-
| source || string || 接続元のセルID
|-
| target || string || 接続先のセルID
|-
| style || string || エッジのスタイル設定 (オプション)
|-
| value || string || エッジのラベル (オプション)
|}
</center>
 
# 使用例 :

セルAとセルBを矢印で接続してください。
 
==== add-custom-shape ====
カスタムシェイプを追加する。 
 
<center>
{| class="wikitable"
|+ パラメータ
|-
! パラメータ !! 型 !! 説明
|-
| shapeType || string || シェイプタイプ (円、菱形、楕円等)
|-
| x || number || X座標位置
|-
| y || number || Y座標位置
|-
| width || number || シェイプの幅
|-
| height || number || シェイプの高さ
|-
| style || string || スタイル設定 (オプション)
|-
| value || string || 表示テキスト (オプション)
|}
</center>
 
# 使用例 :

座標 (200, 200) に円形シェイプを追加してください。
 
==== delete-cell ====
指定されたセルを削除する。 
 
<center>
{| class="wikitable"
|+ パラメータ
|-
! パラメータ !! 型 !! 説明
|-
| cellId || string || 削除するセルのID
|}
</center>
 
# 使用例 :

セルID「cell-123」を削除してください。
 
==== edit-cell ====
既存のセルのプロパティを編集する。 
 
<center>
{| class="wikitable"
|+ パラメータ
|-
! パラメータ !! 型 !! 説明
|-
| cellId || string || 編集するセルのID
|-
| style || string || 新しいスタイル設定 (オプション)
|-
| value || string || 新しい表示テキスト (オプション)
|-
| geometry || object || 新しい位置・サイズ情報 (オプション)
|}
</center>
 
# 使用例 :

セルID「cell-123」のテキストを「データベース」に変更してください。
 
==== apply-library-style ====
ライブラリで定義されたスタイルをセルに適用する。 
 
<center>
{| class="wikitable"
|+ パラメータ
|-
! パラメータ !! 型 !! 説明
|-
| cellId || string || スタイルを適用するセルのID
|-
| libraryName || string || ライブラリ名
|-
| styleName || string || スタイル名
|}
</center>
 
# 使用例 :

セルID「cell-123」にAWSライブラリのEC2スタイルを適用してください。
 
==== set-cell-data ====
セルにカスタム属性データを保存する。 
 
<center>
{| class="wikitable"
|+ パラメータ
|-
! パラメータ !! 型 !! 説明
|-
| cellId || string || データを保存するセルのID
|-
| key || string || 属性のキー
|-
| value || string || 属性の値
|}
</center>
 
# 使用例 :

セルID「cell-123」にカスタム属性「type=server」を保存してください。
 

== 使用方法 ==
==== プロンプトの基本形式 ====
Claude DesktopでDraw.io MCP Serverを使用する場合は、以下の形式でプロンプトを記述する。 
 
# 基本形式 :

@Draw.io MCP Server <指示内容>
 
プロンプト内で、作成するダイアグラムの種類、含めるべき要素、レイアウト、スタイル等を指定する。 
 
==== シンプルなフローチャートの作成 ====
# プロンプト例 :

@Draw.io MCP Server フローチャートを作成してください。
スタートノード、処理ステップ3つ、判定ノード1つ、終了ノードを含めてください。
 
==== アーキテクチャ図の作成 ====
# プロンプト例 :

@Draw.io MCP Server データベースアーキテクチャ図を作成してください。
ユーザサーバ、アプリケーションサーバ、データベースサーバを矩形で表現し、矢印で接続関係を示してください。
 
==== マイクロサービス図の作成 ====
# プロンプト例 :

@Draw.io MCP Server マイクロサービスのシステムアーキテクチャを描画してください。
各サービスを異なる色の矩形で表現し、それぞれの通信プロトコルをラベル付きの矢印で示してください。
 
==== スタイル指定を含む作成 ====
# プロンプト例 :

@Draw.io MCP Server ネットワーク図を作成してください。
ルータ、スイッチ、サーバを適切なアイコンで表現し、VLANごとに異なる背景色を使用してください。
 
==== 複数ページのダイアグラム ====
# プロンプト例 :

@Draw.io MCP Server システム設計書を作成してください。
ページ1に概要図、ページ2に詳細アーキテクチャ、ページ3にデータフロー図を配置してください。
 

== システムアーキテクチャ ==
Draw.io MCP Serverは、3層アーキテクチャで構成されている。 
 
==== アーキテクチャ概要 ====
コンポーネント構成 
* MCPクライアント層
*: Claude Desktop、oterm、Zed 等
* Draw.io MCP Server層
*: Node.jsベースのTypeScript実装
* ブラウザ拡張機能層
*: Draw.io MCP Extension (Chrome / Firefox)
* Draw.io層
*: app.diagrams.net のWebアプリケーション
 
通信フロー 
# Claude DesktopからDraw.io MCP Serverにツール呼び出しを送信する。
# Draw.io MCP ServerがWebSocket (ポート3333) 経由でブラウザ拡張機能に接続する。
# ブラウザ拡張機能がDraw.io APIを使用してダイアグラムを操作する。
# 結果がサーバ経由でClaudeに返却される。
 
データフロー 
# プロンプトを入力する。(Claude Desktop)
# MCPツールを呼び出す。(Claude → Draw.io MCP Server)
# WebSocket通信を開始する。(Draw.io MCP Server → ブラウザ拡張機能)
# ダイアグラム操作 (ブラウザ拡張機能 → Draw.io)
# 結果が返却 (逆方向)
 

== トラブルシューティング ==
==== サーバに接続できない ====
以下の項目を確認する。 
* ブラウザ拡張機能がインストールされているか確認
*: Chrome Web StoreまたはFirefox Add-onsから正しくインストールされていることを確認
* ブラウザ拡張機能がアクティブであるか確認
*: 拡張機能のアイコンが表示され、有効化されていることを確認
* Claude Desktopが再起動されているか確認
*: 設定ファイル編集後、必ずClaude Desktopを再起動する
* デフォルトポート3333が使用可能か確認
*: 他のアプリケーションがポート3333を使用していないか確認
*: ファイアウォールでポート3333が開放されているか確認
 
==== ダイアグラムが更新されない ====
以下の項目を確認する。 
* app.diagrams.netがブラウザで開かれているか確認
*: ブラウザで app.diagrams.net が開かれていることが必須
* WebSocket接続が確立されているか確認
*: ブラウザの開発者ツールでWebSocket接続状態を確認
* ペイロードサイズを確認
*: 大規模なダイアグラム操作の場合、処理に時間がかかる可能性がある
 
==== ツール呼び出しエラーが発生する ====
以下の項目を確認する。 
* Node.jsのバージョンの確認
*: Node.js 20以上がインストールされていることを確認する。
*: <code>node --version</code> コマンドでバージョンを確認する。
* MCP Server設定ファイルの確認
*: claude_desktop_config.jsonファイルの設定が正しいかどうかを確認する。
*: JSON形式のエラーがないかどうかを確認する。
* サーバログの確認
*: Claude Desktopのデバッグコンソールでエラーログを確認する。
*: View > Toggle Developer Tools でコンソールを開く。
 
==== Firefox拡張機能が動作しない ====
以下の項目を確認する。 
* 拡張機能のバージョンの確認
*: バージョン1.3.0以降を使用していることを確認する。
* 拡張機能の権限の確認
*: app.diagrams.net へのアクセス権限が付与されているか確認する。
 

== Draw.io MCP Extension ==
==== ブラウザ拡張機能の役割 ====
Draw.io MCP Extensionは、Draw.io MCP ServerとDraw.io間の橋渡しを行うコンポーネントである。 
 
主要機能は以下の通りである。 
* WebSocket経由でDraw.io MCP Serverと通信
* Draw.io APIを使用してダイアグラムを操作
* セル選択、シェイプ追加、エッジ追加、セル削除等の操作を実行
* ダイアグラムの状態をサーバに返却
 
==== 拡張機能のインストール場所 ====
* Google Chrome
** Chrome Web Store から「Draw.io MCP Extension」を検索してインストール
** URL: chrome.google.com/webstore (検索キーワード: Draw.io MCP Extension)
*: 
* Mozilla Firefox
** Firefox Add-onsから Draw.io MCP Extension を検索してインストール
** URL: addons.mozilla.org (検索キーワード: Draw.io MCP Extension)
 

== 関連リソース ==
* [https://github.com/lgazo/drawio-mcp-server Draw.io MCP ServerのGitHub]
* [https://glama.ai/mcp/servers/@lgazo/drawio-mcp-server Draw.io MCP Server on GLAMA]
* [https://modelcontextprotocol.io/ Model Context Protocol公式サイト]
* [https://app.diagrams.net/ Draw.io公式サイト]
 

{{#seo:
|title={{PAGENAME}} : Draw.io MCP Server | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,MCP,Model Context Protocol,Draw.io,Diagram,Flowchart,Architecture,UML,Sequence Diagram,Network Diagram,Claude,AI,Machine Learning,Node.js,TypeScript,Browser Extension,WebSocket,Visualization
|description={{PAGENAME}} - Draw.io MCP Serverに関する包括的なガイド、AIアシスタントによるダイアグラム作成と編集の自動化 | This page is {{PAGENAME}} in our wiki about Draw.io MCP servers and AI-powered diagram creation
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:設定]]