Styling

Customize the appearance of nodes and edges with colors and named styles.

Node Colors

@arch
[nodes]
  api:API|color:blue
  db:Database|cyl|color:green
  error:Error Handler|color:red
  warning:Warning|color:orange

Rendered diagram

Available Colors

TDL supports named colors:

Color	Hex	Use Case
red	#EF4444	Errors, critical
orange	#F97316	Warnings, staging
yellow	#EAB308	Caution
green	#22C55E	Success, production
blue	#3B82F6	Primary, info
purple	#A855F7	Special, async
pink	#EC4899	Accent
gray	#6B7280	Disabled, deprecated

Custom Hex Colors

[nodes]
  brand:Brand Service|color:#FF5733
  custom:Custom|color:#1E40AF

Edge Styling

Inline Styling

[edges]
  a->b|color:red
  c->d|width:2
  e->f|dash:5,5
  g->h:label|color:blue|width:2

Style Properties

Property	Values	Example
color	Named or hex	color:red, color:#3B82F6
width	Number	width:2, width:3
dash	Pattern	dash:5,5, dash:10,5,2,5

Named Styles

For consistent styling, define reusable styles in a [styles] section:

@arch

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

[nodes]
  api:API
  db:Database|cyl
  queue:Queue|cyl
  cache:Cache|cyl
  errors:Error Handler

[edges]
  api->db:query|style:sync
  api->cache:lookup|style:data
  api-->queue:publish|style:async
  api->errors:on error|style:error

Rendered diagram

Style Override

Override specific properties while using a named style:

[styles]
  default: color:blue|width:1

[edges]
  a->b|style:default
  c->d|style:default|width:3  # Override width
  e->f|style:default|color:red  # Override color

Common Style Patterns

Sync vs Async

[styles]
  sync: color:#2563EB|width:2
  async: color:#8B5CF6|dash:5,5|width:1

[edges]
  api->db|style:sync
  api-->queue|style:async
  queue-->worker|style:async
  worker->db|style:sync

Traffic Types

[styles]
  http: color:#3B82F6
  grpc: color:#10B981|width:2
  websocket: color:#F59E0B|dash:3,3

[edges]
  client->api|style:http
  api->backend|style:grpc
  client->realtime|style:websocket

Environment Boundaries

[styles]
  internal: color:#6B7280
  external: color:#EF4444|width:2

[edges]
  api->db|style:internal
  api->thirdparty|style:external

Full Example

@arch

[styles]
  rest: color:#3B82F6
  grpc: color:#10B981|width:2
  event: color:#8B5CF6|dash:5,5
  critical: color:#EF4444|width:3

[nodes]
  client:Client|cloud|color:blue

  [Backend|color:gray]
    gateway:API Gateway|diamond
    auth:Auth Service
    users:User Service
    orders:Order Service
    payments:Payment Service|color:green

  [Data|color:green]
    db:PostgreSQL|cyl
    cache:Redis|cyl
    queue:Kafka|cyl

[edges]
  client->gateway:REST|style:rest
  gateway->auth:gRPC|style:grpc
  gateway->users:gRPC|style:grpc
  gateway->orders:gRPC|style:grpc
  orders->payments:critical path|style:critical
  users->db|style:rest
  orders->db|style:rest
  payments->db|style:rest
  auth->cache|style:rest
  orders-->queue|style:event
  queue-->payments|style:event

Rendered diagram

Next Steps

• Icons - Add cloud provider icons

• Real-World Examples - Production patterns