<svg width="800" height="500" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="entryGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#9B59B6;stop-opacity:1" />
<stop offset="100%" style="stop-color:#7D3C98;stop-opacity:1" />
</linearGradient>
<linearGradient id="mcpGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#3498DB;stop-opacity:1" />
<stop offset="100%" style="stop-color:#2980B9;stop-opacity:1" />
</linearGradient>
<linearGradient id="transformGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#F39C12;stop-opacity:1" />
<stop offset="100%" style="stop-color:#D68910;stop-opacity:1" />
</linearGradient>
<linearGradient id="exitGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#27AE60;stop-opacity:1" />
<stop offset="100%" style="stop-color:#229954;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Entry Node -->
<g id="entry">
<rect x="30" y="40" width="140" height="90" fill="url(#entryGrad)" stroke="#5B2C6F" stroke-width="2" rx="10"/>
<text x="100" y="70" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="white">Entry Node</text>
<text x="100" y="95" font-family="Arial, sans-serif" font-size="11" text-anchor="middle" fill="white">Input: directory</text>
<text x="100" y="115" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="white">"/path/to/dir"</text>
</g>
<!-- Arrow 1 -->
<path d="M 170 85 L 230 85" stroke="#666" stroke-width="3" fill="none" marker-end="url(#arrowhead)"/>
<!-- MCP Node -->
<g id="mcp">
<rect x="230" y="40" width="140" height="90" fill="url(#mcpGrad)" stroke="#1F618D" stroke-width="2" rx="10"/>
<text x="300" y="70" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="white">MCP Node</text>
<text x="300" y="95" font-family="Arial, sans-serif" font-size="11" text-anchor="middle" fill="white">filesystem</text>
<text x="300" y="115" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="white">list_directory</text>
<!-- External MCP server box -->
<rect x="240" y="170" width="120" height="70" fill="#E8F4F8" stroke="#3498DB" stroke-width="2" stroke-dasharray="5,5" rx="5"/>
<text x="300" y="195" font-family="Arial, sans-serif" font-size="11" font-weight="bold" text-anchor="middle" fill="#333">External MCP</text>
<text x="300" y="215" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#666">Filesystem Server</text>
<text x="300" y="230" font-family="Arial, sans-serif" font-size="9" text-anchor="middle" fill="#666">Returns file list</text>
<!-- Arrow to external -->
<path d="M 300 130 L 300 170" stroke="#3498DB" stroke-width="2" fill="none" marker-end="url(#arrowheadBlue)"/>
<!-- Arrow from external -->
<path d="M 300 240 L 300 280" stroke="#3498DB" stroke-width="2" fill="none" marker-end="url(#arrowheadBlue)"/>
<!-- Output data -->
<rect x="240" y="280" width="120" height="60" fill="#FFF9E6" stroke="#F39C12" stroke-width="1" rx="3"/>
<text x="300" y="300" font-family="Courier, monospace" font-size="9" text-anchor="middle" fill="#333">[FILE] file1.txt</text>
<text x="300" y="315" font-family="Courier, monospace" font-size="9" text-anchor="middle" fill="#333">[FILE] file2.txt</text>
<text x="300" y="330" font-family="Courier, monospace" font-size="9" text-anchor="middle" fill="#333">...</text>
</g>
<!-- Arrow 2 -->
<path d="M 370 85 L 430 85" stroke="#666" stroke-width="3" fill="none" marker-end="url(#arrowhead)"/>
<!-- Transform Node -->
<g id="transform">
<rect x="430" y="40" width="140" height="90" fill="url(#transformGrad)" stroke="#B9770E" stroke-width="2" rx="10"/>
<text x="500" y="70" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="white">Transform Node</text>
<text x="500" y="95" font-family="Arial, sans-serif" font-size="11" text-anchor="middle" fill="white">JSONata</text>
<text x="500" y="115" font-family="Courier, monospace" font-size="9" text-anchor="middle" fill="white">$count($split(...))</text>
<!-- Arrow to transform details -->
<path d="M 500 130 L 500 170" stroke="#F39C12" stroke-width="2" fill="none" marker-end="url(#arrowheadOrange)"/>
<!-- Transform details -->
<rect x="440" y="170" width="120" height="90" fill="#FFF9E6" stroke="#F39C12" stroke-width="1" rx="5"/>
<text x="500" y="190" font-family="Arial, sans-serif" font-size="10" font-weight="bold" text-anchor="middle" fill="#333">Transformation</text>
<text x="500" y="210" font-family="Courier, monospace" font-size="9" text-anchor="middle" fill="#666">1. Split by "\n"</text>
<text x="500" y="225" font-family="Courier, monospace" font-size="9" text-anchor="middle" fill="#666">2. Count items</text>
<text x="500" y="240" font-family="Courier, monospace" font-size="9" text-anchor="middle" fill="#666">Result: {"count": 7}</text>
</g>
<!-- Arrow 3 -->
<path d="M 570 85 L 630 85" stroke="#666" stroke-width="3" fill="none" marker-end="url(#arrowhead)"/>
<!-- Exit Node -->
<g id="exit">
<rect x="630" y="40" width="140" height="90" fill="url(#exitGrad)" stroke="#1E8449" stroke-width="2" rx="10"/>
<text x="700" y="70" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="white">Exit Node</text>
<text x="700" y="95" font-family="Arial, sans-serif" font-size="11" text-anchor="middle" fill="white">Return Result</text>
<text x="700" y="115" font-family="Courier, monospace" font-size="10" text-anchor="middle" fill="white">{"count": 7}</text>
<!-- Return to agent -->
<path d="M 700 130 L 700 170" stroke="#27AE60" stroke-width="2" fill="none" marker-end="url(#arrowheadGreen)"/>
<rect x="650" y="170" width="100" height="50" fill="#E8F8E8" stroke="#27AE60" stroke-width="1" rx="3"/>
<text x="700" y="195" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#333">To Agent</text>
<text x="700" y="210" font-family="Arial, sans-serif" font-size="9" text-anchor="middle" fill="#666">(Only final result)</text>
</g>
<!-- Context window note -->
<rect x="30" y="400" width="740" height="60" fill="#F0F8FF" stroke="#3498DB" stroke-width="2" rx="5"/>
<text x="400" y="425" font-family="Arial, sans-serif" font-size="12" font-weight="bold" text-anchor="middle" fill="#333">All processing happens outside the LLM's context window</text>
<text x="400" y="445" font-family="Arial, sans-serif" font-size="11" text-anchor="middle" fill="#666">Agent only sees: Input (directory path) → Output (count: 7)</text>
<!-- Arrow markers -->
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#666"/>
</marker>
<marker id="arrowheadBlue" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#3498DB"/>
</marker>
<marker id="arrowheadGreen" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#27AE60"/>
</marker>
<marker id="arrowheadOrange" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#F39C12"/>
</marker>
</defs>
</svg>
