Color Presets

drawmode includes 10 general-purpose semantic color presets and 18 cloud provider presets. Use the color option on addBox, addEllipse, or addDiamond.

d.addBox("API Server", { color: "backend" });
d.addBox("Lambda", { color: "aws-compute" });

You can also override colors directly with strokeColor and backgroundColor hex values.

General Presets

Preset	Use for	Background	Stroke
`frontend`	UI, browser, React	`#a5d8ff`	`#1971c2`
`backend`	APIs, services, servers	`#d0bfff`	`#7048e8`
`database`	Postgres, MySQL, DynamoDB	`#b2f2bb`	`#2f9e44`
`storage`	S3, R2, blob storage	`#ffec99`	`#f08c00`
`ai`	ML models, embeddings	`#e599f7`	`#9c36b5`
`external`	Third-party APIs	`#ffc9c9`	`#e03131`
`orchestration`	K8s, Docker, schedulers	`#ffa8a8`	`#c92a2a`
`queue`	Kafka, SQS, RabbitMQ	`#fff3bf`	`#fab005`
`cache`	Redis, Memcached	`#ffe8cc`	`#fd7e14`
`users`	End users, actors	`#e7f5ff`	`#1971c2`

AWS Presets

Preset	Background	Stroke
`aws-compute`	`#ffe8cc`	`#FF9900`
`aws-storage`	`#d4ecd0`	`#3F8624`
`aws-database`	`#d6ddf0`	`#3B48CC`
`aws-network`	`#e4d6ff`	`#8C4FFF`
`aws-security`	`#ffd6dc`	`#DD344C`
`aws-ml`	`#ccf0e8`	`#01A88D`

Azure Presets

Preset	Background	Stroke
`azure-compute`	`#cce4f7`	`#0078D4`
`azure-data`	`#d6f5ff`	`#0097C7`
`azure-network`	`#e2d4f5`	`#773ADC`
`azure-ai`	`#cce4f7`	`#0078D4`

GCP Presets

Preset	Background	Stroke
`gcp-compute`	`#d6e4fc`	`#4285F4`
`gcp-data`	`#d4ecd8`	`#34A853`
`gcp-network`	`#fef3cc`	`#F9AB00`
`gcp-ai`	`#fcd6d4`	`#EA4335`

Kubernetes Presets

Preset	Background	Stroke
`k8s-pod`	`#d4def5`	`#326CE5`
`k8s-service`	`#dde9f5`	`#4577A0`
`k8s-ingress`	`#ccf2f5`	`#0097A7`
`k8s-volume`	`#fff3cc`	`#C99605`