Message queue

No. 04 · SVG · Marble run

Drag to set ratetap a drum

A marble run. Two hoppers produce marbles into one sloping lane, the queue, where they wait in order behind an escapement, and three timer drums consume them one at a time.

Prompt

/anatomy explain a message queue with producers and consumers, interactive

Install

npm install anatomy-figures

In your code

page.tsx

import { MessageQueue } from "anatomy-figures";

<MessageQueue theme="light" />

Or load this figure on its own, so the others never download:

page.tsx

import MessageQueue from "anatomy-figures/message-queue";

Theme it

Five themes (dark, light, paper, blueprint, sepia), or your own colours through tokens. Every token.

page.tsx

<MessageQueue
  theme="light"
  tokens={{
    "--anatomy-card": "#ffffff",
    "--anatomy-lit": "#e5484d",
  }}
/>

Without React

index.html

import { define } from "anatomy-figures/element/message-queue";

define();

<anatomy-message-queue theme="light"></anatomy-message-queue>