<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="1180" height="460" viewBox="0 0 1180 460">
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#1b1b1f" />
</marker>
<style>text { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }</style>
</defs>
<rect width="100%" height="100%" fill="#ffffff" />
<rect x="30" y="130" width="200" height="100" rx="8" stroke="#c92a2a" fill="#ffc9c9" stroke-width="2" opacity="1" />
<text x="65" y="171" font-size="16" fill="#000000" opacity="1"><tspan x="65" dy="0">MCP Client</tspan><tspan x="65" dy="19.2">Claude Desktop</tspan><tspan x="65" dy="19.2">Cursor / Codex</tspan></text>
<rect x="330" y="130" width="200" height="100" rx="8" stroke="#1971c2" fill="#a5d8ff" stroke-width="2" opacity="1" />
<text x="365" y="171" font-size="16" fill="#000000" opacity="1"><tspan x="365" dy="0">MCP Server</tspan><tspan x="365" dy="19.2">Node.js (stdio)</tspan><tspan x="365" dy="19.2">14 tools + Zod</tspan></text>
<rect x="630" y="100" width="220" height="160" rx="8" stroke="#e67700" fill="#ffec99" stroke-width="2" opacity="1" />
<text x="660" y="136" font-size="16" fill="#000000" opacity="1"><tspan x="660" dy="0">Canvas Server</tspan><tspan x="660" dy="19.2">Express + Helmet</tspan><tspan x="660" dy="19.2">Rate Limiting</tspan><tspan x="660" dy="19.2">CORS + Auth</tspan><tspan x="660" dy="19.2">Audit Logging</tspan></text>
<rect x="950" y="130" width="200" height="100" rx="8" stroke="#2f9e44" fill="#b2f2bb" stroke-width="2" opacity="1" />
<text x="985" y="171" font-size="16" fill="#000000" opacity="1"><tspan x="985" dy="0">Browser</tspan><tspan x="985" dy="19.2">Excalidraw React</tspan><tspan x="985" dy="19.2">Real-time Sync</tspan></text>
<rect x="680" y="350" width="160" height="80" rx="8" stroke="#7048e8" fill="#d0bfff" stroke-width="2" opacity="1" />
<text x="700" y="386" font-size="16" fill="#000000" opacity="1"><tspan x="700" dy="0">Element Store</tspan><tspan x="700" dy="19.2">Memory or File</tspan></text>
<path d="M 230 180 L 330 180" stroke="#1b1b1f" fill="none" stroke-width="2" opacity="1" marker-end="url(#arrowhead)" />
<text x="255" y="169" font-size="14" fill="#000000" opacity="1"><tspan x="255" dy="0">stdio</tspan></text>
<path d="M 530 180 L 630 180" stroke="#1b1b1f" fill="none" stroke-width="2" opacity="1" marker-end="url(#arrowhead)" />
<text x="540" y="162" font-size="12" fill="#000000" opacity="1"><tspan x="540" dy="0">HTTP + API Key</tspan></text>
<path d="M 850 180 L 950 180" stroke="#1b1b1f" fill="none" stroke-width="2" opacity="1" marker-end="url(#arrowhead)" />
<text x="858" y="162" font-size="12" fill="#000000" opacity="1"><tspan x="858" dy="0">WS + Token</tspan></text>
<path d="M 740 260 L 740 350" stroke="#1b1b1f" fill="none" stroke-width="2" opacity="1" marker-end="url(#arrowhead)" />
<text x="60" y="58" font-size="28" fill="#000000" opacity="1"><tspan x="60" dy="0">excalidraw-mcp-server Architecture</tspan></text>
</svg>
