mcpField
M
miro-mcp

miro-mcp

github.com/miroapp生産性164235 回インストール6 週間前に更新
リポジトリ

miro-mcp について

miro-mcpは、Claude CodeでMiroボードのコンテンツを作成、読み取り、編集する方法を説明します。図、ドキュメント、テーブルの操作や、ボード項目からの構造化コンテキスト抽出を扱います。

主な機能

  1. 01テキストやMermaidからの図の作成
  2. 02ボード上のドキュメントの作成と編集
  3. 03テーブルの作成、同期、フィルタリング
  4. 04ボード内容の探索とコンテキスト抽出
  5. 05画像データとダウンロードURLの取得

活用シーン

  1. 01プロセスやコンポーネント構成の図示
  2. 02指定したボード項目の詳細情報の抽出
  3. 03構造化テーブルの読み取りと更新

MCP 対応

Miro MCPにより、ClaudeはMiroボードを操作できます。記載されたツールは、図、ドキュメント、テーブル、画像などの作成と読み取りに対応します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/miroapp/miro-ai --skill miro-mcp

インストール後、Claude Code で/miro-mcpを入力して読み込まれたか確認します。

詳細

Claude Code で Miro を使用する

Miro MCP とは？

Miro MCP（Model Context Protocol）を使うと、Claude が Miro ボードと直接やり取りできます。図、ドキュメント、テーブルを作成したり、ボードの内容を読み取ったり、ビジュアルデザインから構造化されたドキュメントを抽出したりできます。

利用可能なツール

コンテンツの作成
  • diagram_get_dsl - 図を作成する前に DSL 形式の仕様を取得します
  • diagram_create - DSL テキストの説明から図を生成します
  • doc_create - ボード上に Markdown ドキュメントを作成します
  • table_create - テキスト列と選択列を含むテーブルを作成します
  • table_sync_rows - テーブルの行を追加または更新します
コンテンツの読み取り
  • board_list_items - 種類またはコンテナーで絞り込んで、ボード上のアイテムを一覧表示します
  • context_explore - ボードの概要（フレーム、ドキュメント、プロトタイプ、テーブル、図）を確認します
  • context_get - ボード上の指定したアイテムから詳細なテキストコンテキストを抽出します
  • table_list_rows - 列を基準に絞り込んでテーブルデータを読み取ります
  • image_get_data - ボードから画像の内容を取得します
  • image_get_url - 画像のダウンロード URL を取得します
ドキュメントの編集
  • doc_get - ドキュメントの内容とバージョンを読み取ります
  • doc_update - 検索と置換を使ってドキュメントを編集します

ボードの URL と ID

Miro ツールはボードの URL を直接受け付けます。次のような URL から board_id と item_id が自動的に抽出されます。

  • https://miro.com/app/board/uXjVK123abc=/ - ボード URL
  • https://miro.com/app/board/uXjVK123abc=/?moveToWidget=3458764612345 - アイテムにフォーカスした URL

URL に moveToWidget または focusWidget パラメーターが含まれている場合、item_id が自動的に抽出されます。

図の作成

diagram_create を使うと、テキストの説明からビジュアル図を作成できます。

対応する図の種類
  • flowchart - プロセスフロー、ワークフロー、決定木
  • mindmap - 階層的なアイデア、ブレインストーミング
  • uml_class - クラス構造、継承関係
  • uml_sequence - 時系列でのコンポーネント間のやり取り
  • entity_relationship - データベーススキーマ、データモデル
説明の形式

自然言語で適切に指定できます。

User registration flow: start -> enter email -> validate email ->
send verification -> user confirms -> create account -> redirect to dashboard

正確に制御するには、Mermaid 記法を使用します。

flowchart TD
    A[Start] --> B{Valid Email?}
    B -->|Yes| C[Send Verification]
    B -->|No| D[Show Error]
    C --> E[Wait for Confirm]
    E --> F[Create Account]
ボード上のアイテムの配置

ボードの座標は、中心を (0, 0) とする直交座標系を使用します。X の正の方向は右、Y の正の方向は下です。

間隔の推奨値：

  • 図：2000～3000 単位
  • ドキュメント：500～1000 単位
  • テーブル：1500～2000 単位
フレーム内への配置

parent_id にフレーム ID を設定すると、コンテンツをそのフレーム内に配置できます。

ドキュメントの作成

doc_create を使うと、ボード上に Google Docs 形式のドキュメントを作成できます。

対応する Markdown
  • 見出し：# H1 から ###### H6
  • 太字：**text**
  • 斜体：*text*
  • 順序なしリスト：- item
  • 順序付きリスト：1. item
  • リンク：[text](url)
ドキュメントの例
# Sprint Planning - Week 12

## Goals
- Complete user authentication module
- Fix critical bugs from QA

## Team Assignments
1. **Alice** - Auth backend
2. **Bob** - Frontend integration
3. **Carol** - Bug fixes

## Resources
- [Design specs](https://example.com/specs)
- [API documentation](https://example.com/api)

テーブルの操作

テーブルの作成

table_create を使うと、型を指定した列を含むテーブルを作成できます。列の種類は、自由に入力できる text と、あらかじめ定義された色分けされた選択肢を持つドロップダウンの select の 2 種類に対応しています。

行の追加と更新

table_sync_rows を使うと、テーブルデータを追加または更新できます。既存の行と照合してアップサートを行うには、key_column を設定します。一致する行は更新され、一致しない行は新しい行として追加されます。

テーブルデータの読み取り

table_list_rows を使うと、テーブルの内容を読み取れます。ColumnName=Value 形式で列の値を指定して絞り込みます。

ボードコンテンツの抽出

ボードの内容を確認する

context_explore を使うと、ボード上の内容の概要を取得できます。URL とタイトルを含むフレーム、ドキュメント、プロトタイプ、テーブル、図が返されます。

アイテムの詳細を取得する

特定のアイテムから詳細な内容を抽出するには、context_get を使用します。

アイテムの種類取得内容
ドキュメントドキュメントの内容を表す HTML マークアップ
プロトタイプの画面UI／レイアウトを表す HTML マークアップ
プロトタイプのコンテナーナビゲーションフローを含む、すべての画面の AI 生成マップ
フレームフレームの内容に関する AI 生成の要約
テーブル書式設定されたテーブルデータ
図表AI 生成の説明と分析
ワークフロー
  1. context_explore を呼び出してボードの内容を見つけます
  2. 結果から対象のアイテムを特定します
  3. 特定のアイテム URL を指定して context_get を呼び出します（moveToWidget パラメーターを使用）

ボードアイテムを閲覧する

board_list_items を使用してボードの内容を確認します。アイテムの種類（frame、sticky_note、card、shape、text、image、document、embed）またはコンテナーで絞り込み、特定のフレーム内のアイテムを一覧表示できます。

ベストプラクティス

図表の場合
  • 要素と関係を具体的に指定します
  • フローの方向（上から下、左から右）を指定します
  • 判断ポイントと条件を含めます
  • AI に図表の種類を自動検出させるか、明示的に指定します
ドキュメントの場合
  • 明確な見出しで構成します
  • 内容を絞り、ざっと確認しやすくします
  • 複数のアイテムにはリストを使用します
  • 関連するリソースへのリンクを含めます
テーブルの場合
  • 意味のある列名を選びます
  • ステータス／優先度のフィールドには選択列を使用します
  • 明確で区別しやすいオプションの色を定義します
  • 冪等な更新には key_column を使用します
コンテキストの抽出の場合
  • context_explore から始めてボードの内容を見つけます
  • ボードが大きい場合は、特定のフレームに絞ります
  • 詳細な内容を取得するには、アイテム URL を指定して context_get を使用します

クイックリファレンス

タスクツール
図表 DSL 仕様を取得diagram_get_dsl
図表を作成diagram_create
ドキュメントを作成doc_create
ドキュメントを読むdoc_get
ドキュメントを編集doc_update
テーブルを作成table_create
テーブルの行を追加／更新table_sync_rows
テーブルデータを読むtable_list_rows
ボードの内容を見つけるcontext_explore
アイテムの詳細を抽出context_get
ボードアイテムを一覧表示board_list_items
画像データを取得image_get_data
画像 URL を取得image_get_url

コメント

Markdown 対応