同じプロンプト、同じ図面

Prateek Rai氏は、Claude CodeやCursorといったローカルAIアシスタントが、オフラインのtldrawデスクトップアプリを操作し、常に同一のエンジニアリング図面を作成できるようにする19種類の「エージェント・スキル（Agent Skills）」のコレクション、tldraw-canvas-kitをリリースしました。このキットは、クラウド接続やテレメトリを一切必要としないため、チームは視覚的な資産を完全にオンプレミスで保持できます。

なぜローカルで決定論的な図面ツールが重要なのか

エンジニアリングチームは、スライドデッキ、ドキュメントサイト、デザインツールの間で、フローチャート、クラス図、アーキテクチャマップを移動させるために膨大な時間を費やしています。コピー＆ペーストのステップごとに、線のスタイルの変化、IDの再生成、レイアウトのずれといった微妙な変化が生じます。LLMによって図面が再生成されると、たとえテキストプロンプトが同じであっても、結果として配置が変わってしまうことがよくあります。監査に対応可能なドキュメントや、再現可能な設計成果物を必要とする組織にとって、この変動性はリスクとなります。

Prateek氏は、2つのペインポイントを解決するためにtldraw-canvas-kitを構築しました。(1) ユーザーのローカルマシン上で完全に動作するツールであること、そして (2) 同じプロンプトから同じ図面が生成されるという保証です。AIエージェントが呼び出せるローカルHTTP APIを公開することで、このキットはネットワーク遅延、データ流出のリスク、およびSaaSサブスクリプションの必要性を排除します。

キットの仕組み

  • オフライン・コア – tldrawデスクトップアプリは、JSONエンコードされたコマンドを受け付けるローカルサーバーを実行します。外部への呼び出しは行われず、使用データがマシンから外部へ送信されることもありません。
  • エージェント・スキル – 各スキルは、レイアウト計算、ステンシル選択、安定したIDといった固定された構造仕様をエンコードしています。エージェントがスキルを呼び出すと、決定論的な一連の描画指示を受け取ります。
  • べき等な更新（Idempotent updates） – スキルが既存の図面に対して実行される場合、図形をその場で更新し、不要な要素を削除し、エッジを再配置します。その結果、重複するオブジェクトを蓄積することなく、キャンバスをリフレッシュできます。
  • ファイル形式 – 図面はプレーンな*.tldraw*ファイルとして保存されます。レイアウトロジックがファイル内に含まれているため、デッキを共有すれば、そのビューを再現するために必要なナビゲーションルールも自動的に含まれます。

このキットは、シーケンス図やフローチャートから、ER図、ステートマシン、スイムレーン、ユースケース図、コンポーネント図、パッケージ図、デプロイメント図、アーキテクチャ図、マインドマップ、コードベースマップに至るまで、13の図面カテゴリをサポートしています。ユーザーは望む図面を説明するだけで、スキルが背後の構造を処理します。

開発中に得られた教訓

  1. 矢印のスタイルがデフォルトで手書き風になる – きれいな直線が要求された場合でも、APIは当初、スケッチスタイルの矢印を作成してしまいます。スタイルを切り替えるために、スキルは追跡コマンドを発行する必要があります。
  2. 矢印が図形と重なってもエラーにならない – コネクタがノードを通過しても、APIはエラーを出しません。このような衝突を検知するには、生成されたスクリーンショットを目視で確認する必要があります。
  3. 短い矢印でエッジラベルの折り返しが崩れる – コネクタが短すぎるとラベルの折り返しがうまくいかないことがあるため、スキルは最小の長さを強制するか、ラベルの配置を調整する必要があります。

これらの癖は、スキルがAPIに関する想定ではなく、APIの実際の挙動に基づいて構築された理由を示しています。

キットのインストールと使用方法

npx skills add prateek11rai/tldraw-canvas-kit

このコマンドはmacOSとLinuxで動作します。インストール後、同じワークステーション上のAIエージェントは、ローカルドキュメントを照会し、コードを生成し、実行中のtldrawサーバーに描画コマンドを送信できます。その結果、ホスト環境から離れることなく、さらに編集したりプレゼンテーションにエクスポートしたりできる、再現可能な図面が得られます。

メリットを受ける対象とトレードオフ

  • セキュリティ重視のチーム – 厳格なデータ取り扱いポリシーを持つ企業は、すべての設計成果物をファイアウォールの背後に保持できます。
  • ドキュメンテーション・エンジニア – バージョン管理されたリポジトリに図面を埋め込む必要がある人は、決定論的な「信頼できる唯一の情報源（source of truth）」を得られます。
  • 個人の開発者 – LLMを実行するたびに手動でレイアウトを微調整することに疲れた開発者は、プロセスを自動化できます。

主な制限は、ローカルで実行されているtldrawインスタンスに依存していることです。すでにクラウドベースの図面サービスに依存している組織は、デスクトップアプリを採用し、ワークフローを調整する必要があります。さらに、現在のスキルセットはカスタムステンシルライブラリをカバーしていないため、ユーザーは定義済みの図形内で作業する必要があります。

次のステップ

Prateekは、コミュニティのフィードバックに基づいてスキルライブラリを拡張し、Windowsへの対応を追加することで、潜在的なユーザー層を拡大することを計画しています。また、サードパーティ製のエージェントがこのキットを統合し、同じ決定論的なコアを共有する、特化したダイアグラム生成ツールのマーケットプレイスが形成されることも期待しています。

まとめ

tldraw-canvas-kitは、AIによるダイアグラム作成が、必ずしもクラウド限定の確率的なプロセスである必要はないことを証明しています。描画ロジックをローカルAPIに固定し、安定した識別子を強制することで、プライバシーや制御を犠牲にすることなく、エンジニアが再現可能で監査に耐えうるビジュアルを生成することを可能にします。