---
title: Render an animated Beck diagram at build time
description: "Fence Beck YAML with a `beck` block and let Pennington.Beck render it server-side to a self-animating inline SVG — no client JavaScript."
canonical_url: https://usepennington.net/how-to/rich-content/beck-diagrams/
sidecar_url: https://usepennington.net/how-to/rich-content/beck-diagrams.md
content_hash: sha256:4f9726aacc49fc253bd75f604a387607011cae955935200e425b4e22e0b4e49b
tokens: 11240
uid: how-to.rich-content.beck-diagrams
reading_time_minutes: 6
---

Guides
# Render an animated Beck diagram at build time

Fence Beck YAML with a `beck` block and let Pennington.Beck render it server-side to a self-animating inline SVG — no client JavaScript.

 
To draw an architecture, sequence, state, or class diagram that renders at build time — no client rendering, no CDN — fence Beck YAML with `beck` as the language. [Beck](https://usepennington.github.io/beck/) is a pure-C# diagram engine; the `Pennington.Beck` package registers a code-block preprocessor that turns each fence into a self-animating inline SVG during markdown rendering. The emitted SVG keys dark mode off the site's `data-theme` attribute and its `--beck-*` color tokens fall back to the host's `--color-*` palette, so diagrams adopt your theme with no per-diagram configuration. For a client-rendered alternative with Mermaid syntax, see [Embed a Mermaid diagram in a markdown page](https://usepennington.net/how-to/rich-content/diagrams.md).

 
## Register the renderer

 
Add the package and register the preprocessor. It hooks the shared code-block pipeline, so it works the same on `AddPennington`, `AddDocSite`, and `AddBlogSite` hosts:

 
```bash
dotnet add package Pennington.Beck
```

 
```csharp
builder.Services.AddPenningtonBeck();
```

 
That is the whole integration — the next `beck` fence in any markdown page renders as a diagram, on both the live dev server and the static build.

 
## Author a diagram

 
Every Beck document opens with a `type:`. This page covers the fence wiring, not the YAML grammar — the [Beck documentation](https://usepennington.github.io/beck/docs/) owns the node, edge, flow, and styling vocabulary.

 
### Architecture diagram

 
````markdown
```beck
type: architecture
nodes:
  - { id: gw, title: API Gateway, kind: gateway }
  - { id: orders, title: Orders }
  - { id: db, title: Postgres, kind: db }
  - { id: bus, title: Events, kind: queue }
edges:
  - { from: gw, to: orders }
  - { from: orders, to: db, label: query }
  - { from: orders, to: bus, label: publish, kind: async }
```
````

 
.b-f6ee9679{--beck-surface:var(--color-base-50, #ffffff);--beck-node-bg:var(--color-base-50, #ffffff);--beck-node-border:var(--color-base-200, #e2e8f0);--beck-node-shadow:0 1px 3px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.06);--beck-text:var(--color-base-800, #1e293b);--beck-text-muted:var(--color-base-500, #64748b);--beck-text-faint:var(--color-base-400, #94a3b8);--beck-primary:var(--color-primary-600, #175ddc);--beck-success:var(--color-emerald-500, #10b981);--beck-warn:var(--color-amber-500, #f59e0b);--beck-danger:var(--color-red-500, #ef4444);--beck-info:var(--color-violet-500, #8b5cf6);--beck-neutral:var(--color-base-400, #94a3b8);--beck-group-border:color-mix(in srgb, var(--beck-neutral) 45%, transparent);--beck-group-label:var(--beck-text-muted);--beck-edge:var(--color-base-300, #cbd5e1);--beck-packet:var(--beck-primary);--beck-icon-bg:var(--color-base-100, #f1f5f9);--beck-accent:var(--beck-primary);--beck-font:'Inter', system-ui, -apple-system, sans-serif;--beck-font-mono:'IBM Plex Mono', ui-monospace, monospace;}[data-theme='dark'] .b-f6ee9679{--beck-surface:var(--color-base-950, #0d1117);--beck-node-bg:var(--color-base-900, #161b22);--beck-node-border:var(--color-base-700, #30363d);--beck-node-shadow:0 1px 3px rgb(0 0 0 / 0.3), 0 4px 14px rgb(0 0 0 / 0.4);--beck-text:var(--color-base-50, #f0f6fc);--beck-text-muted:var(--color-base-400, #8b949e);--beck-text-faint:var(--color-base-500, #6e7681);--beck-edge:var(--color-base-700, #30363d);--beck-icon-bg:var(--color-base-800, #21262d);--beck-font:'Inter', system-ui, -apple-system, sans-serif;--beck-font-mono:'IBM Plex Mono', ui-monospace, monospace;}@media (prefers-color-scheme: dark){:root:not([data-theme='light']) .b-f6ee9679{--beck-surface:var(--color-base-950, #0d1117);--beck-node-bg:var(--color-base-900, #161b22);--beck-node-border:var(--color-base-700, #30363d);--beck-node-shadow:0 1px 3px rgb(0 0 0 / 0.3), 0 4px 14px rgb(0 0 0 / 0.4);--beck-text:var(--color-base-50, #f0f6fc);--beck-text-muted:var(--color-base-400, #8b949e);--beck-text-faint:var(--color-base-500, #6e7681);--beck-edge:var(--color-base-700, #30363d);--beck-icon-bg:var(--color-base-800, #21262d);--beck-font:'Inter', system-ui, -apple-system, sans-serif;--beck-font-mono:'IBM Plex Mono', ui-monospace, monospace;}}.b-f6ee9679{font-family:var(--beck-font);}.b-f6ee9679 .beck-fx-node{transform-box:fill-box;transform-origin:center;}.b-f6ee9679 .beck-packet-label{font-family:var(--beck-font-mono);font-size:11px;font-weight:600;}.b-f6ee9679 .beck-node{fill:var(--beck-node-bg);stroke:color-mix(in srgb, var(--beck-accent) 32%, var(--beck-node-border));stroke-width:1.5;filter:drop-shadow(0 1px 3px rgb(0 0 0/.05)) drop-shadow(0 4px 12px rgb(0 0 0/.06));}[data-theme='dark'] .b-f6ee9679 .beck-node{filter:drop-shadow(0 1px 3px rgb(0 0 0/.3)) drop-shadow(0 4px 14px rgb(0 0 0/.4));}@media (prefers-color-scheme: dark){:root:not([data-theme='light']) .b-f6ee9679 .beck-node{filter:drop-shadow(0 1px 3px rgb(0 0 0/.3)) drop-shadow(0 4px 14px rgb(0 0 0/.4));}}.b-f6ee9679 .beck-node--external{stroke-dasharray:5 4;}.b-f6ee9679 .beck-node--subtle{opacity:.72;}.b-f6ee9679 .beck-node--ghost{fill:transparent;stroke-dasharray:5 4;filter:none;}.b-f6ee9679 .beck-icon-chip{fill:color-mix(in srgb, var(--beck-accent) 15%, var(--beck-icon-bg));}.b-f6ee9679 .beck-node--ghost .beck-icon-chip{fill:transparent;}.b-f6ee9679 .beck-icon{color:var(--beck-accent);}.b-f6ee9679 .beck-node-title{fill:var(--beck-text);}.b-f6ee9679 .beck-node-subtitle,.b-f6ee9679 .beck-ghost-label{fill:var(--beck-text-muted);}.b-f6ee9679 .beck-status-inline{fill:var(--beck-accent);}.b-f6ee9679 .beck-status-bg{fill:color-mix(in srgb, var(--beck-accent) 14%, transparent);}.b-f6ee9679 .beck-status-text{fill:var(--beck-accent);}.b-f6ee9679 .beck-group{fill:none;stroke:var(--beck-group-border);stroke-width:1.5;stroke-dasharray:6 6;}.b-f6ee9679 .beck-group-label-bg{fill:var(--beck-surface);}.b-f6ee9679 .beck-group-label{fill:var(--beck-group-label);}.b-f6ee9679 .beck-node--start{fill:var(--beck-text-muted);}.b-f6ee9679 .beck-node--end{fill:none;stroke:var(--beck-text-muted);stroke-width:2;}.b-f6ee9679 .beck-end-dot{fill:var(--beck-text-muted);}.b-f6ee9679 .beck-class-head{fill:color-mix(in srgb, var(--beck-accent) 10%, transparent);}.b-f6ee9679 .beck-class-head-border{stroke:color-mix(in srgb, var(--beck-accent) 28%, var(--beck-node-border));stroke-width:1;}.b-f6ee9679 .beck-class-divider{stroke:var(--beck-node-border);stroke-width:1;}.b-f6ee9679 .beck-class-stereo{fill:var(--beck-text-muted);}.b-f6ee9679 .beck-class-title{fill:var(--beck-text);}.b-f6ee9679 .beck-class-field{fill:var(--beck-text-muted);}.b-f6ee9679 .beck-class-method{fill:var(--beck-text);}.b-f6ee9679 .beck-lifeline{stroke-width:2;stroke-dasharray:6 7;}.b-f6ee9679 .beck-activation{filter:drop-shadow(0 0 5px color-mix(in srgb, var(--beck-accent) 45%, transparent));}.b-f6ee9679 .beck-msg-chip{fill:var(--beck-node-bg);stroke:color-mix(in srgb, var(--beck-accent) 40%, transparent);stroke-width:1;}.b-f6ee9679 .beck-msg-text{fill:color-mix(in srgb, var(--beck-accent) 34%, var(--beck-text));}.b-f6ee9679 .beck-msg--reply .beck-msg-chip{stroke:none;}.b-f6ee9679 .beck-msg--reply .beck-msg-text,.b-f6ee9679 .beck-msg-text--bare{fill:var(--beck-text-muted);}.b-f6ee9679 .beck-band-box{fill:color-mix(in srgb, var(--beck-accent) 5%, transparent);stroke:color-mix(in srgb, var(--beck-accent) 30%, transparent);stroke-width:1.5;stroke-dasharray:6 6;}.b-f6ee9679 .beck-band-chip{fill:var(--beck-surface);stroke:color-mix(in srgb, var(--beck-accent) 40%, transparent);stroke-width:1;}.b-f6ee9679 .beck-band-label{fill:color-mix(in srgb, var(--beck-accent) 70%, var(--beck-text));}.b-f6ee9679 .beck-edge{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}.b-f6ee9679 .beck-edge-label{fill:var(--beck-text-muted);paint-order:stroke;stroke:var(--beck-surface);stroke-width:3px;stroke-linejoin:round;}.b-f6ee9679 .beck-title{fill:var(--beck-text);}.b-f6ee9679 .beck-subtitle{fill:var(--beck-text-muted);}@media (prefers-reduced-motion:no-preference){.b-f6ee9679 .bp0-f6ee9679{animation:kp0-f6ee9679 6.66s linear infinite;}@keyframes kp0-f6ee9679{0%{offset-distance:0%;opacity:0;}0%{offset-distance:0%;opacity:1;animation-timing-function:linear;}9.0138%{offset-distance:100%;opacity:1;}9.0238%{opacity:0;}100%{offset-distance:0%;opacity:0;}}.b-f6ee9679 .bt0-f6ee9679{animation:kt0-f6ee9679 6.66s linear infinite;}@keyframes kt0-f6ee9679{0%{stroke-dashoffset:96;}0%{stroke-dashoffset:96;animation-timing-function:linear;}9.0138%{stroke-dashoffset:0;}81.9723%{stroke-dashoffset:0;}81.9823%{stroke-dashoffset:96;}100%{stroke-dashoffset:96;}}.b-f6ee9679 .bp1-f6ee9679{animation:kp1-f6ee9679 6.66s linear infinite;}@keyframes kp1-f6ee9679{0%{offset-distance:0%;opacity:0;}18.0177%{opacity:0;}18.0277%{offset-distance:0%;opacity:1;animation-timing-function:linear;}30.9001%{offset-distance:100%;opacity:1;}30.9101%{opacity:0;}100%{offset-distance:0%;opacity:0;}}.b-f6ee9679 .bt1-f6ee9679{animation:kt1-f6ee9679 6.66s linear infinite;}@keyframes kt1-f6ee9679{0%{stroke-dashoffset:179.94;}18.0277%{stroke-dashoffset:179.94;animation-timing-function:linear;}30.9001%{stroke-dashoffset:0;}81.9723%{stroke-dashoffset:0;}81.9823%{stroke-dashoffset:179.94;}100%{stroke-dashoffset:179.94;}}.b-f6ee9679 .bp2-f6ee9679{animation:kp2-f6ee9679 6.66s linear infinite;}@keyframes kp2-f6ee9679{0%{offset-distance:0%;opacity:0;}39.904%{opacity:0;}39.914%{offset-distance:0%;opacity:1;animation-timing-function:linear(0 0%, 0.0012 6.67%, 0.0095 13.33%, 0.032 20%, 0.0759 26.67%, 0.1481 33.33%, 0.256 40%, 0.3255 43.33%, 0.4065 46.67%, 0.5935 53.33%, 0.6745 56.67%, 0.744 60%, 0.8519 66.67%, 0.9241 73.33%, 0.968 80%, 0.9905 86.67%, 0.9988 93.33%, 1 100%);}57.9354%{offset-distance:100%;opacity:1;}57.9454%{opacity:0;}100%{offset-distance:0%;opacity:0;}}.b-f6ee9679 .bt2-f6ee9679{animation:kt2-f6ee9679 6.66s linear infinite;}@keyframes kt2-f6ee9679{0%{stroke-dashoffset:179.94;}39.914%{stroke-dashoffset:179.94;animation-timing-function:linear(0 0%, 0.0012 6.67%, 0.0095 13.33%, 0.032 20%, 0.0759 26.67%, 0.1481 33.33%, 0.256 40%, 0.3255 43.33%, 0.4065 46.67%, 0.5935 53.33%, 0.6745 56.67%, 0.744 60%, 0.8519 66.67%, 0.9241 73.33%, 0.968 80%, 0.9905 86.67%, 0.9988 93.33%, 1 100%);}57.9354%{stroke-dashoffset:0;}81.9723%{stroke-dashoffset:0;}81.9823%{stroke-dashoffset:179.94;}100%{stroke-dashoffset:179.94;}}.b-f6ee9679 .bn1-f6ee9679 .beck-fx-node{animation:kn1-f6ee9679 6.66s linear infinite;}@keyframes kn1-f6ee9679{0%{transform:none;}9.0138%{transform:none;animation-timing-function:linear(0 0%, 0.2557 3.33%, 0.4834 6.67%, 0.6845 10%, 0.8603 13.33%, 1.0121 16.67%, 1.1414 20%, 1.2495 23.33%, 1.3377 26.67%, 1.4074 30%, 1.46 33.33%, 1.4967 36.67%, 1.5191 40%, 1.5284 43.33%, 1.5259 46.67%, 1.4913 53.33%, 1.4261 60%, 1.3411 66.67%, 1.2472 73.33%, 1.1554 80%, 1.0763 86.67%, 1.0209 93.33%, 1 100%);}11.718%{transform:translateY(-2px) scale(1.04);animation-timing-function:linear(0 0%, 0.1286 1.67%, 0.2749 3.33%, 0.5785 6.67%, 0.7194 8.33%, 0.8455 10%, 0.9534 11.67%, 1.0415 13.33%, 1.1093 15%, 1.1575 16.67%, 1.1878 18.33%, 1.2023 20%, 1.2035 21.67%, 1.1941 23.33%, 1.154 26.67%, 1.0496 33.33%, 1.0082 36.67%, 0.9807 40%, 0.9668 43.33%, 0.964 46.67%, 0.9773 53.33%, 0.9952 60%, 1.0049 66.67%, 1.0061 73.33%, 1.0032 80%, 1.0003 86.67%, 0.999 93.33%, 1 100%);}18.0277%{transform:none;}100%{transform:none;}}.b-f6ee9679 .bn2-f6ee9679 .beck-fx-node{animation:kn2-f6ee9679 6.66s linear infinite;}@keyframes kn2-f6ee9679{0%{transform:none;}30.9001%{transform:none;animation-timing-function:linear(0 0%, 0.2557 3.33%, 0.4834 6.67%, 0.6845 10%, 0.8603 13.33%, 1.0121 16.67%, 1.1414 20%, 1.2495 23.33%, 1.3377 26.67%, 1.4074 30%, 1.46 33.33%, 1.4967 36.67%, 1.5191 40%, 1.5284 43.33%, 1.5259 46.67%, 1.4913 53.33%, 1.4261 60%, 1.3411 66.67%, 1.2472 73.33%, 1.1554 80%, 1.0763 86.67%, 1.0209 93.33%, 1 100%);}33.6043%{transform:translateY(-2px) scale(1.04);animation-timing-function:linear(0 0%, 0.1286 1.67%, 0.2749 3.33%, 0.5785 6.67%, 0.7194 8.33%, 0.8455 10%, 0.9534 11.67%, 1.0415 13.33%, 1.1093 15%, 1.1575 16.67%, 1.1878 18.33%, 1.2023 20%, 1.2035 21.67%, 1.1941 23.33%, 1.154 26.67%, 1.0496 33.33%, 1.0082 36.67%, 0.9807 40%, 0.9668 43.33%, 0.964 46.67%, 0.9773 53.33%, 0.9952 60%, 1.0049 66.67%, 1.0061 73.33%, 1.0032 80%, 1.0003 86.67%, 0.999 93.33%, 1 100%);}39.914%{transform:none;}100%{transform:none;}}.b-f6ee9679 .bn3-f6ee9679 .beck-fx-node{animation:kn3-f6ee9679 6.66s linear infinite;}@keyframes kn3-f6ee9679{0%{transform:none;}57.9354%{transform:none;animation-timing-function:linear(0 0%, 0.2557 3.33%, 0.4834 6.67%, 0.6845 10%, 0.8603 13.33%, 1.0121 16.67%, 1.1414 20%, 1.2495 23.33%, 1.3377 26.67%, 1.4074 30%, 1.46 33.33%, 1.4967 36.67%, 1.5191 40%, 1.5284 43.33%, 1.5259 46.67%, 1.4913 53.33%, 1.4261 60%, 1.3411 66.67%, 1.2472 73.33%, 1.1554 80%, 1.0763 86.67%, 1.0209 93.33%, 1 100%);}60.6396%{transform:translateY(-2px) scale(1.04);animation-timing-function:linear(0 0%, 0.1286 1.67%, 0.2749 3.33%, 0.5785 6.67%, 0.7194 8.33%, 0.8455 10%, 0.9534 11.67%, 1.0415 13.33%, 1.1093 15%, 1.1575 16.67%, 1.1878 18.33%, 1.2023 20%, 1.2035 21.67%, 1.1941 23.33%, 1.154 26.67%, 1.0496 33.33%, 1.0082 36.67%, 0.9807 40%, 0.9668 43.33%, 0.964 46.67%, 0.9773 53.33%, 0.9952 60%, 1.0049 66.67%, 1.0061 73.33%, 1.0032 80%, 1.0003 86.67%, 0.999 93.33%, 1 100%);}66.9493%{transform:none;}100%{transform:none;}}.b-f6ee9679 .brip0-f6ee9679{animation:krip0-f6ee9679 6.66s linear infinite;}@keyframes krip0-f6ee9679{0%{opacity:0;transform:scale(1);}9.0038%{opacity:0;transform:scale(1);}9.0138%{opacity:0.6;transform:scale(1);animation-timing-function:linear(0 0%, 0.187 6.67%, 0.349 13.33%, 0.488 20%, 0.6056 26.67%, 0.7037 33.33%, 0.784 40%, 0.8483 46.67%, 0.8984 53.33%, 0.936 60%, 0.963 66.67%, 0.981 73.33%, 0.992 80%, 0.9976 86.67%, 0.9997 93.33%, 1 100%);}16.2249%{opacity:0;transform:scale(1.15);}100%{opacity:0;transform:scale(1);}}.b-f6ee9679 .brip1-f6ee9679{animation:krip1-f6ee9679 6.66s linear infinite;}@keyframes krip1-f6ee9679{0%{opacity:0;transform:scale(1);}30.8901%{opacity:0;transform:scale(1);}30.9001%{opacity:0.6;transform:scale(1);animation-timing-function:linear(0 0%, 0.187 6.67%, 0.349 13.33%, 0.488 20%, 0.6056 26.67%, 0.7037 33.33%, 0.784 40%, 0.8483 46.67%, 0.8984 53.33%, 0.936 60%, 0.963 66.67%, 0.981 73.33%, 0.992 80%, 0.9976 86.67%, 0.9997 93.33%, 1 100%);}38.1112%{opacity:0;transform:scale(1.15);}100%{opacity:0;transform:scale(1);}}.b-f6ee9679 .brip2-f6ee9679{animation:krip2-f6ee9679 6.66s linear infinite;}@keyframes krip2-f6ee9679{0%{opacity:0;transform:scale(1);}57.9254%{opacity:0;transform:scale(1);}57.9354%{opacity:0.6;transform:scale(1);animation-timing-function:linear(0 0%, 0.187 6.67%, 0.349 13.33%, 0.488 20%, 0.6056 26.67%, 0.7037 33.33%, 0.784 40%, 0.8483 46.67%, 0.8984 53.33%, 0.936 60%, 0.963 66.67%, 0.981 73.33%, 0.992 80%, 0.9976 86.67%, 0.9997 93.33%, 1 100%);}65.1465%{opacity:0;transform:scale(1.15);}100%{opacity:0;transform:scale(1);}}}querypublishAPI GatewayOrdersPostgresEvents
### Sequence diagram

 
Sequence, state, and class documents use the same fence — only the `type:` and its vocabulary change:

 
````markdown
```beck
type: sequence
participants:
  - { id: web, title: Web App, kind: user }
  - { id: api, title: Orders API }
  - { id: db, title: Postgres, kind: db }
messages:
  - { from: web, to: api, label: POST /orders }
  - { from: api, to: db, label: INSERT }
  - { from: db, to: api, label: ok, reply: true }
  - { from: api, to: web, label: 201 Created, reply: true }
```
````

 
.b-e9bc8fb5{--beck-surface:var(--color-base-50, #ffffff);--beck-node-bg:var(--color-base-50, #ffffff);--beck-node-border:var(--color-base-200, #e2e8f0);--beck-node-shadow:0 1px 3px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.06);--beck-text:var(--color-base-800, #1e293b);--beck-text-muted:var(--color-base-500, #64748b);--beck-text-faint:var(--color-base-400, #94a3b8);--beck-primary:var(--color-primary-600, #175ddc);--beck-success:var(--color-emerald-500, #10b981);--beck-warn:var(--color-amber-500, #f59e0b);--beck-danger:var(--color-red-500, #ef4444);--beck-info:var(--color-violet-500, #8b5cf6);--beck-neutral:var(--color-base-400, #94a3b8);--beck-group-border:color-mix(in srgb, var(--beck-neutral) 45%, transparent);--beck-group-label:var(--beck-text-muted);--beck-edge:var(--color-base-300, #cbd5e1);--beck-packet:var(--beck-primary);--beck-icon-bg:var(--color-base-100, #f1f5f9);--beck-accent:var(--beck-primary);--beck-font:'Inter', system-ui, -apple-system, sans-serif;--beck-font-mono:'IBM Plex Mono', ui-monospace, monospace;}[data-theme='dark'] .b-e9bc8fb5{--beck-surface:var(--color-base-950, #0d1117);--beck-node-bg:var(--color-base-900, #161b22);--beck-node-border:var(--color-base-700, #30363d);--beck-node-shadow:0 1px 3px rgb(0 0 0 / 0.3), 0 4px 14px rgb(0 0 0 / 0.4);--beck-text:var(--color-base-50, #f0f6fc);--beck-text-muted:var(--color-base-400, #8b949e);--beck-text-faint:var(--color-base-500, #6e7681);--beck-edge:var(--color-base-700, #30363d);--beck-icon-bg:var(--color-base-800, #21262d);--beck-font:'Inter', system-ui, -apple-system, sans-serif;--beck-font-mono:'IBM Plex Mono', ui-monospace, monospace;}@media (prefers-color-scheme: dark){:root:not([data-theme='light']) .b-e9bc8fb5{--beck-surface:var(--color-base-950, #0d1117);--beck-node-bg:var(--color-base-900, #161b22);--beck-node-border:var(--color-base-700, #30363d);--beck-node-shadow:0 1px 3px rgb(0 0 0 / 0.3), 0 4px 14px rgb(0 0 0 / 0.4);--beck-text:var(--color-base-50, #f0f6fc);--beck-text-muted:var(--color-base-400, #8b949e);--beck-text-faint:var(--color-base-500, #6e7681);--beck-edge:var(--color-base-700, #30363d);--beck-icon-bg:var(--color-base-800, #21262d);--beck-font:'Inter', system-ui, -apple-system, sans-serif;--beck-font-mono:'IBM Plex Mono', ui-monospace, monospace;}}.b-e9bc8fb5{font-family:var(--beck-font);}.b-e9bc8fb5 .beck-fx-node{transform-box:fill-box;transform-origin:center;}.b-e9bc8fb5 .beck-packet-label{font-family:var(--beck-font-mono);font-size:11px;font-weight:600;}.b-e9bc8fb5 .beck-node{fill:var(--beck-node-bg);stroke:color-mix(in srgb, var(--beck-accent) 32%, var(--beck-node-border));stroke-width:1.5;filter:drop-shadow(0 1px 3px rgb(0 0 0/.05)) drop-shadow(0 4px 12px rgb(0 0 0/.06));}[data-theme='dark'] .b-e9bc8fb5 .beck-node{filter:drop-shadow(0 1px 3px rgb(0 0 0/.3)) drop-shadow(0 4px 14px rgb(0 0 0/.4));}@media (prefers-color-scheme: dark){:root:not([data-theme='light']) .b-e9bc8fb5 .beck-node{filter:drop-shadow(0 1px 3px rgb(0 0 0/.3)) drop-shadow(0 4px 14px rgb(0 0 0/.4));}}.b-e9bc8fb5 .beck-node--external{stroke-dasharray:5 4;}.b-e9bc8fb5 .beck-node--subtle{opacity:.72;}.b-e9bc8fb5 .beck-node--ghost{fill:transparent;stroke-dasharray:5 4;filter:none;}.b-e9bc8fb5 .beck-icon-chip{fill:color-mix(in srgb, var(--beck-accent) 15%, var(--beck-icon-bg));}.b-e9bc8fb5 .beck-node--ghost .beck-icon-chip{fill:transparent;}.b-e9bc8fb5 .beck-icon{color:var(--beck-accent);}.b-e9bc8fb5 .beck-node-title{fill:var(--beck-text);}.b-e9bc8fb5 .beck-node-subtitle,.b-e9bc8fb5 .beck-ghost-label{fill:var(--beck-text-muted);}.b-e9bc8fb5 .beck-status-inline{fill:var(--beck-accent);}.b-e9bc8fb5 .beck-status-bg{fill:color-mix(in srgb, var(--beck-accent) 14%, transparent);}.b-e9bc8fb5 .beck-status-text{fill:var(--beck-accent);}.b-e9bc8fb5 .beck-group{fill:none;stroke:var(--beck-group-border);stroke-width:1.5;stroke-dasharray:6 6;}.b-e9bc8fb5 .beck-group-label-bg{fill:var(--beck-surface);}.b-e9bc8fb5 .beck-group-label{fill:var(--beck-group-label);}.b-e9bc8fb5 .beck-node--start{fill:var(--beck-text-muted);}.b-e9bc8fb5 .beck-node--end{fill:none;stroke:var(--beck-text-muted);stroke-width:2;}.b-e9bc8fb5 .beck-end-dot{fill:var(--beck-text-muted);}.b-e9bc8fb5 .beck-class-head{fill:color-mix(in srgb, var(--beck-accent) 10%, transparent);}.b-e9bc8fb5 .beck-class-head-border{stroke:color-mix(in srgb, var(--beck-accent) 28%, var(--beck-node-border));stroke-width:1;}.b-e9bc8fb5 .beck-class-divider{stroke:var(--beck-node-border);stroke-width:1;}.b-e9bc8fb5 .beck-class-stereo{fill:var(--beck-text-muted);}.b-e9bc8fb5 .beck-class-title{fill:var(--beck-text);}.b-e9bc8fb5 .beck-class-field{fill:var(--beck-text-muted);}.b-e9bc8fb5 .beck-class-method{fill:var(--beck-text);}.b-e9bc8fb5 .beck-lifeline{stroke-width:2;stroke-dasharray:6 7;}.b-e9bc8fb5 .beck-activation{filter:drop-shadow(0 0 5px color-mix(in srgb, var(--beck-accent) 45%, transparent));}.b-e9bc8fb5 .beck-msg-chip{fill:var(--beck-node-bg);stroke:color-mix(in srgb, var(--beck-accent) 40%, transparent);stroke-width:1;}.b-e9bc8fb5 .beck-msg-text{fill:color-mix(in srgb, var(--beck-accent) 34%, var(--beck-text));}.b-e9bc8fb5 .beck-msg--reply .beck-msg-chip{stroke:none;}.b-e9bc8fb5 .beck-msg--reply .beck-msg-text,.b-e9bc8fb5 .beck-msg-text--bare{fill:var(--beck-text-muted);}.b-e9bc8fb5 .beck-band-box{fill:color-mix(in srgb, var(--beck-accent) 5%, transparent);stroke:color-mix(in srgb, var(--beck-accent) 30%, transparent);stroke-width:1.5;stroke-dasharray:6 6;}.b-e9bc8fb5 .beck-band-chip{fill:var(--beck-surface);stroke:color-mix(in srgb, var(--beck-accent) 40%, transparent);stroke-width:1;}.b-e9bc8fb5 .beck-band-label{fill:color-mix(in srgb, var(--beck-accent) 70%, var(--beck-text));}.b-e9bc8fb5 .beck-edge{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}.b-e9bc8fb5 .beck-edge-label{fill:var(--beck-text-muted);paint-order:stroke;stroke:var(--beck-surface);stroke-width:3px;stroke-linejoin:round;}.b-e9bc8fb5 .beck-title{fill:var(--beck-text);}.b-e9bc8fb5 .beck-subtitle{fill:var(--beck-text-muted);}@media (prefers-reduced-motion:no-preference){.b-e9bc8fb5 .bp0-e9bc8fb5{animation:kp0-e9bc8fb5 10.2s linear infinite;}@keyframes kp0-e9bc8fb5{0%{offset-distance:0%;opacity:0;}0%{offset-distance:0%;opacity:1;animation-timing-function:linear;}14.6855%{offset-distance:100%;opacity:1;}14.6955%{opacity:0;}100%{offset-distance:0%;opacity:0;}}.b-e9bc8fb5 .bt0-e9bc8fb5{animation:kt0-e9bc8fb5 10.2s linear infinite;}@keyframes kt0-e9bc8fb5{0%{stroke-dashoffset:314.6;}0%{stroke-dashoffset:314.6;animation-timing-function:linear;}14.6855%{stroke-dashoffset:0;}80.3945%{stroke-dashoffset:0;}80.4045%{stroke-dashoffset:314.6;}100%{stroke-dashoffset:314.6;}}.b-e9bc8fb5 .bp1-e9bc8fb5{animation:kp1-e9bc8fb5 10.2s linear infinite;}@keyframes kp1-e9bc8fb5{0%{offset-distance:0%;opacity:0;}20.5571%{opacity:0;}20.5671%{offset-distance:0%;opacity:1;animation-timing-function:linear;}33.1146%{offset-distance:100%;opacity:1;}33.1246%{opacity:0;}100%{offset-distance:0%;opacity:0;}}.b-e9bc8fb5 .bt1-e9bc8fb5{animation:kt1-e9bc8fb5 10.2s linear infinite;}@keyframes kt1-e9bc8fb5{0%{stroke-dashoffset:268.8;}20.5671%{stroke-dashoffset:268.8;animation-timing-function:linear;}33.1146%{stroke-dashoffset:0;}80.3945%{stroke-dashoffset:0;}80.4045%{stroke-dashoffset:268.8;}100%{stroke-dashoffset:268.8;}}.b-e9bc8fb5 .bp2-e9bc8fb5{animation:kp2-e9bc8fb5 10.2s linear infinite;}@keyframes kp2-e9bc8fb5{0%{offset-distance:0%;opacity:0;}38.9863%{opacity:0;}38.9963%{offset-distance:0%;opacity:1;animation-timing-function:linear(0 0%, 0.187 6.67%, 0.349 13.33%, 0.488 20%, 0.6056 26.67%, 0.7037 33.33%, 0.784 40%, 0.8483 46.67%, 0.8984 53.33%, 0.936 60%, 0.963 66.67%, 0.981 73.33%, 0.992 80%, 0.9976 86.67%, 0.9997 93.33%, 1 100%);}47.2306%{offset-distance:100%;opacity:1;}47.2406%{opacity:0;}100%{offset-distance:0%;opacity:0;}}.b-e9bc8fb5 .bt2-e9bc8fb5{animation:kt2-e9bc8fb5 10.2s linear infinite;}@keyframes kt2-e9bc8fb5{0%{stroke-dashoffset:268.8;}38.9963%{stroke-dashoffset:268.8;animation-timing-function:linear(0 0%, 0.187 6.67%, 0.349 13.33%, 0.488 20%, 0.6056 26.67%, 0.7037 33.33%, 0.784 40%, 0.8483 46.67%, 0.8984 53.33%, 0.936 60%, 0.963 66.67%, 0.981 73.33%, 0.992 80%, 0.9976 86.67%, 0.9997 93.33%, 1 100%);}47.2306%{stroke-dashoffset:0;}80.3945%{stroke-dashoffset:0;}80.4045%{stroke-dashoffset:268.8;}100%{stroke-dashoffset:268.8;}}.b-e9bc8fb5 .bp3-e9bc8fb5{animation:kp3-e9bc8fb5 10.2s linear infinite;}@keyframes kp3-e9bc8fb5{0%{offset-distance:0%;opacity:0;}53.1022%{opacity:0;}53.1122%{offset-distance:0%;opacity:1;animation-timing-function:linear(0 0%, 0.187 6.67%, 0.349 13.33%, 0.488 20%, 0.6056 26.67%, 0.7037 33.33%, 0.784 40%, 0.8483 46.67%, 0.8984 53.33%, 0.936 60%, 0.963 66.67%, 0.981 73.33%, 0.992 80%, 0.9976 86.67%, 0.9997 93.33%, 1 100%);}62.7496%{offset-distance:100%;opacity:1;}62.7596%{opacity:0;}100%{offset-distance:0%;opacity:0;}}.b-e9bc8fb5 .bt3-e9bc8fb5{animation:kt3-e9bc8fb5 10.2s linear infinite;}@keyframes kt3-e9bc8fb5{0%{stroke-dashoffset:314.6;}53.1122%{stroke-dashoffset:314.6;animation-timing-function:linear(0 0%, 0.187 6.67%, 0.349 13.33%, 0.488 20%, 0.6056 26.67%, 0.7037 33.33%, 0.784 40%, 0.8483 46.67%, 0.8984 53.33%, 0.936 60%, 0.963 66.67%, 0.981 73.33%, 0.992 80%, 0.9976 86.67%, 0.9997 93.33%, 1 100%);}62.7496%{stroke-dashoffset:0;}80.3945%{stroke-dashoffset:0;}80.4045%{stroke-dashoffset:314.6;}100%{stroke-dashoffset:314.6;}}.b-e9bc8fb5 .bn1-e9bc8fb5 .beck-fx-node{animation:kn1-e9bc8fb5 10.2s linear infinite;}@keyframes kn1-e9bc8fb5{0%{transform:none;}14.6855%{transform:none;animation-timing-function:linear(0 0%, 0.2557 3.33%, 0.4834 6.67%, 0.6845 10%, 0.8603 13.33%, 1.0121 16.67%, 1.1414 20%, 1.2495 23.33%, 1.3377 26.67%, 1.4074 30%, 1.46 33.33%, 1.4967 36.67%, 1.5191 40%, 1.5284 43.33%, 1.5259 46.67%, 1.4913 53.33%, 1.4261 60%, 1.3411 66.67%, 1.2472 73.33%, 1.1554 80%, 1.0763 86.67%, 1.0209 93.33%, 1 100%);}16.4499%{transform:translateY(-2px) scale(1.04);animation-timing-function:linear(0 0%, 0.1286 1.67%, 0.2749 3.33%, 0.5785 6.67%, 0.7194 8.33%, 0.8455 10%, 0.9534 11.67%, 1.0415 13.33%, 1.1093 15%, 1.1575 16.67%, 1.1878 18.33%, 1.2023 20%, 1.2035 21.67%, 1.1941 23.33%, 1.154 26.67%, 1.0496 33.33%, 1.0082 36.67%, 0.9807 40%, 0.9668 43.33%, 0.964 46.67%, 0.9773 53.33%, 0.9952 60%, 1.0049 66.67%, 1.0061 73.33%, 1.0032 80%, 1.0003 86.67%, 0.999 93.33%, 1 100%);}20.5671%{transform:none;}47.2306%{transform:none;animation-timing-function:linear(0 0%, 0.2557 3.33%, 0.4834 6.67%, 0.6845 10%, 0.8603 13.33%, 1.0121 16.67%, 1.1414 20%, 1.2495 23.33%, 1.3377 26.67%, 1.4074 30%, 1.46 33.33%, 1.4967 36.67%, 1.5191 40%, 1.5284 43.33%, 1.5259 46.67%, 1.4913 53.33%, 1.4261 60%, 1.3411 66.67%, 1.2472 73.33%, 1.1554 80%, 1.0763 86.67%, 1.0209 93.33%, 1 100%);}48.9951%{transform:translateY(-2px) scale(1.04);animation-timing-function:linear(0 0%, 0.1286 1.67%, 0.2749 3.33%, 0.5785 6.67%, 0.7194 8.33%, 0.8455 10%, 0.9534 11.67%, 1.0415 13.33%, 1.1093 15%, 1.1575 16.67%, 1.1878 18.33%, 1.2023 20%, 1.2035 21.67%, 1.1941 23.33%, 1.154 26.67%, 1.0496 33.33%, 1.0082 36.67%, 0.9807 40%, 0.9668 43.33%, 0.964 46.67%, 0.9773 53.33%, 0.9952 60%, 1.0049 66.67%, 1.0061 73.33%, 1.0032 80%, 1.0003 86.67%, 0.999 93.33%, 1 100%);}53.1122%{transform:none;}100%{transform:none;}}.b-e9bc8fb5 .bn2-e9bc8fb5 .beck-fx-node{animation:kn2-e9bc8fb5 10.2s linear infinite;}@keyframes kn2-e9bc8fb5{0%{transform:none;}33.1146%{transform:none;animation-timing-function:linear(0 0%, 0.2557 3.33%, 0.4834 6.67%, 0.6845 10%, 0.8603 13.33%, 1.0121 16.67%, 1.1414 20%, 1.2495 23.33%, 1.3377 26.67%, 1.4074 30%, 1.46 33.33%, 1.4967 36.67%, 1.5191 40%, 1.5284 43.33%, 1.5259 46.67%, 1.4913 53.33%, 1.4261 60%, 1.3411 66.67%, 1.2472 73.33%, 1.1554 80%, 1.0763 86.67%, 1.0209 93.33%, 1 100%);}34.8791%{transform:translateY(-2px) scale(1.04);animation-timing-function:linear(0 0%, 0.1286 1.67%, 0.2749 3.33%, 0.5785 6.67%, 0.7194 8.33%, 0.8455 10%, 0.9534 11.67%, 1.0415 13.33%, 1.1093 15%, 1.1575 16.67%, 1.1878 18.33%, 1.2023 20%, 1.2035 21.67%, 1.1941 23.33%, 1.154 26.67%, 1.0496 33.33%, 1.0082 36.67%, 0.9807 40%, 0.9668 43.33%, 0.964 46.67%, 0.9773 53.33%, 0.9952 60%, 1.0049 66.67%, 1.0061 73.33%, 1.0032 80%, 1.0003 86.67%, 0.999 93.33%, 1 100%);}38.9963%{transform:none;}100%{transform:none;}}.b-e9bc8fb5 .bn0-e9bc8fb5 .beck-fx-node{animation:kn0-e9bc8fb5 10.2s linear infinite;}@keyframes kn0-e9bc8fb5{0%{transform:none;}62.7496%{transform:none;animation-timing-function:linear(0 0%, 0.2557 3.33%, 0.4834 6.67%, 0.6845 10%, 0.8603 13.33%, 1.0121 16.67%, 1.1414 20%, 1.2495 23.33%, 1.3377 26.67%, 1.4074 30%, 1.46 33.33%, 1.4967 36.67%, 1.5191 40%, 1.5284 43.33%, 1.5259 46.67%, 1.4913 53.33%, 1.4261 60%, 1.3411 66.67%, 1.2472 73.33%, 1.1554 80%, 1.0763 86.67%, 1.0209 93.33%, 1 100%);}64.514%{transform:translateY(-2px) scale(1.04);animation-timing-function:linear(0 0%, 0.1286 1.67%, 0.2749 3.33%, 0.5785 6.67%, 0.7194 8.33%, 0.8455 10%, 0.9534 11.67%, 1.0415 13.33%, 1.1093 15%, 1.1575 16.67%, 1.1878 18.33%, 1.2023 20%, 1.2035 21.67%, 1.1941 23.33%, 1.154 26.67%, 1.0496 33.33%, 1.0082 36.67%, 0.9807 40%, 0.9668 43.33%, 0.964 46.67%, 0.9773 53.33%, 0.9952 60%, 1.0049 66.67%, 1.0061 73.33%, 1.0032 80%, 1.0003 86.67%, 0.999 93.33%, 1 100%);}68.6312%{transform:none;}100%{transform:none;}}.b-e9bc8fb5 .brip0-e9bc8fb5{animation:krip0-e9bc8fb5 10.2s linear infinite;}@keyframes krip0-e9bc8fb5{0%{opacity:0;transform:scale(1);}14.6755%{opacity:0;transform:scale(1);}14.6855%{opacity:0.6;transform:scale(1);animation-timing-function:linear(0 0%, 0.187 6.67%, 0.349 13.33%, 0.488 20%, 0.6056 26.67%, 0.7037 33.33%, 0.784 40%, 0.8483 46.67%, 0.8984 53.33%, 0.936 60%, 0.963 66.67%, 0.981 73.33%, 0.992 80%, 0.9976 86.67%, 0.9997 93.33%, 1 100%);}19.3908%{opacity:0;transform:scale(1.15);}100%{opacity:0;transform:scale(1);}}.b-e9bc8fb5 .brip1-e9bc8fb5{animation:krip1-e9bc8fb5 10.2s linear infinite;}@keyframes krip1-e9bc8fb5{0%{opacity:0;transform:scale(1);}33.1046%{opacity:0;transform:scale(1);}33.1146%{opacity:0.6;transform:scale(1);animation-timing-function:linear(0 0%, 0.187 6.67%, 0.349 13.33%, 0.488 20%, 0.6056 26.67%, 0.7037 33.33%, 0.784 40%, 0.8483 46.67%, 0.8984 53.33%, 0.936 60%, 0.963 66.67%, 0.981 73.33%, 0.992 80%, 0.9976 86.67%, 0.9997 93.33%, 1 100%);}37.8199%{opacity:0;transform:scale(1.15);}100%{opacity:0;transform:scale(1);}}.b-e9bc8fb5 .brip2-e9bc8fb5{animation:krip2-e9bc8fb5 10.2s linear infinite;}@keyframes krip2-e9bc8fb5{0%{opacity:0;transform:scale(1);}47.2206%{opacity:0;transform:scale(1);}47.2306%{opacity:0.6;transform:scale(1);animation-timing-function:linear(0 0%, 0.187 6.67%, 0.349 13.33%, 0.488 20%, 0.6056 26.67%, 0.7037 33.33%, 0.784 40%, 0.8483 46.67%, 0.8984 53.33%, 0.936 60%, 0.963 66.67%, 0.981 73.33%, 0.992 80%, 0.9976 86.67%, 0.9997 93.33%, 1 100%);}51.9359%{opacity:0;transform:scale(1.15);}100%{opacity:0;transform:scale(1);}}.b-e9bc8fb5 .brip3-e9bc8fb5{animation:krip3-e9bc8fb5 10.2s linear infinite;}@keyframes krip3-e9bc8fb5{0%{opacity:0;transform:scale(1);}62.7396%{opacity:0;transform:scale(1);}62.7496%{opacity:0.6;transform:scale(1);animation-timing-function:linear(0 0%, 0.187 6.67%, 0.349 13.33%, 0.488 20%, 0.6056 26.67%, 0.7037 33.33%, 0.784 40%, 0.8483 46.67%, 0.8984 53.33%, 0.936 60%, 0.963 66.67%, 0.981 73.33%, 0.992 80%, 0.9976 86.67%, 0.9997 93.33%, 1 100%);}67.4549%{opacity:0;transform:scale(1.15);}100%{opacity:0;transform:scale(1);}}.b-e9bc8fb5 .beck-msg path{opacity:0.15;}.b-e9bc8fb5 .beck-msg-chip,.b-e9bc8fb5 .beck-msg-text{opacity:0.35;}.b-e9bc8fb5 .beck-band{opacity:0.45;}.b-e9bc8fb5 .beck-activation{opacity:0.25;}.b-e9bc8fb5 .beck-msg[data-msg="msg0"] path{animation:kchl0-e9bc8fb5 10.2s linear infinite;}@keyframes kchl0-e9bc8fb5{0%{opacity:0.15;}0%{opacity:0.15;}2.4507%{opacity:1;}73.0424%{opacity:1;}78.9241%{opacity:0.15;}100%{opacity:0.15;}}.b-e9bc8fb5 .beck-msg[data-msg="msg0"] .beck-msg-chip,.b-e9bc8fb5 .beck-msg[data-msg="msg0"] .beck-msg-text{animation:kcht0-e9bc8fb5 10.2s linear infinite;}@keyframes kcht0-e9bc8fb5{0%{opacity:0.35;}0%{opacity:0.35;}2.4507%{opacity:1;}73.0424%{opacity:1;}78.9241%{opacity:0.35;}100%{opacity:0.35;}}.b-e9bc8fb5 .beck-msg[data-msg="msg1"] path{animation:kchl1-e9bc8fb5 10.2s linear infinite;}@keyframes kchl1-e9bc8fb5{0%{opacity:0.15;}20.5571%{opacity:0.15;}20.5671%{opacity:0.15;}23.0178%{opacity:1;}73.0424%{opacity:1;}78.9241%{opacity:0.15;}100%{opacity:0.15;}}.b-e9bc8fb5 .beck-msg[data-msg="msg1"] .beck-msg-chip,.b-e9bc8fb5 .beck-msg[data-msg="msg1"] .beck-msg-text{animation:kcht1-e9bc8fb5 10.2s linear infinite;}@keyframes kcht1-e9bc8fb5{0%{opacity:0.35;}20.5571%{opacity:0.35;}20.5671%{opacity:0.35;}23.0178%{opacity:1;}73.0424%{opacity:1;}78.9241%{opacity:0.35;}100%{opacity:0.35;}}.b-e9bc8fb5 .beck-msg[data-msg="msg2"] path{animation:kchl2-e9bc8fb5 10.2s linear infinite;}@keyframes kchl2-e9bc8fb5{0%{opacity:0.15;}38.9863%{opacity:0.15;}38.9963%{opacity:0.15;}41.447%{opacity:1;}73.0424%{opacity:1;}78.9241%{opacity:0.15;}100%{opacity:0.15;}}.b-e9bc8fb5 .beck-msg[data-msg="msg2"] .beck-msg-chip,.b-e9bc8fb5 .beck-msg[data-msg="msg2"] .beck-msg-text{animation:kcht2-e9bc8fb5 10.2s linear infinite;}@keyframes kcht2-e9bc8fb5{0%{opacity:0.35;}38.9863%{opacity:0.35;}38.9963%{opacity:0.35;}41.447%{opacity:1;}73.0424%{opacity:1;}78.9241%{opacity:0.35;}100%{opacity:0.35;}}.b-e9bc8fb5 .beck-msg[data-msg="msg3"] path{animation:kchl3-e9bc8fb5 10.2s linear infinite;}@keyframes kchl3-e9bc8fb5{0%{opacity:0.15;}53.1022%{opacity:0.15;}53.1122%{opacity:0.15;}55.5629%{opacity:1;}73.0424%{opacity:1;}78.9241%{opacity:0.15;}100%{opacity:0.15;}}.b-e9bc8fb5 .beck-msg[data-msg="msg3"] .beck-msg-chip,.b-e9bc8fb5 .beck-msg[data-msg="msg3"] .beck-msg-text{animation:kcht3-e9bc8fb5 10.2s linear infinite;}@keyframes kcht3-e9bc8fb5{0%{opacity:0.35;}53.1022%{opacity:0.35;}53.1122%{opacity:0.35;}55.5629%{opacity:1;}73.0424%{opacity:1;}78.9241%{opacity:0.35;}100%{opacity:0.35;}}.b-e9bc8fb5 .beck-activation[data-bar="0"]{animation:kcha0-e9bc8fb5 10.2s linear infinite;}@keyframes kcha0-e9bc8fb5{0%{opacity:0.25;}13.205%{opacity:0.25;}13.215%{opacity:0.25;}16.1559%{opacity:1;}62.7496%{opacity:1;}66.1805%{opacity:0.25;}100%{opacity:0.25;}}.b-e9bc8fb5 .beck-activation[data-bar="1"]{animation:kcha1-e9bc8fb5 10.2s linear infinite;}@keyframes kcha1-e9bc8fb5{0%{opacity:0.25;}31.6342%{opacity:0.25;}31.6442%{opacity:0.25;}34.585%{opacity:1;}47.2306%{opacity:1;}50.6615%{opacity:0.25;}100%{opacity:0.25;}}}POST /ordersINSERTok201 CreatedWeb AppOrders APIPostgres
## Tune a fence with flags

 
A comma-separated tail after the language adjusts one fence without touching its YAML. Flags combine: `beck:symbol,static` works.

 
### Freeze the animation — `beck,static`

 
To show the fully-revealed final frame with no motion, add `static`. Useful when several diagrams share a page and only one should draw the eye.

 
### Drive playback from scroll — `beck,scrub`

 
`scrub` binds the choreography to scroll position instead of a looping timeline: the diagram plays as the reader scrolls it through the viewport.

 
### Override the style — `beck,style=sketch`

 
`style=<name>` overrides the document's own `meta.style`, so one YAML snippet can render in any of Beck's built-in looks:

 
.b-7ce774c7{--beck-surface:var(--color-base-50, #fbf7ef);--beck-node-bg:var(--beck-surface);--beck-node-border:var(--color-base-300, #d8cdb8);--beck-node-shadow:0 1px 2px rgb(80 64 32 / 0.06), 0 4px 10px rgb(80 64 32 / 0.07);--beck-text:var(--color-base-800, #40382c);--beck-text-muted:var(--color-base-500, #7a6f5c);--beck-text-faint:var(--color-base-400, #a89c86);--beck-primary:var(--color-primary-600, #5145d8);--beck-success:var(--color-emerald-500, #10b981);--beck-warn:var(--color-amber-500, #f59e0b);--beck-danger:var(--color-red-500, #ef4444);--beck-info:var(--color-violet-500, #8b5cf6);--beck-neutral:var(--color-base-400, #a89c86);--beck-group-border:color-mix(in srgb, var(--beck-neutral) 45%, transparent);--beck-group-label:var(--beck-text-muted);--beck-edge:var(--beck-text-muted);--beck-packet:var(--beck-primary);--beck-icon-bg:var(--color-base-100, #f3ecdd);--beck-accent:var(--beck-primary);--beck-font:'Shantell Sans', 'Comic Sans MS', cursive;--beck-font-mono:'IBM Plex Mono', ui-monospace, monospace;}[data-theme='dark'] .b-7ce774c7{--beck-surface:var(--color-base-950, #1c1815);--beck-node-border:var(--color-base-700, #453b2e);--beck-node-shadow:0 1px 3px rgb(0 0 0 / 0.4), 0 4px 14px rgb(0 0 0 / 0.5);--beck-text:var(--color-base-50, #f5efe2);--beck-text-muted:var(--color-base-400, #b3a893);--beck-text-faint:var(--color-base-500, #857a66);--beck-icon-bg:var(--color-base-800, #2f271d);--beck-font:'Shantell Sans', 'Comic Sans MS', cursive;--beck-font-mono:'IBM Plex Mono', ui-monospace, monospace;}@media (prefers-color-scheme: dark){:root:not([data-theme='light']) .b-7ce774c7{--beck-surface:var(--color-base-950, #1c1815);--beck-node-border:var(--color-base-700, #453b2e);--beck-node-shadow:0 1px 3px rgb(0 0 0 / 0.4), 0 4px 14px rgb(0 0 0 / 0.5);--beck-text:var(--color-base-50, #f5efe2);--beck-text-muted:var(--color-base-400, #b3a893);--beck-text-faint:var(--color-base-500, #857a66);--beck-icon-bg:var(--color-base-800, #2f271d);--beck-font:'Shantell Sans', 'Comic Sans MS', cursive;--beck-font-mono:'IBM Plex Mono', ui-monospace, monospace;}}.b-7ce774c7{font-family:var(--beck-font);}.b-7ce774c7 .beck-fx-node{transform-box:fill-box;transform-origin:center;}.b-7ce774c7 .beck-packet-label{font-family:var(--beck-font-mono);font-size:11px;font-weight:600;}.b-7ce774c7 .beck-node{fill:var(--beck-node-bg);stroke:color-mix(in srgb, var(--beck-accent) 100%, var(--beck-node-border));stroke-width:2;filter:drop-shadow(0 2px 3px rgb(90 70 35/.10));}[data-theme='dark'] .b-7ce774c7 .beck-node{filter:drop-shadow(0 2px 4px rgb(0 0 0/.45));}@media (prefers-color-scheme: dark){:root:not([data-theme='light']) .b-7ce774c7 .beck-node{filter:drop-shadow(0 2px 4px rgb(0 0 0/.45));}}.b-7ce774c7 .beck-node--external{stroke-dasharray:5 4;}.b-7ce774c7 .beck-node--subtle{opacity:.72;}.b-7ce774c7 .beck-node--ghost{fill:transparent;stroke-dasharray:5 4;filter:none;}.b-7ce774c7 .beck-icon-chip{fill:color-mix(in srgb, var(--beck-accent) 15%, var(--beck-icon-bg));}.b-7ce774c7 .beck-node--ghost .beck-icon-chip{fill:transparent;}.b-7ce774c7 .beck-icon{color:var(--beck-accent);}.b-7ce774c7 .beck-node-title{fill:var(--beck-text);}.b-7ce774c7 .beck-node-subtitle,.b-7ce774c7 .beck-ghost-label{fill:var(--beck-text-muted);}.b-7ce774c7 .beck-status-inline{fill:var(--beck-accent);}.b-7ce774c7 .beck-status-bg{fill:color-mix(in srgb, var(--beck-accent) 14%, transparent);}.b-7ce774c7 .beck-status-text{fill:var(--beck-accent);}.b-7ce774c7 .beck-group{fill:none;stroke:var(--beck-group-border);stroke-width:2;stroke-dasharray:6 6;}.b-7ce774c7 .beck-group-label-bg{fill:var(--beck-surface);}.b-7ce774c7 .beck-group-label{fill:var(--beck-group-label);}.b-7ce774c7 .beck-node--start{fill:var(--beck-text-muted);}.b-7ce774c7 .beck-node--end{fill:none;stroke:var(--beck-text-muted);stroke-width:2;}.b-7ce774c7 .beck-end-dot{fill:var(--beck-text-muted);}.b-7ce774c7 .beck-class-head{fill:color-mix(in srgb, var(--beck-accent) 0%, transparent);}.b-7ce774c7 .beck-class-head-border{stroke:color-mix(in srgb, var(--beck-accent) 100%, var(--beck-node-border));stroke-width:1.4;}.b-7ce774c7 .beck-class-divider{stroke:var(--beck-node-border);stroke-width:1.4;}.b-7ce774c7 .beck-class-stereo{fill:var(--beck-text-muted);}.b-7ce774c7 .beck-class-title{fill:var(--beck-text);}.b-7ce774c7 .beck-class-field{fill:var(--beck-text-muted);}.b-7ce774c7 .beck-class-method{fill:var(--beck-text);}.b-7ce774c7 .beck-lifeline{stroke-width:1.2;stroke-dasharray:4 6;}.b-7ce774c7 .beck-activation{filter:drop-shadow(0 0 5px color-mix(in srgb, var(--beck-accent) 0%, transparent));}.b-7ce774c7 .beck-msg-chip{fill:var(--beck-node-bg);stroke:color-mix(in srgb, var(--beck-accent) 0%, transparent);stroke-width:1.4;}.b-7ce774c7 .beck-msg-text{fill:color-mix(in srgb, var(--beck-accent) 34%, var(--beck-text));}.b-7ce774c7 .beck-msg--reply .beck-msg-chip{stroke:none;}.b-7ce774c7 .beck-msg--reply .beck-msg-text,.b-7ce774c7 .beck-msg-text--bare{fill:var(--beck-text-muted);}.b-7ce774c7 .beck-band-box{fill:color-mix(in srgb, var(--beck-accent) 5%, transparent);stroke:color-mix(in srgb, var(--beck-accent) 30%, transparent);stroke-width:1.6;stroke-dasharray:6 6;}.b-7ce774c7 .beck-band-chip{fill:var(--beck-surface);stroke:color-mix(in srgb, var(--beck-accent) 0%, transparent);stroke-width:1.4;}.b-7ce774c7 .beck-band-label{fill:color-mix(in srgb, var(--beck-accent) 70%, var(--beck-text));}.b-7ce774c7 .beck-edge{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}.b-7ce774c7 .beck-edge-label{fill:var(--beck-text-muted);paint-order:stroke;stroke:var(--beck-surface);stroke-width:3px;stroke-linejoin:round;}.b-7ce774c7 .beck-title{fill:var(--beck-text);}.b-7ce774c7 .beck-subtitle{fill:var(--beck-text-muted);}.b-7ce774c7 .beck-node-title{fill:var(--beck-accent);}.b-7ce774c7 .beck-class-title{fill:var(--beck-accent);}.b-7ce774c7 .beck-class-divider{stroke:color-mix(in srgb, var(--beck-accent) 100%, var(--beck-node-border));}.b-7ce774c7 .beck-scribble{fill:none;stroke:var(--beck-accent);stroke-linecap:round;stroke-linejoin:round;opacity:.34;filter:url(#beck-crayon-7ce774c7);}queryAPI GatewayOrdersPostgres
 
An unknown style name warns in the diagnostics and renders the document with its own style unchanged.

 
## Render a diagram from a file — `beck:symbol`

 
When a diagram should appear as both highlighted source and a live render, keep it in one `.beck.yaml` file and reference it from two fences — the same DRY convention as the tree-sitter `:symbol` source embeds:

 
````markdown
```yaml:symbol
diagrams/checkout.beck.yaml
```

```beck:symbol
diagrams/checkout.beck.yaml
```
````

 
The fence body is one file path per line; each file renders as its own diagram, and one malformed file shows its own error box without dropping the rest. Paths resolve against `BeckOptions.ContentRoot`, which defaults to the working directory — set it to match your tree-sitter `ContentRoot` so both `:symbol` forms address files the same way:

 
```csharp
builder.Services.AddPenningtonBeck(beck =>
{
    beck.ContentRoot = "../..";
});
```

 
## Configure the render

 
`BeckOptions.RenderOptions` is the base `SvgRenderOptions` applied to every fence: fonts, an exact text measurer, a site-wide default style, custom style registrations. By default Beck measures text with its embedded font-metrics tables and emits a `textLength` guard on every label, so a font mismatch compresses glyphs slightly instead of breaking layout. To size cards against your site's exact fonts, reference the optional `Beck.Skia` package and supply a measurer:

 
```csharp
var font = new BeckFontSpec
{
    Family = "Lexend",
    Files = new Dictionary<int, string> { [400] = "fonts/Lexend-Regular.ttf" },
};
  
builder.Services.AddPenningtonBeck(beck =>
{
    beck.RenderOptions = new SvgRenderOptions
    {
        Font = font,
        Measurer = new SkiaTextMeasurer(font),
    };
});
```

 
## Fullscreen zoom

 
Each rendered embed carries a zoom button — visible on hover, always visible on touch — that opens the diagram in a full-screen lightbox over a dimmed backdrop. Click anywhere or press Escape to close. The package contributes the button, the lightbox script, and their styles automatically; this is its one piece of client JavaScript, and rendering stays server-side. To emit bare SVG with no client behavior, turn it off:

 
```csharp
builder.Services.AddPenningtonBeck(beck =>
{
    beck.Zoom = false;
});
```

 
## What the renderer emits

 
Each fence renders as `<div class="beck-embed"><svg …></div>` — finished HTML that skips the standard code-block chrome. A malformed document fails loud instead of vanishing: the fence renders as `<div class="beck-embed beck-embed--error">` showing the offending YAML, and the failure lands in the per-request diagnostics, so it surfaces in the dev overlay and fails the static build report. Frame the wrapper with your own CSS (`DocSiteOptions.ExtraStyles` on a DocSite host); the SVG itself needs nothing.

 
## Verify

 
 - Open a page with a `beck` fence. It renders as an inline SVG, not a code block, and follows the theme toggle between light and dark.
 - Break a fence's YAML on purpose. The page shows a bordered box with the raw YAML, and `dotnet run -- diag warnings` reports the render failure.
 
 
## Related

 
 - How-to: [Embed a Mermaid diagram in a markdown page](https://usepennington.net/how-to/rich-content/diagrams.md) — the client-side Mermaid alternative
 - Reference: [Code-block argument reference](https://usepennington.net/reference/markdown/code-block-args.md) — the full fence info-string grammar
 - How-to: [Embed focused code samples](https://usepennington.net/how-to/code-samples/focused-code-samples.md) — the tree-sitter `:symbol` embeds the `beck:symbol` form mirrors
 - The [Beck documentation](https://usepennington.github.io/beck/) — YAML grammar, diagram types, styles, and the C# authoring API
 
 
[Previous
                
                Embed a Mermaid diagram in a markdown page](https://usepennington.net/how-to/rich-content/diagrams.md)[Next
                    
                Drop a Razor component into a markdown page](https://usepennington.net/how-to/rich-content/ui-components-in-markdown.md)