Cursorにチャートが出る時代 — Canvas機能で「コードの向こう側」が見えるようになった

コードエディタにチャートが出る。しかもAIエージェントが自分で作ったチャートだ。

4月15日、CursorがCanvas機能をリリースした。エージェントに質問すると、テキストで返す代わりにReactベースのインタラクティブなUIを生成してくれる。テーブル、チャート、図表、ダッシュボード。チャット欄にMarkdownが流れてくるのではなく、操作できるビジュアルが返ってくる。

テキストの壁から、触れる画面へ

これまでCursorのエージェントに「このリポジトリのアーキテクチャを教えて」と聞くと、数百行のMarkdownが返ってきた。読めるけど、全体像は見えにくい。Canvasでは代わりに、コンポーネントの依存関係をインタラクティブなダイアグラムで表示する。ノードをクリックすれば詳細が展開されるし、ズームやパンもできる。

使い方は/canvasスラッシュコマンドか、チャットで「visualize」「diagram」のような意図を含めるだけ。エージェントがCanvasで応答すべきかどうかを自動で判断する。

描画にはCursor独自のReact UIライブラリが使われており、ファーストパーティのコンポーネント（テーブル、ボックス、チャート、ダイアグラム）が揃っている。外部のチャートライブラリを読み込むのではなく、エディタ内でネイティブにレンダリングされるため、表示は高速だ。

どこで使うと効くのか

Canvasが真価を発揮するのは、データの構造や関係性を把握したい場面だ。

PRレビューの可視化がわかりやすい例だ。差分の行数だけ見てもレビューの優先度は判断しにくいが、Canvasを使うと変更ファイル間の依存関係やテストカバレッジの分布を一枚の図に落とし込める。レビュアーが「このPRでどこが本質的に変わったのか」を3秒で掴める。

デバッグ中のデータ結合も面白い。ローカルのログファイル、APIレスポンス、データベースのクエリ結果を横断的にチャートに落とし、タイムライン上で並べてボトルネックを視覚的に特定する。ターミナルの出力をスクロールして目視で追っていた作業が、一画面のダッシュボードに集約される。

リポジトリのオンボーディングにも使える。新しいプロジェクトに入ったとき、「このリポジトリの構造を図にして」と言えば、ディレクトリ構造、主要モジュールの関係、データフローが可視化される。READMEを読む前に全体像が掴める。

Agents Windowとの統合

CanvasはCursor 3のAgents Windowのサイドパネルに常駐する。ターミナル、ブラウザプレビュー、ソースコントロールと並んで、可視化が「永続的なアーティファクト」として残る。チャットが流れても、Canvasで作った図は消えない。

複数エージェントを並列実行しているとき、各エージェントの進捗をCanvasで可視化しながら監視するという使い方もできる。仮説検証を繰り返すようなリサーチタスクでは、エージェントが「いま何を試していて、何がわかったか」をリアルタイムでチャートに反映してくれる。

正直、何が変わるのか

Canvasは「便利な機能が1つ増えた」というより、コードエディタの出力モダリティが変わったことを意味する。AIエージェントのレスポンスがテキストに限定されなくなった。図表で返せるようになった。この差は、使ってみると思った以上に大きい。

Markdownの箇条書きで返ってくる情報と、インタラクティブなダイアグラムで返ってくる情報では、脳の処理速度が違う。特に「全体像の把握」と「異常値の検出」は、テキストよりビジュアルの方が圧倒的に速い。

一方で、Canvasが常に最適解というわけではない。単純なコード修正の指示や、短い質問への回答にCanvasを挟むと、むしろ情報が見えにくくなる。エージェントの自動判断が適切に働くかどうかは、もう少し使い込んでみないとわからない。

CursorのProプランは月額20ドル（約3,000円）。Canvas機能は追加料金なしで利用可能。Cursor 3.1以降のバージョンで使える。