docs(add):新增Project Caffeine MVP Srint1原型设计说明文档示意图

Signed-off-by: gzkoala <guohao@gitconomy.org>
This commit is contained in:
gzkoala
2026-03-01 13:50:25 +08:00
parent 3db12d91fa
commit efccd930e0

View File

@@ -0,0 +1,399 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1200" width="100%" height="100%">
<!--
================================================================================
图表名称:提示词策略 MCP Server 原型架构图 (Prompt Strategy MVP Architecture)
文件命名prompt-strategy-mcp-server-prototype-architecture.svg
用途:展示从 Client 请求到 5 Whys 策略引擎、资源层再到大模型推理的“上下层级”完整组件链及执行流。
版本v1.0.0 (Top-Down Layout with 50px Spacing Adjustment)
作者Gitconomy Research-郭晧
SPDX-License-Identifier: MIT & CC-BY-SA-4.0
创建日期2026-03-01
================================================================================
-->
<!-- Background: Solid White for Git compatibility -->
<rect width="100%" height="100%" fill="#FFFFFF" />
<defs>
<style>
:root {
/* 语义色定义 */
--c-cloud-blue: #0099FF;
--c-cloud-blue-light: rgba(0, 153, 255, 0.08);
--c-local-green: #009900;
--c-local-green-light: rgba(0, 153, 0, 0.08);
--c-risk-amber: #F97316;
--c-risk-amber-light: rgba(249, 115, 22, 0.08);
--c-gov-blue: #3B82F6;
--c-gov-blue-light: rgba(59, 130, 246, 0.08);
--c-neutral-gray: #475569;
--c-neutral-gray-light: #E2E8F0;
/* 步骤高亮色 */
--c-step-red: #EF4444;
}
/* 字体降级机制 */
.font-sans { font-family: 'Noto Sans', 'Helvetica Neue', Arial, sans-serif; }
.font-mono { font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace; }
/* 文本层级 */
.card-title { font-size: 15px; font-weight: bold; fill: #FFFFFF; }
.card-text { font-size: 13px; fill: var(--c-neutral-gray); }
.text-code { font-size: 13px; font-weight: bold; fill: #0F172A; }
.label-text { font-size: 12px; font-weight: bold; fill: var(--c-neutral-gray); }
.step-text { font-size: 13px; font-weight: bold; fill: #FFFFFF; }
</style>
<!-- 箭头标记 -->
<marker id="arrow-gray" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
<path d="M 0 0 L 8 4 L 0 8 Z" fill="var(--c-neutral-gray)" />
</marker>
<!-- 返回箭头 (虚线用) -->
<marker id="arrow-gray-return" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
<path d="M 0 0 L 8 4 L 0 8 Z" fill="var(--c-neutral-gray)" />
</marker>
</defs>
<!--
===========================================================================
顶层标题块 (Title Block)
绝对底部坐标为: 40 + 70 + 3 = 113
===========================================================================
-->
<g id="title-block" transform="translate(640, 40)">
<text y="0" text-anchor="middle" class="font-mono" font-size="12" fill="var(--c-neutral-gray)" letter-spacing="1">FIG-01</text>
<text y="30" text-anchor="middle" class="font-sans" font-weight="bold" font-size="24" fill="#000000">提示词策略 MCP Server 系统组件工作流架构图</text>
<text y="55" text-anchor="middle" class="font-mono" font-size="14" fill="var(--c-neutral-gray)">架构图 &gt; MVP Sprint1 &amp; 系统组件工作流</text>
<rect x="-30" y="70" width="60" height="3" fill="var(--c-cloud-blue)" />
</g>
<!--
===========================================================================
架构图主体内容 (Architecture Diagram Content)
通过 translate(0, 73) 平移,使最顶部的 Client Request (原 y=90)
新坐标达到 163从而与标题底部 (113) 保持精确的 50 单位距离。
===========================================================================
-->
<g id="diagram-content" transform="translate(0, 73)">
<!--
===========================================================================
物理边界与容器 (Boundaries)
===========================================================================
-->
<g id="boundaries" transform="translate(0, 240)">
<!-- Node.js MCP Server Runtime Boundary -->
<rect x="280" y="0" width="960" height="550" rx="12" fill="var(--c-local-green-light)" stroke="var(--c-local-green)" stroke-dasharray="4 4" stroke-width="2" />
<rect x="280" y="0" width="960" height="36" fill="var(--c-local-green)" opacity="0.1" rx="12"/>
<text x="300" y="23" class="font-mono" font-size="14" font-weight="bold" fill="var(--c-local-green)">📦 Node.js MCP Server Runtime (Express.js)</text>
</g>
<!--
===========================================================================
核心连线与正交路由路径 (Orthogonal Routing)
===========================================================================
-->
<g id="connections" fill="none" stroke="var(--c-neutral-gray)" stroke-width="2">
<!-- Client to app.js -->
<path d="M 760 220 L 760 272" marker-end="url(#arrow-gray)" />
<!-- app.js to apiRoutes -->
<path d="M 760 340 L 760 375" marker-end="url(#arrow-gray)" />
<!-- apiRoutes to Controllers -->
<path d="M 760 470 L 760 515" marker-end="url(#arrow-gray)" />
<path d="M 760 470 L 760 495 L 440 495 L 440 518" marker-end="url(#arrow-gray)" />
<path d="M 760 470 L 760 495 L 1080 495 L 1080 518" marker-end="url(#arrow-gray)" />
<!-- Controllers to Services -->
<path d="M 440 580 L 440 632" marker-end="url(#arrow-gray)" />
<path d="M 760 580 L 760 632" marker-end="url(#arrow-gray)" />
<path d="M 1080 580 L 1080 632" marker-end="url(#arrow-gray)" />
<!-- Services Cross-talk (Context Injection) -->
<path d="M 550 680 L 645 680" stroke-dasharray="4 2" marker-end="url(#arrow-gray)" />
<path d="M 970 680 L 875 680" stroke-dasharray="4 2" marker-end="url(#arrow-gray)" />
<!-- Services to External APIs/Resources -->
<path d="M 740 725 L 740 852" marker-end="url(#arrow-gray)" />
<path d="M 1080 725 L 1080 855" marker-end="url(#arrow-gray)" />
<!-- Return Path from LLM API -->
<path d="M 780 850 L 780 725" stroke-dasharray="4 4" marker-end="url(#arrow-gray-return)" />
<!-- config.js to app.js -->
<path d="M 490 310 L 682 310" stroke-dasharray="2 2" marker-end="url(#arrow-gray)" />
</g>
<!--
===========================================================================
路径上的文本标签 (Path Labels)
===========================================================================
-->
<g id="path-labels" class="font-sans label-text">
<text x="775" y="255" text-anchor="start">HTTP Request</text>
<text x="425" y="605" text-anchor="end">Enquiry</text>
<text x="590" y="650" text-anchor="middle">Enhanced</text>
<text x="590" y="665" text-anchor="middle">Prompt</text>
<text x="930" y="650" text-anchor="middle">Context</text>
<text x="930" y="665" text-anchor="middle">Data</text>
<text x="725" y="820" text-anchor="end">API Call</text>
<text x="795" y="820" text-anchor="start">Response</text>
<text x="1095" y="820" text-anchor="start">Fetch / Sync</text>
</g>
<!--
===========================================================================
节点卡片 (Cards & Nodes)
===========================================================================
-->
<g id="nodes">
<!-- 1. Client Request Box -->
<g transform="translate(640, 90)">
<rect x="0" y="0" width="240" height="130" rx="6" fill="#FFFFFF" stroke="var(--c-neutral-gray)" stroke-width="2" />
<rect x="0" y="0" width="240" height="30" fill="var(--c-neutral-gray-light)" rx="6"/>
<rect x="0" y="20" width="240" height="10" fill="var(--c-neutral-gray-light)"/>
<text x="120" y="20" text-anchor="middle" class="font-sans" font-size="14" font-weight="bold" fill="#0F172A">Client Request</text>
<!-- List -->
<text x="15" y="55" class="font-mono text-code">- /api/prompts/query</text>
<text x="15" y="75" class="font-mono text-code">- /api/model/infer</text>
<text x="15" y="95" class="font-mono text-code">- /api/resources/list</text>
<line x1="15" y1="110" x2="225" y2="110" stroke="var(--c-neutral-gray-light)" stroke-dasharray="2 2" />
<text x="15" y="123" class="font-sans card-text" font-size="11">Format: JSON-RPC 2.0</text>
</g>
<!-- 2. config.js & .env -->
<g transform="translate(310, 280)">
<rect x="0" y="0" width="180" height="60" rx="6" fill="#F8FAFC" stroke="var(--c-neutral-gray)" stroke-width="1.5" stroke-dasharray="2 2" />
<rect x="0" y="0" width="180" height="26" fill="var(--c-neutral-gray)" rx="6" />
<rect x="0" y="20" width="180" height="6" fill="var(--c-neutral-gray)" />
<text x="90" y="18" text-anchor="middle" class="font-mono card-title" font-size="13">.env &amp; config.js</text>
<text x="90" y="48" text-anchor="middle" class="font-sans card-text">API Keys &amp; Configuration</text>
</g>
<!-- 3. app.js -->
<g transform="translate(695, 280)">
<rect x="0" y="0" width="130" height="60" rx="6" fill="#FFFFFF" stroke="var(--c-gov-blue)" stroke-width="2" />
<rect x="0" y="0" width="130" height="26" fill="var(--c-gov-blue)" rx="6" />
<rect x="0" y="20" width="130" height="6" fill="var(--c-gov-blue)" />
<text x="65" y="18" text-anchor="middle" class="font-mono card-title">app.js</text>
<text x="65" y="48" text-anchor="middle" class="font-sans card-text">Main Gateway</text>
</g>
<!-- 4. apiRoutes.js -->
<g transform="translate(670, 380)">
<rect x="0" y="0" width="180" height="90" rx="6" fill="#FFFFFF" stroke="var(--c-gov-blue)" stroke-width="2" />
<rect x="0" y="0" width="180" height="26" fill="var(--c-gov-blue)" rx="6" />
<rect x="0" y="20" width="180" height="6" fill="var(--c-gov-blue)" />
<text x="90" y="18" text-anchor="middle" class="font-mono card-title">apiRoutes.js</text>
<text x="90" y="45" text-anchor="middle" class="font-sans card-text">API Router Node</text>
<line x1="20" y1="55" x2="160" y2="55" stroke="var(--c-neutral-gray-light)" stroke-width="1.5" />
<text x="90" y="75" text-anchor="middle" class="font-mono card-text" font-size="11">Express Router()</text>
</g>
<!-- 5. promptsController.js -->
<g transform="translate(340, 520)">
<rect x="0" y="0" width="200" height="60" rx="6" fill="#FFFFFF" stroke="var(--c-risk-amber)" stroke-width="2" />
<rect x="0" y="0" width="200" height="26" fill="var(--c-risk-amber)" rx="6" />
<rect x="0" y="20" width="200" height="6" fill="var(--c-risk-amber)" />
<text x="100" y="18" text-anchor="middle" class="font-mono card-title">promptsController.js</text>
<text x="100" y="48" text-anchor="middle" class="font-sans card-text">查询与提示词请求分发</text>
</g>
<!-- 6. modelController.js -->
<g transform="translate(660, 520)">
<rect x="0" y="0" width="200" height="60" rx="6" fill="#FFFFFF" stroke="var(--c-risk-amber)" stroke-width="2" />
<rect x="0" y="0" width="200" height="26" fill="var(--c-risk-amber)" rx="6" />
<rect x="0" y="20" width="200" height="6" fill="var(--c-risk-amber)" />
<text x="100" y="18" text-anchor="middle" class="font-mono card-title">modelController.js</text>
<text x="100" y="48" text-anchor="middle" class="font-sans card-text">多步推理请求分发</text>
</g>
<!-- 7. resourcesController.js -->
<g transform="translate(980, 520)">
<rect x="0" y="0" width="200" height="60" rx="6" fill="#FFFFFF" stroke="var(--c-risk-amber)" stroke-width="2" />
<rect x="0" y="0" width="200" height="26" fill="var(--c-risk-amber)" rx="6" />
<rect x="0" y="20" width="200" height="6" fill="var(--c-risk-amber)" />
<text x="100" y="18" text-anchor="middle" class="font-mono card-title">resourcesController.js</text>
<text x="100" y="48" text-anchor="middle" class="font-sans card-text">资源获取与管理分发</text>
</g>
<!-- 8. promptService.js -->
<g transform="translate(330, 640)">
<rect x="0" y="0" width="220" height="85" rx="6" fill="#FFFFFF" stroke="var(--c-local-green)" stroke-width="2" />
<rect x="0" y="0" width="220" height="26" fill="var(--c-local-green)" rx="6" />
<rect x="0" y="20" width="220" height="6" fill="var(--c-local-green)" />
<text x="110" y="18" text-anchor="middle" class="font-mono card-title">promptService.js</text>
<rect x="15" y="35" width="190" height="20" rx="3" fill="var(--c-risk-amber-light)" />
<text x="110" y="50" text-anchor="middle" class="font-sans text-code" fill="var(--c-risk-amber)">核心: 5 Whys 模板分解引擎</text>
<text x="110" y="70" text-anchor="middle" class="font-sans card-text">输出: 增强合成提示词</text>
</g>
<!-- 9. inferenceService.js -->
<g transform="translate(650, 640)">
<rect x="0" y="0" width="220" height="85" rx="6" fill="#FFFFFF" stroke="var(--c-local-green)" stroke-width="2" />
<rect x="0" y="0" width="220" height="26" fill="var(--c-local-green)" rx="6" />
<rect x="0" y="20" width="220" height="6" fill="var(--c-local-green)" />
<text x="110" y="18" text-anchor="middle" class="font-mono card-title">inferenceService.js</text>
<text x="110" y="50" text-anchor="middle" class="font-sans text-code">大语言模型交互管理</text>
<text x="110" y="70" text-anchor="middle" class="font-sans card-text">上下文注入与结果格式化</text>
</g>
<!-- 10. resourceService.js -->
<g transform="translate(970, 640)">
<rect x="0" y="0" width="220" height="85" rx="6" fill="#FFFFFF" stroke="var(--c-local-green)" stroke-width="2" />
<rect x="0" y="0" width="220" height="26" fill="var(--c-local-green)" rx="6" />
<rect x="0" y="20" width="220" height="6" fill="var(--c-local-green)" />
<text x="110" y="18" text-anchor="middle" class="font-mono card-title">resourceService.js</text>
<text x="110" y="50" text-anchor="middle" class="font-sans text-code">管理学术DB、PDF等</text>
<text x="110" y="70" text-anchor="middle" class="font-sans card-text">提供推理上下文数据</text>
</g>
<!-- 11. LLM API (Hexagon) -->
<g transform="translate(760, 900)">
<polygon points="0,-40 50,-20 50,20 0,40 -50,20 -50,-20" fill="var(--c-cloud-blue-light)" stroke="var(--c-cloud-blue)" stroke-width="3" />
<text x="0" y="-5" text-anchor="middle" class="font-nono card-text" fill="var(--c-cloud-blue)" font-size="16">LLM API</text>
<text x="0" y="15" text-anchor="middle" class="font-mono card-text" font-size="11" fill="var(--c-cloud-blue)">(Model)</text>
</g>
<!-- 12. External Resources (Cylinder) -->
<g transform="translate(980, 865)">
<!-- Cylinder Body -->
<path d="M 0 15 A 100 20 0 1 0 200 15 V 75 A 100 20 0 1 1 0 75 Z" fill="var(--c-cloud-blue-light)" stroke="var(--c-cloud-blue)" stroke-width="2" />
<!-- Cylinder Top -->
<ellipse cx="100" cy="15" rx="100" ry="20" fill="var(--c-cloud-blue-light)" stroke="var(--c-cloud-blue)" stroke-width="2" />
<text x="100" y="50" text-anchor="middle" class="font-sans card-title" fill="var(--c-cloud-blue)" font-size="14">资源与知识库 (Resources)</text>
<text x="100" y="70" text-anchor="middle" class="font-sans card-text" fill="var(--c-cloud-blue)" font-size="12">学术DB / PDF / Obsidian</text>
</g>
</g>
<!--
===========================================================================
MVP 执行步骤气泡与侧边栏 (MVP Execution Flow Steps)
===========================================================================
-->
<g id="execution-steps">
<!-- Step 1: Client to Server -->
<g transform="translate(760, 246)">
<circle cx="0" cy="0" r="10" fill="var(--c-step-red)" />
<text x="0" y="4.5" text-anchor="middle" class="font-sans step-text">1</text>
</g>
<!-- Step 2: 5 Whys Decomposition -->
<g transform="translate(440, 600)">
<circle cx="0" cy="0" r="10" fill="var(--c-step-red)" />
<text x="0" y="4.5" text-anchor="middle" class="font-sans step-text">2</text>
</g>
<!-- Step 3: Fetch Context from Resources -->
<g transform="translate(930, 680)">
<circle cx="0" cy="0" r="10" fill="var(--c-step-red)" />
<text x="0" y="4.5" text-anchor="middle" class="font-sans step-text">3</text>
</g>
<!-- Step 4: Assemble Enhanced Prompt -->
<g transform="translate(590, 680)">
<circle cx="0" cy="0" r="10" fill="var(--c-step-red)" />
<text x="0" y="4.5" text-anchor="middle" class="font-sans step-text">4</text>
</g>
<!-- Step 5: Inference Request -->
<g transform="translate(740, 815)">
<circle cx="0" cy="0" r="10" fill="var(--c-step-red)" />
<text x="0" y="4.5" text-anchor="middle" class="font-sans step-text">5</text>
</g>
<!-- Step 6: Return Result -->
<g transform="translate(780, 815)">
<circle cx="0" cy="0" r="10" fill="var(--c-step-red)" />
<text x="0" y="4.5" text-anchor="middle" class="font-sans step-text">6</text>
</g>
<!-- Flow Legend Box (Left Side) -->
<g transform="translate(20, 360)">
<rect x="0" y="0" width="240" height="180" rx="8" fill="#FEF2F2" stroke="var(--c-step-red)" stroke-width="1.5" />
<text x="120" y="25" text-anchor="middle" class="font-sans" font-size="14" font-weight="bold" fill="var(--c-step-red)">MVP 核心执行步骤流</text>
<line x1="15" y1="35" x2="225" y2="35" stroke="var(--c-step-red)" stroke-dasharray="2 2" />
<!-- List Items -->
<g transform="translate(15, 55)">
<circle cx="6" cy="-4" r="6" fill="var(--c-step-red)" />
<text x="6" y="0" text-anchor="middle" class="font-sans step-text" font-size="9">1</text>
<text x="18" y="0" class="font-sans card-text" fill="#000000">接收初始查询与资源请求</text>
</g>
<g transform="translate(15, 75)">
<circle cx="6" cy="-4" r="6" fill="var(--c-step-red)" />
<text x="6" y="0" text-anchor="middle" class="font-sans step-text" font-size="9">2</text>
<text x="18" y="0" class="font-sans card-text" fill="#000000">5 Whys 深度模板分解</text>
</g>
<g transform="translate(15, 95)">
<circle cx="6" cy="-4" r="6" fill="var(--c-step-red)" />
<text x="6" y="0" text-anchor="middle" class="font-sans step-text" font-size="9">3</text>
<text x="18" y="0" class="font-sans card-text" fill="#000000">提取外部资源与本地知识</text>
</g>
<g transform="translate(15, 115)">
<circle cx="6" cy="-4" r="6" fill="var(--c-step-red)" />
<text x="6" y="0" text-anchor="middle" class="font-sans step-text" font-size="9">4</text>
<text x="18" y="0" class="font-sans card-text" fill="#000000">注入上下文生成合成提示词</text>
</g>
<g transform="translate(15, 135)">
<circle cx="6" cy="-4" r="6" fill="var(--c-step-red)" />
<text x="6" y="0" text-anchor="middle" class="font-sans step-text" font-size="9">5</text>
<text x="18" y="0" class="font-sans card-text" fill="#000000">发起大模型多步推理</text>
</g>
<g transform="translate(15, 155)">
<circle cx="6" cy="-4" r="6" fill="var(--c-step-red)" />
<text x="6" y="0" text-anchor="middle" class="font-sans step-text" font-size="9">6</text>
<text x="18" y="0" class="font-sans card-text" fill="#000000">组装并返回深度研究结果</text>
</g>
</g>
</g>
</g>
<!--
===========================================================================
底部图例与注释块 (Legend & Key Block)
===========================================================================
-->
<g id="legend" transform="translate(640, 1100)">
<rect x="-440" y="-16" width="880" height="40" rx="4" fill="rgba(255, 255, 255, 0.9)" stroke="var(--c-neutral-gray)" stroke-width="0.5"/>
<g transform="translate(-420, 0)">
<text x="0" y="8" class="font-sans" font-size="13" font-weight="bold" fill="var(--c-neutral-gray)">组件与语义对照:</text>
<g transform="translate(130, 0)">
<rect x="-6" y="-6" width="12" height="12" rx="2" fill="var(--c-gov-blue)" />
<text x="12" y="8" class="font-sans" font-size="12" fill="var(--c-neutral-gray)">基础架构与路由网关</text>
</g>
<g transform="translate(290, 0)">
<rect x="-6" y="-6" width="12" height="12" rx="2" fill="var(--c-risk-amber)" />
<text x="12" y="8" class="font-sans" font-size="12" fill="var(--c-neutral-gray)">请求分发与控制器</text>
</g>
<g transform="translate(450, 0)">
<rect x="-6" y="-6" width="12" height="12" rx="2" fill="var(--c-local-green)" />
<text x="12" y="8" class="font-sans" font-size="12" fill="var(--c-neutral-gray)">核心策略与业务逻辑</text>
</g>
<g transform="translate(610, 0)">
<rect x="-6" y="-6" width="12" height="12" rx="2" fill="var(--c-cloud-blue)" />
<text x="12" y="8" class="font-sans" font-size="12" fill="var(--c-neutral-gray)">远端第三方 AI 与资源</text>
</g>
</g>
</g>
<!--
===========================================================================
底部许可声明
===========================================================================
-->
<text x="640" y="1160" text-anchor="middle" class="font-sans" font-size="11" fill="var(--c-neutral-gray)">
本作品采用 CC-BY-SA 4.0 进行许可,© 2025-2026 Gitconomy Research社区
</text>
</svg>

After

Width:  |  Height:  |  Size: 22 KiB