mach_examples/01-multi-reactor-architecture.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 920 500" font-family="system-ui, -apple-system, sans-serif">
  <defs>
    <marker id="arrow" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
      <path d="M0,0 L8,3 L0,6" fill="#64748b"/>
    </marker>
    <marker id="arrow-amber" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
      <path d="M0,0 L8,3 L0,6" fill="#f59e0b"/>
    </marker>
    <marker id="arrow-emerald" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
      <path d="M0,0 L8,3 L0,6" fill="#10b981"/>
    </marker>
  </defs>

  <!-- Background -->
  <rect width="920" height="500" rx="12" fill="#0f172a"/>

  <!-- Title -->
  <text x="460" y="38" text-anchor="middle" fill="#f8fafc" font-size="18" font-weight="600">Multi-Reactor Architecture</text>

  <!-- HTTP Clients -->
  <rect x="30" y="105" width="120" height="44" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1.5"/>
  <text x="90" y="132" text-anchor="middle" fill="#94a3b8" font-size="13" font-weight="500">HTTP Clients</text>

  <!-- Arrows from clients to request reactors -->
  <line x1="150" y1="117" x2="200" y2="117" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow)"/>
  <line x1="150" y1="127" x2="200" y2="200" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow)"/>
  <line x1="150" y1="137" x2="200" y2="285" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow)"/>

  <!-- Request Reactors Group -->
  <rect x="195" y="72" width="280" height="264" rx="10" fill="none" stroke="#334155" stroke-width="1" stroke-dasharray="6,4"/>
  <text x="335" y="92" text-anchor="middle" fill="#60a5fa" font-size="12" font-weight="600" letter-spacing="0.5">REQUEST REACTORS</text>

  <!-- Request Reactor 0 -->
  <rect x="210" y="104" width="250" height="44" rx="8" fill="#1e3a5f" stroke="#3b82f6" stroke-width="1.5"/>
  <text x="225" y="131" fill="#93c5fd" font-size="11" font-weight="600">Core 0</text>
  <text x="280" y="131" fill="#cbd5e1" font-size="11">event loop</text>
  <rect x="370" y="113" width="80" height="26" rx="5" fill="#1e293b" stroke="#475569" stroke-width="1"/>
  <text x="410" y="131" text-anchor="middle" fill="#94a3b8" font-size="10">pipeline</text>

  <!-- Request Reactor 1 -->
  <rect x="210" y="162" width="250" height="44" rx="8" fill="#1e3a5f" stroke="#3b82f6" stroke-width="1.5"/>
  <text x="225" y="189" fill="#93c5fd" font-size="11" font-weight="600">Core 1</text>
  <text x="280" y="189" fill="#cbd5e1" font-size="11">event loop</text>
  <rect x="370" y="171" width="80" height="26" rx="5" fill="#1e293b" stroke="#475569" stroke-width="1"/>
  <text x="410" y="189" text-anchor="middle" fill="#94a3b8" font-size="10">pipeline</text>

  <!-- Ellipsis dots -->
  <circle cx="335" cy="224" r="2" fill="#475569"/>
  <circle cx="335" cy="234" r="2" fill="#475569"/>
  <circle cx="335" cy="244" r="2" fill="#475569"/>

  <!-- Request Reactor N -->
  <rect x="210" y="258" width="250" height="44" rx="8" fill="#1e3a5f" stroke="#3b82f6" stroke-width="1.5"/>
  <text x="225" y="285" fill="#93c5fd" font-size="11" font-weight="600">Core N</text>
  <text x="280" y="285" fill="#cbd5e1" font-size="11">event loop</text>
  <rect x="370" y="267" width="80" height="26" rx="5" fill="#1e293b" stroke="#475569" stroke-width="1"/>
  <text x="410" y="285" text-anchor="middle" fill="#94a3b8" font-size="10">pipeline</text>

  <!-- Task Reactor Group -->
  <rect x="195" y="365" width="280" height="90" rx="10" fill="none" stroke="#334155" stroke-width="1" stroke-dasharray="6,4"/>
  <text x="335" y="385" text-anchor="middle" fill="#fbbf24" font-size="12" font-weight="600" letter-spacing="0.5">TASK REACTOR</text>

  <rect x="210" y="395" width="250" height="44" rx="8" fill="#422006" stroke="#f59e0b" stroke-width="1.5"/>
  <text x="225" y="422" fill="#fcd34d" font-size="11" font-weight="600">Task</text>
  <text x="260" y="422" fill="#cbd5e1" font-size="11">event loop</text>
  <rect x="370" y="404" width="80" height="26" rx="5" fill="#1e293b" stroke="#475569" stroke-width="1"/>
  <text x="410" y="422" text-anchor="middle" fill="#94a3b8" font-size="10">cron / jobs</text>

  <!-- Task DB -->
  <rect x="30" y="395" width="120" height="44" rx="8" fill="#1e293b" stroke="#f59e0b" stroke-width="1.5"/>
  <text x="90" y="414" text-anchor="middle" fill="#fcd34d" font-size="11" font-weight="600">mach_tasks</text>
  <text x="90" y="429" text-anchor="middle" fill="#94a3b8" font-size="10">database</text>

  <!-- Arrows: task DB to/from task reactor -->
  <line x1="150" y1="410" x2="205" y2="412" stroke="#f59e0b" stroke-width="1.5" marker-end="url(#arrow-amber)"/>
  <line x1="205" y1="424" x2="150" y2="424" stroke="#f59e0b" stroke-width="1.5" marker-end="url(#arrow-amber)"/>

  <!-- ==================== SHARED THREAD POOL ==================== -->
  <rect x="560" y="72" width="330" height="264" rx="10" fill="none" stroke="#334155" stroke-width="1" stroke-dasharray="6,4"/>
  <text x="725" y="96" text-anchor="middle" fill="#34d399" font-size="12" font-weight="600" letter-spacing="0.5">SHARED THREAD POOL</text>

  <!-- Work queue label above queue image -->
  <text x="725" y="118" text-anchor="middle" fill="#6b7280" font-size="10">work queue</text>

  <!-- Queue visualization -->
  <rect x="588" y="126" width="274" height="36" rx="6" fill="#1e293b" stroke="#475569" stroke-width="1"/>
  <!-- Filled queue slots -->
  <rect x="596" y="132" width="24" height="24" rx="4" fill="#064e3b" stroke="#10b981" stroke-width="1"/>
  <rect x="626" y="132" width="24" height="24" rx="4" fill="#064e3b" stroke="#10b981" stroke-width="1"/>
  <rect x="656" y="132" width="24" height="24" rx="4" fill="#064e3b" stroke="#10b981" stroke-width="1"/>
  <rect x="686" y="132" width="24" height="24" rx="4" fill="#064e3b" stroke="#10b981" stroke-width="1"/>
  <!-- Empty queue slots -->
  <rect x="716" y="132" width="24" height="24" rx="4" fill="#0f172a" stroke="#334155" stroke-width="1" stroke-dasharray="3,2"/>
  <rect x="746" y="132" width="24" height="24" rx="4" fill="#0f172a" stroke="#334155" stroke-width="1" stroke-dasharray="3,2"/>
  <rect x="776" y="132" width="24" height="24" rx="4" fill="#0f172a" stroke="#334155" stroke-width="1" stroke-dasharray="3,2"/>
  <rect x="806" y="132" width="24" height="24" rx="4" fill="#0f172a" stroke="#334155" stroke-width="1" stroke-dasharray="3,2"/>
  <rect x="836" y="132" width="18" height="24" rx="4" fill="#0f172a" stroke="#334155" stroke-width="1" stroke-dasharray="3,2"/>

  <!-- Arrows from queue down to threads -->
  <line x1="640" y1="162" x2="640" y2="198" stroke="#475569" stroke-width="1" marker-end="url(#arrow)"/>
  <line x1="740" y1="162" x2="740" y2="198" stroke="#475569" stroke-width="1" marker-end="url(#arrow)"/>
  <line x1="840" y1="162" x2="840" y2="198" stroke="#475569" stroke-width="1" marker-end="url(#arrow)"/>

  <!-- Thread boxes -->
  <rect x="580" y="202" width="110" height="48" rx="6" fill="#064e3b" stroke="#10b981" stroke-width="1.5"/>
  <text x="635" y="231" text-anchor="middle" fill="#6ee7b7" font-size="11" font-weight="500">Thread 1</text>

  <rect x="700" y="202" width="80" height="48" rx="6" fill="#064e3b" stroke="#10b981" stroke-width="1.5"/>
  <text x="740" y="231" text-anchor="middle" fill="#6ee7b7" font-size="11" font-weight="500">Thread 2</text>

  <rect x="790" y="202" width="86" height="48" rx="6" fill="#064e3b" stroke="#10b981" stroke-width="1.5"/>
  <text x="833" y="231" text-anchor="middle" fill="#6ee7b7" font-size="11" font-weight="500">Thread N</text>

  <!-- Result return -->
  <text x="725" y="284" text-anchor="middle" fill="#6b7280" font-size="10">on complete, resumes pipeline on reactor</text>

  <!-- ==================== INVOKE ARROWS ==================== -->
  <!-- Arrow from request reactors to pool -->
  <path d="M 460,184 L 555,150" fill="none" stroke="#10b981" stroke-width="1.5" marker-end="url(#arrow-emerald)" stroke-dasharray="5,3"/>
  <!-- Label above arrow -->
  <text x="492" y="155" fill="#34d399" font-size="10" font-weight="500">invoke()</text>

  <!-- Arrow from task reactor to pool -->
  <path d="M 460,410 Q 530,380 555,300" fill="none" stroke="#10b981" stroke-width="1.5" marker-end="url(#arrow-emerald)" stroke-dasharray="5,3"/>
  <!-- Label right of curve -->
  <text x="538" y="370" fill="#34d399" font-size="10" font-weight="500">invoke()</text>

  <!-- ==================== TASK ARROWS ==================== -->
  <!-- task() from request reactors to task DB -->
  <path d="M 210,316 Q 140,350 100,390" fill="none" stroke="#f59e0b" stroke-width="1.5" marker-end="url(#arrow-amber)" stroke-dasharray="5,3"/>
  <!-- Label left of curve -->
  <text x="120" y="348" fill="#fbbf24" font-size="10" font-weight="500">task()</text>

  <!-- task() from task reactor to task DB (self-enqueue) -->
  <path d="M 210,445 Q 160,470 105,443" fill="none" stroke="#f59e0b" stroke-width="1.5" marker-end="url(#arrow-amber)" stroke-dasharray="5,3"/>
  <!-- Label below curve -->
  <text x="160" y="478" fill="#fbbf24" font-size="10" font-weight="500">task()</text>

</svg>