<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<defs>
<style>
.step-node { fill: #4CAF50; stroke: #2E7D32; stroke-width: 2; rx: 8; }
.check-node { fill: #2196F3; stroke: #1565C0; stroke-width: 2; rx: 8; }
.config-node { fill: #FF9800; stroke: #E65100; stroke-width: 2; rx: 8; }
.success-node { fill: #9C27B0; stroke: #4A148C; stroke-width: 2; rx: 8; }
.arrow { stroke: #333; stroke-width: 2; fill: none; marker-end: url(#arrowhead); }
.success-arrow { stroke: #4CAF50; stroke-width: 3; fill: none; marker-end: url(#greenarrow); }
.text { font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px; text-anchor: middle; fill: white; font-weight: bold; }
.title { font-family: 'Segoe UI', Arial, sans-serif; font-size: 18px; font-weight: bold; text-anchor: middle; fill: #2E7D32; }
.small { font-size: 9px; }
.label { font-size: 10px; fill: #333; text-anchor: middle; }
.command { font-family: 'Courier New', monospace; font-size: 10px; fill: #1565C0; text-anchor: middle; }
</style>
<marker id="arrowhead" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto">
<polygon points="0 0, 12 4, 0 8" fill="#333"/>
</marker>
<marker id="greenarrow" markerWidth="12" markerHeight="8" refX="12" refY="4" orient="auto">
<polygon points="0 0, 12 4, 0 8" fill="#4CAF50"/>
</marker>
</defs>
<!-- Title -->
<text x="400" y="30" class="title">One-Click Kiro Installation Flow</text>
<!-- Step 1: Command -->
<rect class="step-node" x="300" y="60" width="200" height="50"/>
<text x="400" y="80" class="text">Run Installation Command</text>
<text x="400" y="95" class="text small">npm install -g everything-mcp-kiro</text>
<!-- Step 2: Dependency Check -->
<rect class="check-node" x="50" y="150" width="150" height="50"/>
<text x="125" y="170" class="text">Check Everything</text>
<text x="125" y="185" class="text small">es.exe detection</text>
<rect class="check-node" x="220" y="150" width="150" height="50"/>
<text x="295" y="170" class="text">Check Node.js</text>
<text x="295" y="185" class="text small">Version ≥18.0.0</text>
<rect class="check-node" x="390" y="150" width="150" height="50"/>
<text x="465" y="170" class="text">Check GitHub CLI</text>
<text x="465" y="185" class="text small">Optional: gh auth</text>
<rect class="check-node" x="560" y="150" width="150" height="50"/>
<text x="635" y="170" class="text">Detect Kiro</text>
<text x="635" y="185" class="text small">Config location</text>
<!-- Step 3: Configuration -->
<rect class="config-node" x="150" y="250" width="180" height="50"/>
<text x="240" y="270" class="text">Generate MCP Config</text>
<text x="240" y="285" class="text small">Kiro-optimized settings</text>
<rect class="config-node" x="350" y="250" width="180" height="50"/>
<text x="440" y="270" class="text">Setup Knowledge Base</text>
<text x="440" y="285" class="text small">SQLite initialization</text>
<!-- Step 4: Integration -->
<rect class="success-node" x="200" y="350" width="180" height="50"/>
<text x="290" y="370" class="text">Install MCP Server</text>
<text x="290" y="385" class="text small">Register with Kiro</text>
<rect class="success-node" x="400" y="350" width="180" height="50"/>
<text x="490" y="370" class="text">Verify Installation</text>
<text x="490" y="385" class="text small">Test all features</text>
<!-- Step 5: Success -->
<rect class="success-node" x="300" y="450" width="200" height="50"/>
<text x="400" y="470" class="text">✓ Ready to Use!</text>
<text x="400" y="485" class="text small">Launch Kiro and start coding</text>
<!-- Flow Arrows -->
<line class="arrow" x1="400" y1="110" x2="125" y2="150"/>
<line class="arrow" x1="400" y1="110" x2="295" y2="150"/>
<line class="arrow" x1="400" y1="110" x2="465" y2="150"/>
<line class="arrow" x1="400" y1="110" x2="635" y2="150"/>
<line class="arrow" x1="200" y1="200" x2="240" y2="250"/>
<line class="arrow" x1="370" y1="200" x2="440" y2="250"/>
<line class="arrow" x1="290" y1="300" x2="290" y2="350"/>
<line class="arrow" x1="490" y1="300" x2="490" y2="350"/>
<line class="success-arrow" x1="340" y1="400" x2="360" y2="450"/>
<line class="success-arrow" x1="540" y1="400" x2="440" y2="450"/>
<!-- Command Examples -->
<text x="400" y="540" class="title" style="font-size: 14px;">Installation Commands</text>
<text x="200" y="565" class="command">npm install -g everything-mcp-kiro</text>
<text x="600" y="565" class="command">kiro-everything --setup</text>
<!-- Configuration Preview -->
<rect fill="#E8F5E8" stroke="#4CAF50" stroke-width="1" x="50" y="320" width="120" height="80" rx="4"/>
<text x="110" y="340" class="label" style="font-size: 9px;">Generated Config:</text>
<text x="60" y="355" class="label" style="font-size: 8px; text-anchor: start;">{</text>
<text x="65" y="368" class="label" style="font-size: 8px; text-anchor: start;">"mcpServers": {</text>
<text x="70" y="381" class="label" style="font-size: 8px; text-anchor: start;">"everything": {</text>
<text x="75" y="394" class="label" style="font-size: 8px; text-anchor: start;">"command": "..."</text>
</svg>
