<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mermaid 图表 10</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
A[Figma MCP<br/>获取设计稿] --> B[Context7 MCP<br/>查询组件库文档]
B --> C[编写代码]
C --> D[Playwright MCP<br/>打开页面测试]
D --> E[Playwright MCP<br/>自动化测试]
style A fill:#e1f5ff,stroke:#333
style B fill:#fff9c4,stroke:#333
style C fill:#f3e5f5,stroke:#333
style D fill:#e8f5e9,stroke:#333
style E fill:#ffebee,stroke:#333
</div>
</body>
</html>
