<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mermaid 图表 7</title>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({
startOnLoad: true,
theme: 'default',
themeVariables: {
fontSize: '20px',
fontFamily: 'Arial, sans-serif'
},
flowchart: {
useMaxWidth: false,
htmlLabels: true,
curve: 'basis'
},
sequence: {
useMaxWidth: false,
diagramMarginX: 50,
diagramMarginY: 10,
actorMargin: 50,
width: 150,
height: 65,
boxMargin: 10,
boxTextMargin: 5,
noteMargin: 10,
messageMargin: 35
}
});
</script>
<style>
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
padding: 60px;
background: white;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.mermaid {
background: white;
transform: scale(1);
}
.mermaid svg {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="mermaid">
graph LR
Client[MCP Client]
Nginx[Nginx<br/>反向代理]
Server[MCP Server<br/>独立服务]
Client -->|HTTPS| Nginx
Nginx -->|HTTP| Server
style Client fill:#e1f5ff,stroke:#333
style Nginx fill:#fff9c4,stroke:#333
style Server fill:#f3e5f5,stroke:#333
</div>
</body>
</html>
