forked from new_org/Project-Caffeine
267 lines
14 KiB
XML
267 lines
14 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 970" width="100%" height="100%">
|
||
<!--
|
||
================================================================================
|
||
图表名称：个人级研究助手智能体 - 开发框架与技术栈架构图
|
||
文件命名：project-caffeine-tech-stack-framework.svg
|
||
用途：展示从宿主端到三个核心 MCP Server 的底层技术栈、核心算法、Monorepo工程化及安全交互框架。
|
||
版本：v2.0.0
|
||
作者：Gitconomy Research-郭晧
|
||
SPDX-License-Identifier: MIT & CC-BY-SA-4.0
|
||
创建日期：2026-02-27
|
||
更新日期：2026-03-08
|
||
================================================================================
|
||
-->
|
||
|
||
<!-- Background: Solid White -->
|
||
<rect width="100%" height="100%" fill="#FFFFFF" />
|
||
|
||
<defs>
|
||
<!-- CSS 变量与全局样式 -->
|
||
<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: #FF991F;
|
||
--c-risk-amber-light: rgba(255, 153, 31, 0.08);
|
||
--c-neutral-gray: #475569;
|
||
--c-neutral-gray-light: #F1F5F9;
|
||
--c-gov-blue: #0052CC;
|
||
--c-op-green: #00875A;
|
||
|
||
/* 字体系统降级适配 */
|
||
--font-sans: 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
|
||
--font-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;
|
||
}
|
||
|
||
/* 文本工具类 */
|
||
.font-sans { font-family: var(--font-sans); }
|
||
.font-mono { font-family: var(--font-mono); }
|
||
.text-bold { font-weight: bold; }
|
||
</style>
|
||
|
||
<!-- 箭头标记定义 -->
|
||
<marker id="arrow-green" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
||
<path d="M 0 0 L 10 5 L 0 10 z" fill="var(--c-local-green)" />
|
||
</marker>
|
||
<marker id="arrow-amber" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
||
<path d="M 0 0 L 10 5 L 0 10 z" fill="var(--c-risk-amber)" />
|
||
</marker>
|
||
<marker id="arrow-blue" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
||
<path d="M 0 0 L 10 5 L 0 10 z" fill="var(--c-cloud-blue)" />
|
||
</marker>
|
||
</defs>
|
||
|
||
<!-- ==========================================
|
||
1. 标题区域 (Title Block)
|
||
=========================================== -->
|
||
<g id="title-block" transform="translate(500, 40)">
|
||
<!-- 1. Figure ID -->
|
||
<text y="0" text-anchor="middle" class="font-mono text-bold" font-size="12" fill="var(--c-neutral-gray)" letter-spacing="1">FIGURE-02</text>
|
||
|
||
<!-- 2. Main Title -->
|
||
<text y="30" text-anchor="middle" class="font-sans text-bold" font-size="24" fill="#000000">Project Caffeine 开发框架与技术栈</text>
|
||
|
||
<!-- 3. Breadcrumbs -->
|
||
<text y="55" text-anchor="middle" class="font-mono" font-size="14" fill="var(--c-neutral-gray)">Framework > Tech Stack > Monolithic Server</text>
|
||
|
||
<!-- 4. Context Indicator (Y=70, 高度3，底部为 Y=73。相对于 translate(500, 40)，绝对底部 Y=113) -->
|
||
<rect x="-30" y="70" width="60" height="3" fill="var(--c-local-green)" />
|
||
</g>
|
||
|
||
<!-- ==========================================
|
||
2. 核心架构主体 (Diagram Content)
|
||
为了与标题底部(113)精确保持50间距，设定 translate Y 为 163
|
||
=========================================== -->
|
||
<g id="diagram-content" transform="translate(0, 163)">
|
||
|
||
<!-- 外部客户端 (MCP Client Desktop) 笔记本图标 -->
|
||
<g id="mcp-client" transform="translate(500, 0)">
|
||
<!-- 屏幕外框 -->
|
||
<rect x="-35" y="0" width="70" height="45" rx="4" fill="none" stroke="var(--c-cloud-blue)" stroke-width="3"/>
|
||
<!-- 屏幕内侧 -->
|
||
<rect x="-31" y="4" width="62" height="37" rx="1" fill="var(--c-cloud-blue-light)"/>
|
||
<!-- 笔记本底座 -->
|
||
<path d="M-45,45 L45,45 L52,52 L-52,52 Z" fill="var(--c-cloud-blue)"/>
|
||
<!-- 触控板区 -->
|
||
<rect x="-8" y="47" width="16" height="3" fill="#FFFFFF" opacity="0.5"/>
|
||
<!-- 键盘区装饰 -->
|
||
<path d="M-35,46 L35,46 L38,49 L-38,49 Z" fill="#FFFFFF" opacity="0.2"/>
|
||
|
||
<text x="0" y="75" text-anchor="middle" class="font-sans text-bold" font-size="14" fill="var(--c-cloud-blue)">Client (Claude Desktop / Cherry Studio)</text>
|
||
</g>
|
||
|
||
<!-- 连接线条：客户端到 MCP Server -->
|
||
<line x1="500" y1="85" x2="500" y2="135" stroke="var(--c-local-green)" stroke-width="2" marker-end="url(#arrow-green)" />
|
||
|
||
<!-- 单体服务器容器 (整体向下偏移以容纳客户端) -->
|
||
<g id="monolithic-server" transform="translate(0, 100)">
|
||
|
||
<!-- 单体服务器边界 (Monolithic Boundary) -->
|
||
<g id="monolithic-boundary">
|
||
<rect x="60" y="0" width="880" height="570" rx="12" fill="none" stroke="var(--c-local-green)" stroke-width="2" stroke-dasharray="6 4" />
|
||
|
||
<!-- 边界标签 -->
|
||
<rect x="80" y="-12" width="220" height="24" fill="#FFFFFF" />
|
||
<text x="90" y="4" class="font-mono text-bold" font-size="14" fill="var(--c-local-green)">📦 Monolithic MCP Server</text>
|
||
</g>
|
||
|
||
<!-- 内部连接线条 (Data Flows) -->
|
||
<g id="data-flows">
|
||
<!-- Core to Zod (Sync) -->
|
||
<line x1="380" y1="190" x2="340" y2="190" stroke="var(--c-local-green)" stroke-width="2" marker-end="url(#arrow-green)" marker-start="url(#arrow-green)" />
|
||
|
||
<!-- Core to Axios (Async) -->
|
||
<line x1="620" y1="190" x2="660" y2="190" stroke="var(--c-risk-amber)" stroke-width="2" stroke-dasharray="4 2" marker-end="url(#arrow-amber)" />
|
||
|
||
<!-- Core to Runtime -->
|
||
<line x1="500" y1="230" x2="500" y2="260" stroke="var(--c-local-green)" stroke-width="2" marker-end="url(#arrow-green)" />
|
||
|
||
<!-- Axios to External API (Cloud) -->
|
||
<line x1="900" y1="190" x2="950" y2="190" stroke="var(--c-cloud-blue)" stroke-width="2" stroke-dasharray="4 2" marker-end="url(#arrow-blue)" />
|
||
<text x="960" y="194" class="font-mono" font-size="12" fill="var(--c-cloud-blue)">Academic APIs</text>
|
||
</g>
|
||
|
||
<!-- ================== 层级 1：协议与网络层 (Y=40) ================== -->
|
||
<!-- MCP SDK -->
|
||
<g id="card-mcp" transform="translate(380, 40)">
|
||
<rect width="240" height="80" rx="6" fill="var(--c-cloud-blue-light)" stroke="var(--c-cloud-blue)" stroke-width="1.5" />
|
||
<rect width="6" height="80" rx="3" fill="var(--c-cloud-blue)" />
|
||
<text x="20" y="24" class="font-sans text-bold" font-size="14" fill="var(--c-cloud-blue)">协议层 (Protocol)</text>
|
||
<text x="20" y="46" class="font-mono text-bold" font-size="16" fill="#1e293b">MCP SDK</text>
|
||
<text x="20" y="66" class="font-sans" font-size="12" fill="var(--c-neutral-gray)">@modelcontextprotocol/sdk (stdio/SSE)</text>
|
||
</g>
|
||
|
||
<!-- ================== 层级 2：核心业务层 (Y=150) ================== -->
|
||
<!-- Zod -->
|
||
<g id="card-zod" transform="translate(100, 150)">
|
||
<rect width="240" height="80" rx="6" fill="var(--c-local-green-light)" stroke="var(--c-local-green)" stroke-width="1.5" />
|
||
<rect width="6" height="80" rx="3" fill="var(--c-local-green)" />
|
||
<text x="20" y="24" class="font-sans text-bold" font-size="14" fill="var(--c-local-green)">校验工具 (Validation)</text>
|
||
<text x="20" y="46" class="font-mono text-bold" font-size="16" fill="#1e293b">Zod</text>
|
||
<text x="20" y="66" class="font-sans" font-size="12" fill="var(--c-neutral-gray)">运行时类型校验与参数安全验证</text>
|
||
</g>
|
||
|
||
<!-- TypeScript -->
|
||
<g id="card-ts" transform="translate(380, 150)">
|
||
<rect width="240" height="80" rx="6" fill="var(--c-local-green-light)" stroke="var(--c-local-green)" stroke-width="2" />
|
||
<rect width="6" height="80" rx="3" fill="var(--c-local-green)" />
|
||
<text x="20" y="24" class="font-sans text-bold" font-size="14" fill="var(--c-local-green)">核心语言 (Core Language)</text>
|
||
<text x="20" y="46" class="font-mono text-bold" font-size="16" fill="#1e293b">TypeScript</text>
|
||
<text x="20" y="66" class="font-sans" font-size="12" fill="var(--c-neutral-gray)">所有服务逻辑与控制流强制使用</text>
|
||
</g>
|
||
|
||
<!-- axios -->
|
||
<g id="card-axios" transform="translate(660, 150)">
|
||
<rect width="240" height="80" rx="6" fill="var(--c-risk-amber-light)" stroke="var(--c-risk-amber)" stroke-width="1.5" />
|
||
<rect width="6" height="80" rx="3" fill="var(--c-risk-amber)" />
|
||
<text x="20" y="24" class="font-sans text-bold" font-size="14" fill="var(--c-risk-amber)">HTTP 客户端 (Network I/O)</text>
|
||
<text x="20" y="46" class="font-mono text-bold" font-size="16" fill="#1e293b">axios</text>
|
||
<text x="20" y="66" class="font-sans" font-size="12" fill="var(--c-neutral-gray)">封装学术 API，支持重试与速率限制</text>
|
||
</g>
|
||
|
||
<!-- ================== 层级 3：运行环境层 (Y=260) ================== -->
|
||
<!-- Node.js -->
|
||
<g id="card-node" transform="translate(380, 260)">
|
||
<rect width="240" height="80" rx="6" fill="var(--c-local-green-light)" stroke="var(--c-local-green)" stroke-width="1.5" />
|
||
<rect width="6" height="80" rx="3" fill="var(--c-local-green)" />
|
||
<text x="20" y="24" class="font-sans text-bold" font-size="14" fill="var(--c-local-green)">运行环境 (Runtime)</text>
|
||
<text x="20" y="46" class="font-mono text-bold" font-size="16" fill="#1e293b">Node.js LTS v20+</text>
|
||
<text x="20" y="66" class="font-sans" font-size="12" fill="var(--c-neutral-gray)">单进程异步非阻塞 I/O 引擎</text>
|
||
</g>
|
||
|
||
<!-- 分隔线 -->
|
||
<line x1="80" y1="365" x2="920" y2="365" stroke="var(--c-neutral-gray)" stroke-width="1" stroke-dasharray="2 4" />
|
||
<text x="100" y="360" class="font-mono" font-size="12" fill="var(--c-neutral-gray)">DevTools & Engineering Infrastructure</text>
|
||
|
||
<!-- ================== 层级 4：工程化基础工具 (Y=390) ================== -->
|
||
<!-- Winston -->
|
||
<g id="card-log" transform="translate(100, 390)">
|
||
<rect width="240" height="80" rx="6" fill="var(--c-neutral-gray-light)" stroke="var(--c-neutral-gray)" stroke-width="1" />
|
||
<rect width="6" height="80" rx="3" fill="var(--c-neutral-gray)" />
|
||
<text x="20" y="24" class="font-sans text-bold" font-size="14" fill="var(--c-neutral-gray)">日志工具 (Logging)</text>
|
||
<text x="20" y="46" class="font-mono text-bold" font-size="16" fill="#1e293b">winston / log4js</text>
|
||
<text x="20" y="66" class="font-sans" font-size="12" fill="#64748b">生产级结构化日志记录与追踪</text>
|
||
</g>
|
||
|
||
<!-- VS Code -->
|
||
<g id="card-vscode" transform="translate(380, 390)">
|
||
<rect width="240" height="80" rx="6" fill="var(--c-neutral-gray-light)" stroke="var(--c-neutral-gray)" stroke-width="1" />
|
||
<rect width="6" height="80" rx="3" fill="var(--c-neutral-gray)" />
|
||
<text x="20" y="24" class="font-sans text-bold" font-size="14" fill="var(--c-neutral-gray)">调试工具 (Debugging)</text>
|
||
<text x="20" y="46" class="font-mono text-bold" font-size="16" fill="#1e293b">VS Code (--inspect)</text>
|
||
<text x="20" y="66" class="font-sans" font-size="12" fill="#64748b">统一入口进程挂载与源码级断点</text>
|
||
</g>
|
||
|
||
<!-- Jest + k6 -->
|
||
<g id="card-test" transform="translate(660, 390)">
|
||
<rect width="240" height="80" rx="6" fill="var(--c-neutral-gray-light)" stroke="var(--c-neutral-gray)" stroke-width="1" />
|
||
<rect width="6" height="80" rx="3" fill="var(--c-neutral-gray)" />
|
||
<text x="20" y="24" class="font-sans text-bold" font-size="14" fill="var(--c-neutral-gray)">测试工具 (Testing)</text>
|
||
<text x="20" y="46" class="font-mono text-bold" font-size="16" fill="#1e293b">Jest + k6</text>
|
||
<text x="20" y="66" class="font-sans" font-size="12" fill="#64748b">服务单元测试与接口负载压测</text>
|
||
</g>
|
||
|
||
<!-- ================== 层级 5：包与仓库管理 (Y=500) ================== -->
|
||
<!-- npm -->
|
||
<g id="card-npm" transform="translate(380, 480)">
|
||
<rect width="240" height="60" rx="6" fill="var(--c-neutral-gray-light)" stroke="var(--c-neutral-gray)" stroke-width="1" />
|
||
<text x="120" y="25" text-anchor="middle" class="font-sans text-bold" font-size="14" fill="var(--c-neutral-gray)">包管理 (Package Config)</text>
|
||
<text x="120" y="45" text-anchor="middle" class="font-mono text-bold" font-size="14" fill="#1e293b">npm (单一 package.json)</text>
|
||
</g>
|
||
|
||
</g>
|
||
</g>
|
||
|
||
<!-- ==========================================
|
||
3. 底部图例与注释块 (Legend & Key Block)
|
||
向下调整布局至 Y=890 适应新高度
|
||
=========================================== -->
|
||
<g id="legend" transform="translate(500, 890)">
|
||
<!-- 统一的半透明背景容器 -->
|
||
<rect x="-420" y="-16" width="840" height="40" rx="4" fill="rgba(255, 255, 255, 0.9)" stroke="var(--c-neutral-gray)" stroke-width="0.5" />
|
||
|
||
<g transform="translate(-400, 0)">
|
||
<!-- 图例引导文本 -->
|
||
<text x="0" y="8" class="font-sans text-bold" font-size="12" fill="var(--c-neutral-gray)">图例说明:</text>
|
||
|
||
<!-- 图例项 1: Cloud/External -->
|
||
<g transform="translate(80, 0)">
|
||
<rect x="0" y="-2" width="12" height="12" rx="2" fill="var(--c-cloud-blue)" />
|
||
<text x="18" y="8" class="font-mono" font-size="12" fill="var(--c-neutral-gray)">接口/外部协议 (Interface)</text>
|
||
</g>
|
||
|
||
<!-- 图例项 2: Local/Core -->
|
||
<g transform="translate(260, 0)">
|
||
<rect x="0" y="-2" width="12" height="12" rx="2" fill="var(--c-local-green)" />
|
||
<text x="18" y="8" class="font-mono" font-size="12" fill="var(--c-neutral-gray)">核心引擎/计算 (Core/Sync)</text>
|
||
</g>
|
||
|
||
<!-- 图例项 3: Network I/O -->
|
||
<g transform="translate(440, 0)">
|
||
<rect x="0" y="-2" width="12" height="12" rx="2" fill="var(--c-risk-amber)" />
|
||
<text x="18" y="8" class="font-mono" font-size="12" fill="var(--c-neutral-gray)">网络/异步流 (Async I/O)</text>
|
||
</g>
|
||
|
||
<!-- 图例项 4: Engineering -->
|
||
<g transform="translate(620, 0)">
|
||
<rect x="0" y="-2" width="12" height="12" rx="2" fill="var(--c-neutral-gray)" />
|
||
<text x="18" y="8" class="font-mono" font-size="12" fill="var(--c-neutral-gray)">基建/工具 (DevTools)</text>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
|
||
<!-- ==========================================
|
||
4. 底部许可声明 (License)
|
||
向下调整至 Y=950
|
||
=========================================== -->
|
||
<g id="license" transform="translate(500, 950)">
|
||
<text text-anchor="middle" class="font-sans" font-size="10" fill="#94a3b8">
|
||
本作品采用 CC-BY-SA 4.0 进行许可，© 2025-2026 Gitconomy Research
|
||
</text>
|
||
</g>
|
||
|
||
</svg>
|
