<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 900" style="background-color: #f8f9fa;">
<!-- Title -->
<text x="600" y="40" font-family="Arial, sans-serif" font-size="28" font-weight="bold" text-anchor="middle" fill="#2c3e50">
ADL System - Three-Tier Architecture
</text>
<!-- Presentation Tier -->
<g id="presentation-tier">
<!-- Box -->
<rect x="100" y="100" width="1000" height="180" fill="#3498db" stroke="#2980b9" stroke-width="3" rx="10"/>
<text x="600" y="140" font-family="Arial, sans-serif" font-size="22" font-weight="bold" text-anchor="middle" fill="white">
Presentation Tier
</text>
<!-- UI Server -->
<rect x="350" y="160" width="500" height="100" fill="white" stroke="#2980b9" stroke-width="2" rx="8"/>
<text x="600" y="190" font-family="Arial, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" fill="#2c3e50">
Web UI Application
</text>
<text x="600" y="215" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#555">
Express Server + HTML/CSS/JS
</text>
<text x="600" y="235" font-family="Arial, sans-serif" font-size="13" text-anchor="middle" fill="#e74c3c" font-weight="bold">
Entry Point: http://localhost:3000
</text>
<text x="600" y="252" font-family="Arial, sans-serif" font-size="12" text-anchor="middle" fill="#666" font-style="italic">
User interface for managing ADL entries
</text>
</g>
<!-- Arrow 1 -->
<path d="M 600 280 L 600 320" stroke="#34495e" stroke-width="3" fill="none" marker-end="url(#arrowhead)"/>
<text x="620" y="305" font-family="Arial, sans-serif" font-size="12" fill="#34495e">GraphQL</text>
<!-- Application Tier -->
<g id="application-tier">
<!-- Box -->
<rect x="100" y="320" width="1000" height="260" fill="#2ecc71" stroke="#27ae60" stroke-width="3" rx="10"/>
<text x="600" y="360" font-family="Arial, sans-serif" font-size="22" font-weight="bold" text-anchor="middle" fill="white">
Application Tier
</text>
<!-- GraphQL Server -->
<rect x="150" y="380" width="420" height="180" fill="white" stroke="#27ae60" stroke-width="2" rx="8"/>
<text x="360" y="410" font-family="Arial, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" fill="#2c3e50">
GraphQL Backend Server
</text>
<text x="360" y="435" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#555">
Apollo Server + Node.js
</text>
<text x="360" y="455" font-family="Arial, sans-serif" font-size="13" text-anchor="middle" fill="#e74c3c" font-weight="bold">
Entry Point: http://localhost:4000
</text>
<text x="360" y="475" font-family="Arial, sans-serif" font-size="12" text-anchor="middle" fill="#666" font-style="italic">
API endpoint: /graphql
</text>
<text x="360" y="495" font-family="Arial, sans-serif" font-size="12" text-anchor="middle" fill="#666">
• CRUD operations for ADL entries
</text>
<text x="360" y="515" font-family="Arial, sans-serif" font-size="12" text-anchor="middle" fill="#666">
• Type-safe GraphQL schema
</text>
<text x="360" y="535" font-family="Arial, sans-serif" font-size="12" text-anchor="middle" fill="#666">
• Timestamp management
</text>
<!-- MCP Server -->
<rect x="630" y="380" width="420" height="180" fill="white" stroke="#27ae60" stroke-width="2" rx="8"/>
<text x="840" y="410" font-family="Arial, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" fill="#2c3e50">
MCP Server (Optional)
</text>
<text x="840" y="435" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#555">
Model Context Protocol
</text>
<text x="840" y="455" font-family="Arial, sans-serif" font-size="13" text-anchor="middle" fill="#e74c3c" font-weight="bold">
Entry Point: http://localhost:5000
</text>
<text x="840" y="475" font-family="Arial, sans-serif" font-size="12" text-anchor="middle" fill="#666" font-style="italic">
Communication: stdio (JSON-RPC)
</text>
<text x="840" y="495" font-family="Arial, sans-serif" font-size="12" text-anchor="middle" fill="#666">
• AI assistant integration
</text>
<text x="840" y="515" font-family="Arial, sans-serif" font-size="12" text-anchor="middle" fill="#666">
• 5 MCP tools (list/get/create/update/delete)
</text>
<text x="840" y="535" font-family="Arial, sans-serif" font-size="12" text-anchor="middle" fill="#666">
• Interfaces with GraphQL backend
</text>
<!-- Connection between MCP and GraphQL -->
<path d="M 630 470 L 570 470" stroke="#34495e" stroke-width="2" fill="none" stroke-dasharray="5,5"/>
<text x="600" y="465" font-family="Arial, sans-serif" font-size="11" text-anchor="middle" fill="#34495e">queries</text>
</g>
<!-- Arrow 2 -->
<path d="M 360 580 L 360 620" stroke="#34495e" stroke-width="3" fill="none" marker-end="url(#arrowhead)"/>
<text x="320" y="605" font-family="Arial, sans-serif" font-size="12" fill="#34495e">SQL</text>
<!-- Data Tier -->
<g id="data-tier">
<!-- Box -->
<rect x="100" y="620" width="1000" height="180" fill="#e67e22" stroke="#d35400" stroke-width="3" rx="10"/>
<text x="600" y="660" font-family="Arial, sans-serif" font-size="22" font-weight="bold" text-anchor="middle" fill="white">
Data Tier
</text>
<!-- Database -->
<rect x="350" y="680" width="500" height="100" fill="white" stroke="#d35400" stroke-width="2" rx="8"/>
<text x="600" y="710" font-family="Arial, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" fill="#2c3e50">
SQLite Database
</text>
<text x="600" y="735" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#555">
better-sqlite3 driver
</text>
<text x="600" y="755" font-family="Arial, sans-serif" font-size="13" text-anchor="middle" fill="#666" font-style="italic">
Location: data/adl.sqlite
</text>
<text x="600" y="772" font-family="Arial, sans-serif" font-size="12" text-anchor="middle" fill="#666">
Persistent storage for ADL entries (id, author, title, decision, factSheets, status, timestamps)
</text>
</g>
<!-- Legend -->
<g id="legend">
<rect x="100" y="830" width="1000" height="50" fill="#ecf0f1" stroke="#bdc3c7" stroke-width="2" rx="8"/>
<text x="600" y="850" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#2c3e50">
Data Flow: User → Web UI (Port 3000) → GraphQL API (Port 4000) → SQLite Database
</text>
<text x="600" y="868" font-family="Arial, sans-serif" font-size="12" text-anchor="middle" fill="#555">
Optional: MCP Server (Port 5000) enables AI assistant integration with the same backend
</text>
</g>
<!-- Arrow marker definition -->
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#34495e"/>
</marker>
</defs>
</svg>
