<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mermaid 图表 4</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 TB
subgraph Host["AI 应用（Host）<br/>Cursor / Claude Code"]
Client[MCP Client<br/>内置于 AI 应用中]
end
subgraph Servers[MCP Servers]
S1[MCP Server A<br/>工具 A]
S2[MCP Server B<br/>工具 B]
S3[MCP Server C<br/>工具 C]
end
subgraph Resources[外部资源]
R1[数据库]
R2[API]
R3[文件系统]
end
Client -->|JSON-RPC 2.0| S1
Client -->|JSON-RPC 2.0| S2
Client -->|JSON-RPC 2.0| S3
S1 --> R1
S2 --> R2
S3 --> R3
style Host fill:#e1f5ff,stroke:#333,stroke-width:2px
style Client fill:#fff9c4,stroke:#333
style Servers fill:#f3e5f5,stroke:#333,stroke-width:2px
style Resources fill:#e8f5e9,stroke:#333,stroke-width:2px
</div>
</body>
</html>
