Installation

There are several ways to use TDL depending on your workflow.

Web Editor (Quickest Start)

No installation required. Just open:

architoon.xyz/editor

Features:

• Live preview as you type

• Export to PNG/SVG

• Save diagrams to your account

• Dark/light theme

VS Code Extension ( coming soon )

For developers who want TDL integrated into their IDE.

Install

1. Open VS Code

2. Go to Extensions (Cmd+Shift+X / Ctrl+Shift+X)

3. Search for "ArchiToon"

4. Click Install

Features

• Syntax highlighting for .tdl files

• Live preview panel

• Export to PNG/SVG

• Markdown preview integration

MCP Server (AI Integration)

For Claude Code and other AI assistants that support MCP.

Setup

Add to your Claude Code MCP settings:

{
  "mcpServers": {
    "tdl": {
      "command": "npx",
      "args": ["-y", "@tdl/mcp"]
    }
  }
}

Available Tools

• render_tdl - Render TDL to ASCII

• render_tdl_svg - Render TDL to SVG

• render_tdl_file - Render a .tdl file to ASCII

• render_tdl_file_svg - Render a .tdl file to SVG

Next Steps

• Your First Diagram - Create your first TDL diagram

• Editor Features - Learn the editor tools