Miro
クラウド型インタラクティブホワイトボードツール。リアルタイム共同編集・付箋・図形・フレームなどを備え、業務フロー・ブレインストーミング・プロジェクト計画書の作成に幅広く使われる。
AI業務フロー自動生成との連携
すぅ AI駆動PM が開発した 「AI業務フロー to Miro」スキル により、ヒアリング議事録などのテキストを入力するだけで、スイムレーン付き業務フローをMiroボード上に自動生成できる。
なぜ FigJam ではなく Miro か
FigJamとAIの相性がなかなか良くなくて、うまくいきませんでした。一方、Miroは細かいところの設定まで全部できる点が優れていた。 — すぅ AI駆動PM
FigJamはAIとの連携（API制御）が難しく、MiroはREST API v2で細部まで制御できるため、AI自動生成の出力先として優れている。
Miro REST API v2
AI連携で使用する主なエンドポイント：
| エンドポイント | 用途 |
|---|---|
/frames | スイムレーン（フレーム）の作成 |
/shapes | ノード（タスク・判断・開始・終了）の作成 |
/texts | テキストラベルの作成 |
/connectors | 矢印・コネクタの接続 |
環境変数
MIRO_TOKEN # MiroのAPIトークン
MIRO_BOARD_ID # 対象ボードのID
呼び出し方式
curl を使用。Claude Code Skillsから直接呼び出せる。
スキルによる自動生成の仕様
Claude Code Skills として実装された業務フロー生成スキルの設計上の制約と仕様：
ノードの種類と色
| ノード種別 | 形状 | 色コード |
|---|---|---|
| 開始 | 緑丸 | #D5F5E3 |
| 終了 | グレー丸 | #D5D8DC |
| タスク | 白四角 | #FFFFFF |
| 判断 | 黄ひし形（rhombus） | #FEF9E7 |
| システム | 薄青角丸 | #EBF5FB |
| データソース | 薄紫角丸 | #F5EEF8 |
| ドキュメント | 薄緑角丸 | #E8F8F5 |
| 差戻し | 赤四角 | #FADBD8 |
座標計算ルール
- ノード間空白: 50-60px 確保
- タスク間距離: 200px
- 判断→差戻し距離: 250px
- スイムレーン高さ: 250px 固定
- スイムレーン幅:
最右X - 最左X + 500px - 複数業務フロー間の見出しY:
前業務の最終レーンY + 125 + 200
接続点ルール
- 各ノードの接続点（top/bottom/left/right）に最大 1本 のコネクタのみ接続
- コネクタ作成前に「接続計画」を明確化する
コネクタ仕様
- 矢印スタイル:
endStrokeCap: stealth（常に必須）
draw.io との比較
draw.io（旧バージョン）と比較したMiroの優位性：
| 観点 | draw.io | Miro |
|---|---|---|
| 出力品質 | 不安定（ガチャ的） | 高精度・安定 |
| 納品可能性 | 叩き台のみ | そのまま顧客共有可能なレベル |
| 表現力 | 基本フロー | タイムライン・システム・ドキュメントも表現 |
| API制御性 | 限定的 | 細部まで制御可能 |