CodeGraph CLI MCP Server

body { font-family: sans-serif; line-height: 1.6; margin: 20px; background-color: #f4f4f4; color: #333; } h1, h2, h3, h4 { color: #005a9c; } #diagram-container { margin-bottom: 20px; border: 1px solid #ccc; padding: 10px; background-color: #fff; text-align: center; } #narrative { background-color: #fff; padding: 20px; border: 1px solid #ccc; } .component { cursor: pointer; color: #005a9c; font-weight: bold; text-decoration: underline; } .component:hover { color: #003366; } /* Animation for the SVG */ #architecture-svg .node { opacity: 0; animation: fadeIn 0.5s ease-out forwards; } #architecture-svg .edgePath { opacity: 0; animation: fadeIn 0.8s ease-out forwards; } /* Stagger the animation for each node */ #architecture-svg .node:nth-child(1) { animation-delay: 0.1s; } #architecture-svg .node:nth-child(2) { animation-delay: 0.2s; } #architecture-svg .node:nth-child(3) { animation-delay: 0.3s; } #architecture-svg .node:nth-child(4) { animation-delay: 0.4s; } #architecture-svg .node:nth-child(5) { animation-delay: 0.5s; } #architecture-svg .node:nth-child(6) { animation-delay: 0.6s; } #architecture-svg .node:nth-child(7) { animation-delay: 0.7s; } #architecture-svg .node:nth-child(8) { animation-delay: 0.8s; } #architecture-svg .node:nth-child(9) { animation-delay: 0.9s; } #architecture-svg .node:nth-child(10) { animation-delay: 1.0s; } #architecture-svg .node:nth-child(11) { animation-delay: 1.1s; } #architecture-svg .node:nth-child(12) { animation-delay: 1.2s; } #architecture-svg .node:nth-child(13) { animation-delay: 1.3s; } #architecture-svg .node:nth-child(14) { animation-delay: 1.4s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Highlighting for interactive diagram */ .highlight rect { fill: #ffcc00 !important; stroke: #ff6600 !important; stroke-width: 4px !important; }