body {
font-family: Arial, sans-serif;
margin: 20px;
background: #f0f4f8;
}
#diagram {
background: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
margin: 20px 0;
}
#input-area {
margin: 20px 0;
}
textarea {
width: 100%;
height: 100px;
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
button {
background: #4a90e2;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #357abd;
}
.node {
fill: #fff;
stroke: #333;
stroke-width: 2px;
}
.link {
stroke: #666;
stroke-width: 2px;
}
.label {
font-size: 12px;
font-family: Arial, sans-serif;
}
Interactive MCP Architecture Visualizer