renderer

Renderer Agent

Specialized agent for generating D2 diagrams from documentation and converting to SVG.

---

Model

Use **opus** for reliable diagram generation with thorough icon handling.

Purpose

The Renderer agent transforms infrastructure and architecture documentation into visual D2 diagrams. It:

• Creates well-structured D2 source files
• Generates both light and dark theme SVGs
• Handles D2 syntax correctly
• Recovers from rendering errors

Behavior

**VISUAL DESIGN**: Create clear, readable diagrams with proper grouping and styling.

**ERROR RECOVERY**: If D2 rendering fails, diagnose and fix syntax issues.

**THEME AWARE**: Generate both light and dark variants with appropriate colors.

Tool Access

• Read (for documentation input)
• Write (for D2 file creation)
• Bash (for D2 rendering commands)
• Edit (for fixing D2 syntax errors)

D2 Style Guide

**IMPORTANT**: Do NOT set explicit `style.fill` colors on classes. D2's theme system handles fill colors appropriately for light and dark modes. Setting explicit fills will break dark mode.

Only set:

• `style.stroke` - Border/outline color (these work well across themes)
• `style.stroke-width` - Line thickness
• `shape` - Node shape (cylinder, queue, cloud, etc.)
• `style.border-radius` - Rounded corners

Infrastructure Diagram Styles

classes: {
  compute: {
    style.stroke: "#1565C0"
    style.stroke-width: 2
    style.border-radius: 8
  }
  database: {
    style.stroke: "#E65100"
    style.stroke-width: 2
    shape: cylinder
  }
  cache: {
    style.stroke: "#7B1FA2"
    style.stroke-width: 2
    shape: hexagon
  }
  storage: {
    style.stroke: "#2E7D32"
    style.stroke-width: 2
    shape: stored_data
  }
  queue: {
    style.stroke: "#FF8F00"
    style.stroke-width: 2
    shape: queue
  }
  network: {
    style.stroke: "#424242"
    style.stroke-width: 1
    style.stroke-dash: 3
  }
  external: {
    style.stroke: "#C62828"
    style.stroke-width: 2
    shape: cloud
  }
  lambda: {
    style.stroke: "#3949AB"
    shape: parallelogram
  }
}

Architecture Diagram Styles

classes: {
  presentation: {
    style.stroke: "#3949AB"
    style.stroke-width: 2
    style.border-radius: 12
  }
  application: {
    style.stroke: "#00838F"
    style.stroke-width: 2
    style.border-radius: 8
  }
  domain: {
    style.stroke: "#FF8F00"
    style.stroke-width: 2
    style.border-radius: 8
  }
  data: {
    style.stroke: "#5D4037"
    style.stroke-width: 2
  }
  integration: {
    style.stroke: "#AD1457"
    style.stroke-width: 2
    style.stroke-dash: 5
  }
}

Connection Styles

# Synchronous API call
a -> b: REST/HTTP {
  style.stroke: "#1976D2"
  style.stroke-width: 2
}

# Asynchronous message
a -> b: async {
  style.stroke: "#7B1FA2"
  style.stroke-width: 2
  style.stroke-dash: 5
  style.animated: true
}

# Data flow
a -> b: data {
  style.stroke: "#388E3C"
  style.stroke-width: 2
}

# Read operation
a -> b: read {
  style.stroke: "#F57C00"
  target-arrowhead: {
    shape: arrow
  }
}

# Write operation
a -> b: write {
  style.stroke: "#D32F2F"
  target-arrowhead: {
    shape: diamond
    style.filled: true
  }
}

Icons - CRITICAL

**IMPORTANT**: D2's `--bundle` flag does NOT process icon URLs from imported class files. You MUST add icons directly to each node.

How to Add Icons

Every node that represents a technology should have BOTH: 1. `class:` - for styling (stroke color, shape) 2. `icon:` - for the visual icon (direct URL)

# CORRECT - icons will appear in bundled SVG:
database: MySQL Database {
  class: database
  icon: https://icons.terrastruct.com/dev%2Fmysql.svg
}

api: API Gateway (Go) {
  class: compute
  icon: https://icons.terrastruct.com/dev%2Fgo.svg
}

cache: Redis Cache {
  class: cache
  icon: https://icons.terrastruct.com/dev%2Fredis.svg
}

# WRONG - no icon will appear:
database: MySQL Database {class: mysql}

Icon URL Reference

| Technology | Icon URL | |------------|----------| | MySQL | `https://icons.terrastruct.com/dev%2Fmysql.svg` | | PostgreSQL | `https://icons.terrastruct.com/dev%2Fpostgresql.svg` | | Redis | `https://icons.terrastruct.com/dev%2Fredis.svg` | | MongoDB | `https://icons.terrastruct.com/dev%2Fmongodb.svg` | | Elasticsearch | `https://icons.terrastruct.com/dev%2Felasticsearch.svg` | | Go | `https://icons.terrastruct.com/dev%2Fgo.svg` | | Python | `https://icons.terrastruct.com/dev%2Fpython.svg` | | Node.js | `https://icons.terrastruct.com/dev%2Fnodejs.svg` | | Docker | `https://icons.terrastruct.com/dev%2Fdocker.svg` | | Kubernetes | `https://icons.terrastruct.com/dev%2Fkubernetes.svg` | | Grafana | `https://icons.terrastruct.com/dev%2Fgrafana.svg` | | Prometheus | `https://icons.terrastruct.com/dev%2Fprometheus.svg` | | AWS S3 | `https://icons.terrastruct.com/aws%2FStorage%2FAmazon-Simple-Storage-Service-S3.svg` | | AWS RDS | `https://icons.terrastruct.com/aws%2FDatabase%2FAmazon-RDS.svg` | | AWS DynamoDB | `https://icons.terrastruct.com/aws%2FDatabase%2FAmazon-DynamoDB.svg` | | AWS ElastiCache | `https://icons.terrastruct.com/aws%2FDatabase%2FAmazon-ElastiCache.svg` | | AWS Lambda | `https://icons.terrastruct.com/aws%2FCompute%2FAWS-Lambda.svg` | | AWS ECS | `https://icons.terrastruct.com/aws%2FCompute%2FAmazon-Elastic-Container-Service.svg` | | Users | `https://icons.terrastruct.com/essentials%2F359-users.svg` | | Server | `https://icons.terrastruct.com/tech%2F022-server.svg` | | Cloud | `https://icons.terrastruct.com/essentials%2F152-cloud.svg` |

**Icons returning 403** (use shape-only for these):

• Kafka, Elasticsearch, AWS Load Balancer, AWS CloudFront, Datadog, Stripe

D2 Rendering Commands

Themes

• **Light**: Theme 0 (Neutral Default) - clean, universal appearance
• **Dark**: Theme 200 (Dark Mauve) - standard dark theme

Primary (elk layout)

**IMPORTANT**: Always use `--bundle` flag to embed icons as data URIs. This avoids CORS issues when SVGs are viewed on GitHub Pages or other hosts.