| import { motion } from 'motion/react'; |
|
|
| export default function ERModelDiagram() { |
| return ( |
| <motion.div |
| initial={{ opacity: 0, y: 24, scale: 0.97 }} |
| animate={{ opacity: 1, y: 0, scale: 1 }} |
| transition={{ duration: 0.7, ease: [0.25, 0.1, 0.25, 1] as const, delay: 0.2 }} |
| className="mt-10 mb-4" |
| > |
| <div className="text-center mb-4"> |
| <span className="text-sm font-bold uppercase tracking-widest text-indigo-400/80"> |
| ER Model System Architecture |
| </span> |
| <p className="text-xs text-slate-500 mt-1">High-Level Architecture for Conceptual Data Modeling</p> |
| </div> |
| |
| <svg |
| viewBox="0 0 900 520" |
| className="w-full max-w-5xl mx-auto" |
| style={{ filter: 'drop-shadow(0 0 30px rgba(99,102,241,0.08))' }} |
| > |
| <defs> |
| <marker id="er-arrow" markerWidth="6" markerHeight="4" refX="5" refY="2" orient="auto"> |
| <polygon points="0 0,6 2,0 4" fill="rgba(148,163,184,0.4)" /> |
| </marker> |
| </defs> |
| |
| {/* Layer 1: Presentation */} |
| <rect x="10" y="10" width="620" height="70" rx="10" fill="rgba(59,130,246,0.05)" stroke="rgba(59,130,246,0.2)" strokeWidth="1.5" /> |
| <text x="20" y="30" fill="#60a5fa" fontSize="11" fontWeight="700" fontFamily="'Inter',sans-serif">1. Presentation Layer</text> |
| <text x="20" y="44" fill="#3b82f6" fontSize="8" fontFamily="'Inter',sans-serif">User Interfaces</text> |
| |
| <rect x="90" y="22" width="100" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="140" y="42" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">End Users</text> |
| <text x="140" y="56" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Business Analysts, Domain Experts</text> |
| |
| <rect x="200" y="22" width="110" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="255" y="42" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">ER Diagram Editor</text> |
| <text x="255" y="56" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Draw entities, attributes, relationships</text> |
| |
| <rect x="320" y="22" width="100" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="370" y="42" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Viewer / Reports</text> |
| <text x="370" y="56" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">View diagrams, metadata, documentation</text> |
| |
| <rect x="430" y="22" width="110" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="485" y="42" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Export / Import</text> |
| <text x="485" y="56" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Export to SQL, Import templates, Share models</text> |
| |
| {/* Arrow Layer 1 → 2 */} |
| <line x1="320" y1="80" x2="320" y2="95" stroke="rgba(148,163,184,0.4)" strokeWidth="1.5" markerEnd="url(#er-arrow)" /> |
| |
| {/* Layer 2: Application */} |
| <rect x="10" y="95" width="620" height="70" rx="10" fill="rgba(34,197,94,0.05)" stroke="rgba(34,197,94,0.2)" strokeWidth="1.5" /> |
| <text x="20" y="115" fill="#4ade80" fontSize="11" fontWeight="700" fontFamily="'Inter',sans-serif">2. Application Layer</text> |
| <text x="20" y="129" fill="#22c55e" fontSize="8" fontFamily="'Inter',sans-serif">Business Logic</text> |
| |
| <rect x="60" y="107" width="100" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="110" y="127" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Model Manager</text> |
| <text x="110" y="141" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Create, update, delete ER models</text> |
| |
| <rect x="170" y="107" width="120" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="230" y="127" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Relationship Manager</text> |
| <text x="230" y="141" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Define relationship types, cardinality, participation</text> |
| |
| <rect x="300" y="107" width="100" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="350" y="127" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Attribute Manager</text> |
| <text x="350" y="141" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Manage attribute types (key, composite, multi-valued, derived)</text> |
| |
| <rect x="410" y="107" width="90" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="455" y="127" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Validation Engine</text> |
| <text x="455" y="141" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Validate rules, cardinality, participation, keys</text> |
| |
| <rect x="510" y="107" width="100" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="560" y="127" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Metadata Manager</text> |
| <text x="560" y="141" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Maintain model metadata and history</text> |
| |
| {/* Arrow Layer 2 → 3 */} |
| <line x1="320" y1="165" x2="320" y2="180" stroke="rgba(148,163,184,0.4)" strokeWidth="1.5" markerEnd="url(#er-arrow)" /> |
| |
| {/* Layer 3: Service */} |
| <rect x="10" y="180" width="620" height="70" rx="10" fill="rgba(139,92,246,0.05)" stroke="rgba(139,92,246,0.2)" strokeWidth="1.5" /> |
| <text x="20" y="200" fill="#a78bfa" fontSize="11" fontWeight="700" fontFamily="'Inter',sans-serif">3. Service Layer</text> |
| <text x="20" y="214" fill="#8b5cf6" fontSize="8" fontFamily="'Inter',sans-serif">Core Services</text> |
| |
| <rect x="40" y="192" width="110" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="95" y="212" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">ER Modeling Service</text> |
| <text x="95" y="226" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Core engine to build and manage ER models</text> |
| |
| <rect x="160" y="192" width="110" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="215" y="212" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Rule & Constraint</text> |
| <text x="215" y="226" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Enforce business rules and integrity constraints</text> |
| |
| <rect x="280" y="192" width="110" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="335" y="212" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Transformation</text> |
| <text x="335" y="226" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Convert ER model to relational schema</text> |
| |
| <rect x="400" y="192" width="90" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="445" y="212" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">DDL Generator</text> |
| <text x="445" y="226" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Generate SQL (CREATE TABLE, FKs, Constraints)</text> |
| |
| <rect x="500" y="192" width="110" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="555" y="212" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Documentation</text> |
| <text x="555" y="226" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Generate data dictionary and reports</text> |
| |
| {/* Arrow Layer 3 → 4 */} |
| <line x1="320" y1="250" x2="320" y2="265" stroke="rgba(148,163,184,0.4)" strokeWidth="1.5" markerEnd="url(#er-arrow)" /> |
| |
| {/* Layer 4: Data */} |
| <rect x="10" y="265" width="620" height="70" rx="10" fill="rgba(245,158,11,0.05)" stroke="rgba(245,158,11,0.2)" strokeWidth="1.5" /> |
| <text x="20" y="285" fill="#fbbf24" fontSize="11" fontWeight="700" fontFamily="'Inter',sans-serif">4. Data Layer</text> |
| <text x="20" y="299" fill="#d97706" fontSize="8" fontFamily="'Inter',sans-serif">Storage</text> |
| |
| <rect x="70" y="277" width="140" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="140" y="297" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Model Repository</text> |
| <text x="140" y="311" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Store ER models (diagrams, metadata, definitions)</text> |
| |
| <rect x="250" y="277" width="140" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="320" y="297" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Metadata Repository</text> |
| <text x="320" y="311" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Store entity, relationship, rules, and constraints</text> |
| |
| <rect x="430" y="277" width="140" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="500" y="297" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Version & Audit Store</text> |
| <text x="500" y="311" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Track versions, changes, and audit logs</text> |
| |
| <line x1="210" y1="301" x2="250" y2="301" stroke="rgba(148,163,184,0.3)" strokeWidth="1.5" markerEnd="url(#er-arrow)" markerStart="url(#er-arrow)" /> |
| <line x1="390" y1="301" x2="430" y2="301" stroke="rgba(148,163,184,0.3)" strokeWidth="1.5" markerEnd="url(#er-arrow)" markerStart="url(#er-arrow)" /> |
| |
| {/* Arrow Layer 4 → 5 */} |
| <line x1="320" y1="335" x2="320" y2="350" stroke="rgba(148,163,184,0.4)" strokeWidth="1.5" markerEnd="url(#er-arrow)" /> |
| |
| {/* Layer 5: Infrastructure */} |
| <rect x="10" y="350" width="620" height="70" rx="10" fill="rgba(239,68,68,0.05)" stroke="rgba(239,68,68,0.2)" strokeWidth="1.5" /> |
| <text x="20" y="370" fill="#f87171" fontSize="11" fontWeight="700" fontFamily="'Inter',sans-serif">5. Infrastructure Layer</text> |
| <text x="20" y="384" fill="#dc2626" fontSize="8" fontFamily="'Inter',sans-serif">Platform Services</text> |
| |
| <rect x="50" y="362" width="100" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="100" y="382" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Security</text> |
| <text x="100" y="396" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Authentication, Authorization, Access Control</text> |
| |
| <rect x="160" y="362" width="100" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="210" y="382" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Backup & Recovery</text> |
| <text x="210" y="396" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Regular backups, disaster recovery</text> |
| |
| <rect x="270" y="362" width="100" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="320" y="382" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Configuration</text> |
| <text x="320" y="396" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">System settings, preferences</text> |
| |
| <rect x="380" y="362" width="110" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="435" y="382" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Monitoring & Logging</text> |
| <text x="435" y="396" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Performance monitoring, error logging, alerts</text> |
| |
| <rect x="500" y="362" width="100" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" /> |
| <text x="550" y="382" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Scalability</text> |
| <text x="550" y="396" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Load balancing, scaling, caching</text> |
| |
| {/* Database Design Flow - Right Side */} |
| <rect x="650" y="10" width="240" height="260" rx="10" fill="rgba(99,102,241,0.04)" stroke="rgba(99,102,241,0.15)" strokeWidth="1.5" /> |
| <text x="770" y="28" textAnchor="middle" fill="#a5b4fc" fontSize="11" fontWeight="700" fontFamily="'Inter',sans-serif">Database Design Flow</text> |
| |
| {[ |
| { num: '1', title: 'Gather Requirements', desc: 'Collect business and data requirements', y: 45 }, |
| { num: '2', title: 'Create ER Model', desc: 'Identify entities, attributes, relationships, constraints', y: 85 }, |
| { num: '3', title: 'Validate Model', desc: 'Check rules, cardinality, participation, keys', y: 125 }, |
| { num: '4', title: 'Transform to Schema', desc: 'Map ER model to relational schema', y: 165 }, |
| { num: '5', title: 'Generate Database', desc: 'Generate SQL and implement database', y: 205 }, |
| { num: '6', title: 'Maintenance', desc: 'Evolve model with business changes', y: 245 }, |
| ].map((step, i) => ( |
| <g key={i}> |
| <rect x="660" y={step.y - 12} width="220" height="32" rx="6" fill={i === 5 ? "rgba(239,68,68,0.08)" : "rgba(99,102,241,0.06)"} stroke={i === 5 ? "rgba(239,68,68,0.25)" : "rgba(99,102,241,0.2)"} strokeWidth="1" /> |
| <circle cx="675" cy={step.y + 4} r="10" fill={i === 5 ? "rgba(239,68,68,0.2)" : "rgba(99,102,241,0.2)"} stroke={i === 5 ? "rgba(239,68,68,0.4)" : "rgba(99,102,241,0.4)"} strokeWidth="1" /> |
| <text x="675" y={step.y + 8} textAnchor="middle" fill={i === 5 ? "#f87171" : "#a5b4fc"} fontSize="10" fontWeight="700" fontFamily="'Inter',sans-serif">{step.num}</text> |
| <text x="695" y={step.y + 4} fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">{step.title}</text> |
| <text x="695" y={step.y + 16} fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">{step.desc}</text> |
| {i < 5 && <line x1="770" y1={step.y + 22} x2="770" y2={step.y + 38} stroke="rgba(99,102,241,0.3)" strokeWidth="1" markerEnd="url(#er-arrow)" />} |
| </g> |
| ))} |
| |
| {/* Connection lines to flow */} |
| <line x1="630" y1="45" x2="650" y2="45" stroke="rgba(148,163,184,0.3)" strokeWidth="1" strokeDasharray="3,2" /> |
| |
| {/* Legend */} |
| <rect x="10" y="435" width="620" height="75" rx="10" fill="rgba(255,255,255,0.02)" stroke="rgba(255,255,255,0.06)" strokeWidth="1" /> |
| <text x="30" y="455" fill="#94a3b8" fontSize="10" fontWeight="700" fontFamily="'Inter',sans-serif">LEGEND</text> |
| <text x="30" y="468" fill="#64748b" fontSize="8" fontFamily="'Inter',sans-serif">ER Model Symbols</text> |
| |
| {/* Legend items */} |
| <g transform="translate(90, 450)"> |
| <rect x="0" y="0" width="20" height="14" rx="2" fill="rgba(59,130,246,0.15)" stroke="rgba(59,130,246,0.3)" strokeWidth="1" /> |
| <text x="28" y="11" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Strong Entity</text> |
| </g> |
| |
| <g transform="translate(160, 450)"> |
| <rect x="0" y="0" width="20" height="14" rx="2" fill="transparent" stroke="rgba(255,255,255,0.3)" strokeWidth="1" strokeDasharray="2,1" /> |
| <text x="28" y="11" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Weak Entity</text> |
| </g> |
| |
| <g transform="translate(230, 450)"> |
| <polygon points="10,0 20,7 10,14 0,7" fill="rgba(99,102,246,0.15)" stroke="rgba(99,102,246,0.3)" strokeWidth="1" /> |
| <text x="28" y="11" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Relationship</text> |
| </g> |
| |
| <g transform="translate(310, 450)"> |
| <ellipse cx="10" cy="7" rx="10" ry="5" fill="rgba(245,158,11,0.15)" stroke="rgba(245,158,11,0.3)" strokeWidth="1" /> |
| <text x="28" y="11" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Key Attribute</text> |
| </g> |
| |
| <g transform="translate(390, 450)"> |
| <ellipse cx="10" cy="7" rx="10" ry="5" fill="rgba(34,197,94,0.15)" stroke="rgba(34,197,94,0.3)" strokeWidth="1" /> |
| <text x="28" y="11" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Composite</text> |
| </g> |
| |
| <g transform="translate(460, 450)"> |
| <ellipse cx="10" cy="7" rx="10" ry="7" fill="rgba(139,92,246,0.15)" stroke="rgba(139,92,246,0.3)" strokeWidth="1" /> |
| <text x="28" y="11" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Multi-valued</text> |
| </g> |
| |
| <g transform="translate(540, 450)"> |
| <ellipse cx="10" cy="7" rx="10" ry="7" fill="transparent" stroke="rgba(255,255,255,0.3)" strokeWidth="1" strokeDasharray="2,1" /> |
| <text x="28" y="11" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Derived</text> |
| </g> |
| |
| <g transform="translate(90, 475)"> |
| <line x1="0" y1="7" x2="20" y2="7" stroke="rgba(148,163,184,0.5)" strokeWidth="1" strokeDasharray="3,2" /> |
| <text x="28" y="11" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Partial Participation</text> |
| </g> |
| |
| <g transform="translate(220, 475)"> |
| <line x1="0" y1="7" x2="20" y2="7" stroke="rgba(148,163,184,0.5)" strokeWidth="2" /> |
| <text x="28" y="11" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Total Participation</text> |
| </g> |
| </svg> |
| </motion.div> |
| ); |
| } |
|
|
