Communityコーディング&開発github.com

Agents365-ai/tldraw-skill

自然言語からホワイトボード図(.tldr)を作成し、6種類のプリセットとビジョンベースの自己チェック機能を備えたスキル。PNG/SVGエクスポート、マルチエージェント対応。

tldraw-skill とは?

このスキルは、AIエージェント(例:Claude Code, Cursor, Codex)が自然言語の説明からtldraw形式(.tldr)のホワイトボード図を作成できるようにするものです。6つのプリセット(フローチャート、ネットワーク図、マインドマップなど)を利用でき、生成後にビジョンモデルを用いて図の正確性を自己チェックします。PNGやSVG形式でのエクスポートに対応し、マルチエージェント環境での協調動作も可能で、ソフトウェア設計やドキュメンテーションを効率化します。これにより、開発者は要件を話すだけで視覚的なダイアグラムを迅速に生成し、品質を保証できます。

対応~Claude Code~Codex CLI~Cursor
npx skills add Agents365-ai/tldraw-skill

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

tldraw-skill は何をしますか?

自然言語からホワイトボード図(.tldr)を作成。6種類のプリセットとビジョンベースの自己チェック機能を搭載。PNG/SVGエクスポート、マルチエージェント対応。

機能概要

  • 自然言語からの図生成: ユーザーが説明した内容から、AIが自動的にtldraw図を作成します。
  • 6種類のプリセット: フローチャート、ネットワーク図、マインドマップ、シーケンス図、アーキテクチャ図、ER図など。
  • ビジョンベースの自己チェック: 生成された画像をビジョンモデルで解析し、内容が正しいか自動検証します。
  • エクスポート: PNGおよびSVG形式で図をエクスポート可能。
  • マルチエージェント対応: 複数のAIエージェントが協調して図の作成や編集を行えます。

使用方法

  1. スキルを有効化します(例:agents skill enable Agents365-ai/tldraw-skill)。
  2. 自然言語で図の内容を説明します(例:「顧客登録フローのフローチャートを作成して」)。
  3. AIが自動的に図を生成し、自己チェックを実行します。
  4. 必要に応じてエクスポート(PNG/SVG)します。

対応プラットフォーム

  • Claude Code
  • Cursor
  • Codex(その他、スキル対応のAIエージェント)

インストール

# スキルをインストール
git clone https://github.com/Agents365-ai/tldraw-skill.git
cd tldraw-skill
# 必要な依存関係をインストール
npm install

設定

環境変数または設定ファイルで以下のオプションを指定できます。

設定項目説明デフォルト値
DIAGRAM_PRESET使用するプリセットflowchart
EXPORT_FORMATエクスポート形式(png/svg)png
VISION_CHECK_ENABLEDビジョンチェックの有効化true

例

ユーザー: 「マインドマップで、新しいプロジェクトの計画を書いて。中心は「新製品開発」、ブランチは「要件」「設計」「テスト」「リリース」」
AI: (図を生成し、自己チェック後に表示)

貢献

バグ報告や機能リクエストはGitHub Issuesまで。

ライセンス

MIT

関連スキル