Connections

Edges show how components communicate and depend on each other.

Edge Operators

TDL has 5 edge operators:

Operator	Name	Style	Use Case
->	Solid arrow	───▶	Synchronous calls
-->	Dashed arrow	- - ▶	Async calls, responses
..	Dotted line	······	Weak dependencies
<->	Bidirectional solid	◀───▶	Two-way sync
<-->	Bidirectional dashed	◀- - ▶	Two-way async

Basic Usage

@arch
[nodes]
  a:Service A
  b:Service B
  c:Service C
  d:Service D
  e:Service E

[edges]
  a->b:sync call
  b-->c:async
  c..d:optional
  d<->e:bidirectional

Rendered diagram

Edge Labels

Add context with labels after a colon:

[edges]
  api->db:SELECT * FROM users
  api->cache:GET session:123
  worker-->queue:publish event

Multi-word Labels

Labels can have spaces:

[edges]
  api->auth:validate JWT token
  order->payment:process credit card

Special Characters

Use quotes for special characters:

[edges]
  api->endpoint:"POST /api/v1/users"
  config->app:"key=value"

Edge Styling

Colors

[edges]
  a->b|color:red
  c->d|color:#3B82F6
  e->f|color:green

Width

[edges]
  a->b|width:2
  c->d|width:3

Dash Pattern

[edges]
  a->b|dash:5,5
  c->d|dash:10,5,2,5

Combined Styling

[edges]
  a->b:critical|color:red|width:2
  c->d:optional|color:gray|dash:3,3

Named Styles

For consistent styling across edges, use named styles:

@arch

[styles]
  sync: color:#2563EB|width:2
  async: color:#9333EA|dash:5,5
  error: color:#DC2626|width:2

[nodes]
  api:API
  db:Database|cyl
  queue:Queue|cyl
  error:Error Handler

[edges]
  api->db:query|style:sync
  api-->queue:publish|style:async
  api->error:on failure|style:error

Rendered diagram

Common Patterns

Request/Response

[edges]
  client->api:request
  api-->client:response

Event-Driven

[edges]
  producer-->queue:publish
  queue-->consumer:subscribe

Error Flow

[edges]
  api->service:call
  service->api|color:red:error
  api->dlq|color:red:dead letter

Async with Callback

[edges]
  api-->worker:dispatch job
  worker-->api:callback on complete

Example: Full System

@arch

[styles]
  http: color:#2563EB
  grpc: color:#10B981
  async: color:#8B5CF6|dash:5,5
  data: color:#F59E0B

[nodes]
  client:Client|cloud
  gateway:API Gateway|diamond
  auth:Auth Service
  users:User Service
  orders:Order Service
  db:PostgreSQL|cyl
  cache:Redis|cyl
  queue:Kafka|cyl

[edges]
  client->gateway:REST|style:http
  gateway->auth:gRPC|style:grpc
  gateway->users:gRPC|style:grpc
  gateway->orders:gRPC|style:grpc
  users->db:SQL|style:data
  orders->db:SQL|style:data
  auth->cache:lookup|style:data
  orders-->queue:events|style:async

Rendered diagram

Next Steps

• Groups - Organize related components

• Styling - Advanced styling options