TL;DR
- Googleスライドには矢印を「流す」アニメーションがなく、API でもアニメーションは設定できないので、動く矢印は透過GIFを貼るのが唯一の現実解
- それをブラウザで作れるツール FlowArrow を作っていたが、AIエージェントにスライド資料を作らせる時代に「人間がWebUIをポチポチする工程」だけが取り残されることに気づいた
- そこで描画エンジンを Node に移植して CLI + MCPサーバー として npm 公開した。
claude mcp add flowarrow -- npx flowarrow mcpするだけで、Claude がcreate_flow_arrowなどのツールでスライド用素材GIFを直接生成できる
# インストール不要で試せます
npx flowarrow --preset m --color "#5f6368" --out arrow.gif
背景: Googleスライドで矢印は「流れない」
スライドで処理フローを説明するとき、「データがこう流れる」感を出したくて矢印を動かしたくなります。PowerPoint なら「ワイプ」やモーションパスで実現できますが、Googleスライドのアニメーションは Appear / Fade / Fly in 系のみ。しかも Google Slides API はアニメーション設定に対応していないため、アドオンで後付けもできません。
現実解は「動くGIFを作って画像として貼る」です。GIFなら編集中も発表中もループ再生されます。これをブラウザだけで作れるようにしたのが FlowArrow で、パスをクリックで描いて透過GIFを書き出せます(詳しくは前回の記事で書きました)。
なぜMCP化したか
最近はスライド資料自体を AI に作らせることが増えました(python-pptx、Marp、Google Slides API…)。ただ、AIが作る資料は基本的に静的です。「ここに流れる矢印を置きたい」となった瞬間、人間がWebUIを開いてGIFを作ってダウンロードして…という手作業が挟まります。
ツールの本体は Canvas 2D の描画ロジックで、UIは薄い皮です。ならばエンジンをヘッドレスで動かして MCP (Model Context Protocol) のツールとして生やせば、エージェントが資料生成の流れの中で素材GIFまで自給できるはず — というのが動機です。
使い方
CLI として
# 矢印(プリセット: straight / hook / m / s)
npx flowarrow --preset m --color "#5f6368" --out arrow.gif
# パスを自分で指定(900x470の論理座標)・線が伸びていく描画モード
npx flowarrow arrow --points "80,235 450,120 820,350" --mode draw --space 0
# ローディングスピナー(arc / dots / bars)
npx flowarrow spinner --style dots --color "#4f8cff" --size 200
# 丸で囲む・下線・マーカーの強調アニメ
npx flowarrow highlight --style circle --color "#e5484d" --width 800 --height 400
ポイントは --matte オプションです。GIFの透明は2値(半透明がない)ので、アンチエイリアスのフチを「何色に馴染ませるか」を決める必要があります。貼り先スライドの背景色を --matte "#202124" のように渡すと、その色がGIFの透明色になりフチが目立ちません。これはWeb版と同じ仕様です。
MCPサーバーとして
Claude Code なら1コマンドで登録できます:
claude mcp add flowarrow -- npx flowarrow mcp
汎用のMCPクライアント設定(stdio)なら:
{ "mcpServers": { "flowarrow": { "command": "npx", "args": ["flowarrow", "mcp"] } } }
これで次の3ツールが生えます。
| ツール | 生成物 |
|---|---|
create_flow_arrow |
パスに沿って破線/≫が流れる矢印GIF(パス座標・色・太さ・速さ指定可) |
create_spinner |
くるくる回るローディングGIF(円弧/ドット/バー) |
create_highlight |
手書き風の「赤ペンで丸く囲む」「下線」「マーカー」GIF |
あとは Claude に「アーキテクチャ図のスライドに、左から右に流れるグレーの矢印GIFを作って assets/ に置いて」と言うだけで、エージェントがツールを呼んでGIFを配置してくれます。座標指定もエージェント側がスキーマの説明(900×470論理キャンバス、最後の点が矢じり)を読んで組み立ててくれます。
実装メモ
ブラウザCanvas → node-canvas の移植
描画エンジン(Catmull-Rom スプライン補間 → 弧長パラメータ化 → 破線/シェブロンの等間隔配置)は純粋な Canvas 2D ロジックだったので、node-canvas にそのまま載りました。requestAnimationFrame のプレビュー部分だけ捨てて、「ループ割合 u ∈ [0,1) を受け取って1フレーム描く」純関数として切り出したのが効いています。ループ1周分を u = f/frames で回せば、Web版と完全に同じシームレスループGIFになります。
GIFエンコードと透過
Web版は gif.js(Web Worker 前提)を使っていましたが、Node側は gifenc にしました。フレームごとに:
- matte色で塗りつぶし → 上に図形を描画
-
quantize()で256色パレット化 - パレット中で matte色に最も近いインデックスを透明インデックスに指定
とすることで、Web版と同じ「matte色が透明になる」挙動を再現しています。
MCPサーバー部分
@modelcontextprotocol/sdk の McpServer + StdioServerTransport で、ツール定義は zod スキーマを渡すだけです。コアが「設定オブジェクト → GIFバッファ」の関数になっていれば、CLIとMCPは同じ関数を呼ぶ薄いアダプタで済みます。スキーマの describe() にドメイン知識(「matteは貼り先の背景色に合わせる」など)を書いておくと、エージェントが適切な引数を選んでくれるようになります。
まとめ
- Googleスライドの「動く矢印」問題は透過GIFで解決でき、FlowArrow はそれをWebでもCLIでもMCPでも作れるようになった
- UIが薄くコアが純関数のツールは、MCP化のコストが驚くほど低い(今回の本体差分は実質4ファイル)
- 「AIに資料を作らせるときに人間の手作業が挟まる箇所」は、MCPツールの良い狙い目だと思います
リンク:
- Web版: https://flow-arrow.com/
- npm: https://www.npmjs.com/package/flowarrow
- リポジトリ: https://github.com/yutoAb/flowarrow
フィードバック歓迎です!