File: components/mdx/ArchitectureDiagram.tsx

<ArchitectureDiagram
  title="3-tier"
  nodes={[
    { id: "lb", label: "LB", type: "cloud", x: 50, y: 15 },
    { id: "app", label: "App", type: "server", x: 50, y: 45 },
    { id: "db", label: "DB", type: "database", x: 50, y: 80 },
  ]}
  connections={[
    { from: "lb", to: "app", label: "HTTP" },
    { from: "app", to: "db", label: "SQL" },
  ]}
/>

File: components/mdx/SequenceDiagram.tsx

Time is a 0..100 scale used to vertically place messages. Replies should reverse from and to.

<SequenceDiagram
  title="Request/ACK"
  actors={[
    { id: "a", label: "Client" },
    { id: "b", label: "Server" },
  ]}
  messages={[
    { from: "a", to: "b", label: "Request", time: 20 },
    { from: "b", to: "a", label: "ACK", type: "response", time: 45 },
  ]}
/>

File: components/mdx/ModelDiagram.tsx

Use this for ML pipelines, encoder/decoder flows, and transformer blocks.

<ModelDiagram
  title="Encoder-Decoder"
  nodes={[
    { id: "in", label: "Input", x: 90, y: 160, kind: "input" },
    { id: "enc", label: "Encoder", x: 280, y: 120, kind: "encoder" },
    { id: "attn", label: "Cross Attn", x: 460, y: 200, kind: "attention" },
    { id: "dec", label: "Decoder", x: 640, y: 200, kind: "decoder" },
    { id: "out", label: "Output", x: 800, y: 200, kind: "output" },
  ]}
  edges={[
    { from: "in", to: "enc" },
    { from: "enc", to: "attn", label: "K,V" },
    { from: "attn", to: "dec", label: "context" },
    { from: "dec", to: "out", label: "logits" },
  ]}
/>