<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mermaid 图表 3</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">
sequenceDiagram
participant U as 用户
participant AI as AI模型
participant D as 开发者
participant API as 外部API
U->>AI: 北京今天天气怎么样？
AI->>AI: 分析意图
AI->>D: 返回函数调用指令<br/>{name: "get_weather", args: {city: "北京"}}
D->>API: 开发者自己执行函数<br/>get_weather("北京")
API->>D: 返回天气数据
D->>AI: 把结果发回给 AI
AI->>U: 北京今天晴，气温 25°C
</div>
</body>
</html>
