mcp-diagram.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg width="800px" height="400px" viewBox="0 0 800 400" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <style>
        .box {
            fill: white;
            stroke: #4a6cf7;
            stroke-width: 2;
            rx: 8;
            ry: 8;
        }
        .title {
            font-family: 'Arial', sans-serif;
            font-size: 18px;
            font-weight: bold;
            text-anchor: middle;
        }
        .description {
            font-family: 'Arial', sans-serif;
            font-size: 12px;
            text-anchor: middle;
        }
        .arrow {
            stroke: #7e53f1;
            stroke-width: 2;
            fill: none;
            marker-end: url(#arrowhead);
        }
        .data-source {
            fill: #f5f5f5;
            stroke: #666666;
            stroke-width: 1;
            rx: 8;
            ry: 8;
        }
        .label {
            font-family: 'Arial', sans-serif;
            font-size: 14px;
            font-weight: bold;
        }
        .sublabel {
            font-family: 'Arial', sans-serif;
            font-size: 11px;
            fill: #666;
        }
    </style>
    
    <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="#7e53f1" />
        </marker>
    </defs>
    
    <!-- Title -->
    <text x="400" y="30" font-family="Arial" font-size="24" font-weight="bold" text-anchor="middle">Model Context Protocol Architecture</text>
    
    <!-- MCP Host: AI Application -->
    <rect x="50" y="80" width="160" height="100" class="box" fill="#E6F0FF" />
    <text x="130" y="110" class="title">MCP Host</text>
    <text x="130" y="130" class="description">AI Application</text>
    <text x="130" y="150" class="description">(Claude, ChatGPT, etc.)</text>
    
    <!-- MCP Client -->
    <rect x="320" y="80" width="160" height="100" class="box" fill="#E6ECFF" />
    <text x="400" y="110" class="title">MCP Client</text>
    <text x="400" y="130" class="description">Protocol Client</text>
    <text x="400" y="150" class="description">JSON-RPC 2.0</text>
    
    <!-- MCP Server -->
    <rect x="590" y="80" width="160" height="100" class="box" fill="#E6E6FF" />
    <text x="670" y="110" class="title">MCP Server</text>
    <text x="670" y="130" class="description">Tool/Resource Provider</text>
    <text x="670" y="150" class="description">Capability Definitions</text>
    
    <!-- Data Sources -->
    <rect x="540" y="250" width="120" height="60" class="data-source" />
    <text x="600" y="280" class="title" font-size="16">Database</text>
    
    <rect x="680" y="250" width="120" height="60" class="data-source" />
    <text x="740" y="280" class="title" font-size="16">API</text>
    
    <rect x="610" y="330" width="120" height="60" class="data-source" />
    <text x="670" y="360" class="title" font-size="16">Local Files</text>
    
    <!-- Connections -->
    <path d="M 210 130 L 320 130" class="arrow" />
    <path d="M 480 130 L 590 130" class="arrow" />
    <path d="M 670 180 L 670 230 L 600 230 L 600 250" class="arrow" />
    <path d="M 670 180 L 670 230 L 740 230 L 740 250" class="arrow" />
    <path d="M 670 180 L 670 330" class="arrow" />
    
    <!-- Connection Labels -->
    <text x="265" y="120" class="label">Request</text>
    <text x="265" y="135" class="sublabel">Query/Command</text>
    
    <text x="535" y="120" class="label">Execute</text>
    <text x="535" y="135" class="sublabel">Tools/Resources</text>
    
    <!-- Transport Types -->
    <rect x="260" y="30" width="280" height="30" rx="15" ry="15" fill="#7e53f1" opacity="0.1" stroke="#7e53f1" stroke-width="1" />
    <text x="400" y="50" font-family="Arial" font-size="14" text-anchor="middle">Transport: STDIO or Streamable HTTP</text>

    <!-- Legend -->
    <rect x="50" y="350" width="280" height="30" rx="5" ry="5" fill="white" stroke="#999" stroke-width="1" />
    <text x="190" y="370" font-family="Arial" font-size="12" text-anchor="middle">MCP follows client-server architecture with JSON-RPC 2.0</text>
</svg>