tldraw-skill は何をしますか?
自然言語からホワイトボード図(.tldr)を作成。6種類のプリセットとビジョンベースの自己チェック機能を搭載。PNG/SVGエクスポート、マルチエージェント対応。
機能概要
- 自然言語からの図生成: ユーザーが説明した内容から、AIが自動的にtldraw図を作成します。
- 6種類のプリセット: フローチャート、ネットワーク図、マインドマップ、シーケンス図、アーキテクチャ図、ER図など。
- ビジョンベースの自己チェック: 生成された画像をビジョンモデルで解析し、内容が正しいか自動検証します。
- エクスポート: PNGおよびSVG形式で図をエクスポート可能。
- マルチエージェント対応: 複数のAIエージェントが協調して図の作成や編集を行えます。
使用方法
- スキルを有効化します(例:
agents skill enable Agents365-ai/tldraw-skill)。 - 自然言語で図の内容を説明します(例:「顧客登録フローのフローチャートを作成して」)。
- AIが自動的に図を生成し、自己チェックを実行します。
- 必要に応じてエクスポート(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