Tldraw Agent

🚀 tldraw-agent

Generate diagrams from text, and it can work anywhere.

🚀 Quick Start

You can generate a diagram with the following command:

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

📦 Installation

You can install the tldraw-agent globally using the following command:

npm install -g @joelhooks/tldraw-agent

💻 Usage Examples

Basic Usage

CLI

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

Library

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"] }
  }
}

Advanced Usage

You need to set up the environment variable to use the AI Gateway:

export AI_GATEWAY_API_KEY=...  # Vercel/Cloudflare AI Gateway key

✨ Features

• 🖼️ Export diagrams in PNG or SVG format.
• 🤖 Use LLM (Claude, GPT) for layout generation.
• 📐 Support various types of diagrams, such as architecture, flowcharts, and entity diagrams.
• 🔌 Can be used as a CLI tool, a library, an MCP tool, or an agent skill.

📄 License

This project is licensed under the MIT license.