85 lines
4.3 KiB
XML
85 lines
4.3 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 280">
|
|
<defs>
|
|
<marker id="arrPink" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
|
|
<polygon points="0 0, 8 3, 0 6" fill="#e94560"/>
|
|
</marker>
|
|
<marker id="arrYellow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
|
|
<polygon points="0 0, 8 3, 0 6" fill="#fbbf24"/>
|
|
</marker>
|
|
<marker id="arrGreen" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
|
|
<polygon points="0 0, 8 3, 0 6" fill="#4ade80"/>
|
|
</marker>
|
|
</defs>
|
|
|
|
<!-- Background -->
|
|
<rect width="700" height="280" fill="#1a1a2e"/>
|
|
|
|
<!-- Title -->
|
|
<text x="350" y="28" text-anchor="middle" fill="#e94560" font-family="system-ui" font-size="16" font-weight="bold">Event-Driven Architecture</text>
|
|
|
|
<!-- Aggregator (publisher) -->
|
|
<g transform="translate(50, 70)">
|
|
<rect width="120" height="70" rx="8" fill="#16213e" stroke="#e94560" stroke-width="2"/>
|
|
<text x="60" y="30" text-anchor="middle" fill="#e94560" font-family="system-ui" font-size="12" font-weight="bold">Aggregator</text>
|
|
<text x="60" y="50" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">Publisher</text>
|
|
</g>
|
|
|
|
<!-- Event Stream (center) -->
|
|
<g transform="translate(230, 55)">
|
|
<rect width="200" height="100" rx="8" fill="#0f3460" stroke="#fbbf24" stroke-width="2"/>
|
|
<text x="100" y="25" text-anchor="middle" fill="#fbbf24" font-family="system-ui" font-size="13" font-weight="bold">Event Stream</text>
|
|
<text x="100" y="45" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">Redis Pub/Sub</text>
|
|
|
|
<!-- Topics -->
|
|
<g transform="translate(15, 55)">
|
|
<rect width="80" height="22" rx="4" fill="#16213e"/>
|
|
<text x="40" y="15" text-anchor="middle" fill="#e94560" font-family="monospace" font-size="9">metrics.raw</text>
|
|
</g>
|
|
<g transform="translate(105, 55)">
|
|
<rect width="80" height="22" rx="4" fill="#16213e"/>
|
|
<text x="40" y="15" text-anchor="middle" fill="#fbbf24" font-family="monospace" font-size="9">alerts.*</text>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Subscribers -->
|
|
<g transform="translate(490, 50)">
|
|
<rect width="130" height="50" rx="6" fill="#16213e" stroke="#4ade80" stroke-width="2"/>
|
|
<text x="65" y="22" text-anchor="middle" fill="#4ade80" font-family="system-ui" font-size="11" font-weight="bold">Gateway</text>
|
|
<text x="65" y="38" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="9">WebSocket push</text>
|
|
</g>
|
|
|
|
<g transform="translate(490, 115)">
|
|
<rect width="130" height="50" rx="6" fill="#16213e" stroke="#fbbf24" stroke-width="2"/>
|
|
<text x="65" y="22" text-anchor="middle" fill="#fbbf24" font-family="system-ui" font-size="11" font-weight="bold">Alerts</text>
|
|
<text x="65" y="38" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="9">Threshold check</text>
|
|
</g>
|
|
|
|
<!-- Arrows -->
|
|
<line x1="170" y1="105" x2="225" y2="105" stroke="#e94560" stroke-width="2" marker-end="url(#arrPink)"/>
|
|
<line x1="430" y1="85" x2="485" y2="75" stroke="#4ade80" stroke-width="2" marker-end="url(#arrGreen)"/>
|
|
<line x1="430" y1="115" x2="485" y2="140" stroke="#fbbf24" stroke-width="2" marker-end="url(#arrYellow)"/>
|
|
|
|
<!-- Benefits box -->
|
|
<g transform="translate(50, 180)">
|
|
<rect width="600" height="80" rx="8" fill="#0f3460"/>
|
|
<text x="20" y="25" fill="#eee" font-family="system-ui" font-size="12" font-weight="bold">Benefits:</text>
|
|
|
|
<g transform="translate(20, 40)">
|
|
<circle cx="6" cy="6" r="4" fill="#4ade80"/>
|
|
<text x="16" y="10" fill="#a0a0a0" font-family="system-ui" font-size="10">Decoupled services - can restart independently</text>
|
|
</g>
|
|
<g transform="translate(20, 58)">
|
|
<circle cx="6" cy="6" r="4" fill="#4ade80"/>
|
|
<text x="16" y="10" fill="#a0a0a0" font-family="system-ui" font-size="10">Easy to add new subscribers without changing publisher</text>
|
|
</g>
|
|
<g transform="translate(320, 40)">
|
|
<circle cx="6" cy="6" r="4" fill="#4ade80"/>
|
|
<text x="16" y="10" fill="#a0a0a0" font-family="system-ui" font-size="10">Abstraction allows switching backends (Kafka)</text>
|
|
</g>
|
|
<g transform="translate(320, 58)">
|
|
<circle cx="6" cy="6" r="4" fill="#4ade80"/>
|
|
<text x="16" y="10" fill="#a0a0a0" font-family="system-ui" font-size="10">Natural audit trail of all events</text>
|
|
</g>
|
|
</g>
|
|
</svg>
|