Editor Features

Both the web editor and VS Code extension offer powerful features for working with TDL.

Live Preview

As you type, your diagram updates in real-time.

Preview Controls

• Zoom - Scroll wheel or +/- buttons

• Pan - Click and drag the canvas

• Fit - Reset to fit diagram in view

• Fullscreen - Expand preview to full screen

Syntax Highlighting

TDL files get full syntax highlighting:

• Blue - Keywords (@arch, [nodes], [edges])

• Green - Node IDs

• Orange - Labels

• Gray - Comments

Export Options

Export as PNG

1. Click the Export button

2. Select Export as PNG

3. Choose scale (1x, 2x, 3x)

4. Save the file

Best for: Documentation, presentations, sharing

Export as SVG

1. Click the Export button

2. Select Export as SVG

3. Save the file

Best for: Web pages, further editing, scalable graphics

Keyboard Shortcuts

Action	Mac	Windows/Linux
Save	Cmd+S	Ctrl+S
Export	Cmd+E	Ctrl+E
Zoom In	Cmd++	Ctrl++
Zoom Out	Cmd+-	Ctrl+-
Reset Zoom	Cmd+0	Ctrl+0

Error Handling

When your TDL has syntax errors:

1. Red indicator appears in the status bar

2. Error panel shows at the bottom

3. Line numbers help you find the issue

Common Errors

Error	Cause	Fix
"Unknown node"	Edge references undefined node	Add node to [nodes] section
"Unexpected token"	Syntax error	Check indentation and colons
"Missing section"	No [nodes] section	Add [nodes] before defining nodes

VS Code Specific

Markdown Integration

TDL diagrams render inside markdown files:

# My Architecture

```tdl
@arch
[nodes]
  a:Service A
  b:Service B
[edges]
  a->b
```

![Rendered diagram](../images/getting-started-editor-features-1.svg)

Split View

Open the preview panel alongside your code:

1. Open a .tdl file

2. Click the preview icon in the top-right

3. Edit code on the left, see preview on the right

Next Steps

• Using with AI - Generate diagrams with Claude/GPT

• Your First Diagram - Hands-on tutorial