Tldraw Agent

🚀 🎨 tldraw-agent

テキストから図を生成します。どこでも動作します。

npx tldraw-agent draw "User → API → Database"

🚀 クイックスタート

このセクションでは、tldraw-agentの基本的な使い方を説明します。

インストール

npm install -g @joelhooks/tldraw-agent

使用例

💻 基本的な使用法

CLIを使用した基本的な使い方を紹介します。

tldraw-agent draw "microservices architecture with load balancer"
tldraw-agent draw "signup flow" --format svg -o signup.svg

高度な使用法

ライブラリとして使用する場合の例です。

import { TldrawAgent } from '@joelhooks/tldraw-agent'

const agent = new TldrawAgent()
const { path } = await agent.draw({ prompt: 'system diagram' })

MCPの使用例

{
  "mcpServers": {
    "tldraw": { "command": "npx", "args": ["@joelhooks/tldraw-agent", "--mcp"] }
  }
}

✨ 主な機能

• 🖼️ PNG/SVG形式でのエクスポートが可能です。
• 🤖 LLM（Claude、GPT）によるレイアウト機能があります。
• 📐 アーキテクチャ、フローチャート、エンティティ図などを生成できます。
• 🔌 CLI、ライブラリ、MCPツール、またはエージェントスキルとして使用できます。

🔧 環境設定

export AI_GATEWAY_API_KEY=...  # Vercel/Cloudflare AI Gatewayのキー

📄 ライセンス

MITライセンスの下で提供されています。