- 新增 15 个 Mermaid 架构图解文件,涵盖系统核心组件 - 添加系统架构全景图,展示外部消息平台到 LLM 提供商的完整流程 - 新增网关层、通道管理、路由层、ACP 协议层、Agent 运行时等模块架构图 - 添加记忆系统、心跳系统、插件系统、安全架构等专项设计图 - 新增消息流转序列图和启动流程图 - 添加容器化部署架构和数据存储结构图 - 配置 Mermaid 图表样式,统一科技感视觉主题 - 添加完整的系统设计模式思维导图 - 新增 456 行深度架构分析文章,覆盖六大核心子系统
116 lines
2.7 KiB
CSS
116 lines
2.7 KiB
CSS
/* Sci-fi / Tech style for mermaid diagrams */
|
|
|
|
/* Node styling */
|
|
.node rect, .node polygon, .node circle, .node ellipse {
|
|
stroke-width: 2px !important;
|
|
filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.4)) !important;
|
|
rx: 8 !important;
|
|
ry: 8 !important;
|
|
}
|
|
|
|
/* All text white/cyan */
|
|
text, tspan {
|
|
fill: #e0f7fa !important;
|
|
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
|
|
}
|
|
|
|
/* Cluster/subgraph borders */
|
|
.cluster rect {
|
|
stroke: #1a6a8a !important;
|
|
stroke-width: 2px !important;
|
|
stroke-dasharray: 6 3 !important;
|
|
fill: rgba(10, 26, 46, 0.7) !important;
|
|
rx: 12 !important;
|
|
ry: 12 !important;
|
|
filter: drop-shadow(0 0 8px rgba(0, 184, 212, 0.2)) !important;
|
|
}
|
|
|
|
/* Cluster labels */
|
|
.cluster text, .cluster tspan {
|
|
fill: #4dd0e1 !important;
|
|
font-weight: 600 !important;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
/* Edge/arrow lines */
|
|
.edge-pattern-solid, .flowchart-link {
|
|
stroke: #00b8d4 !important;
|
|
stroke-width: 2px !important;
|
|
}
|
|
|
|
/* Arrow markers */
|
|
marker path {
|
|
fill: #00e5ff !important;
|
|
}
|
|
|
|
/* Sequence diagram lines */
|
|
.messageLine0, .messageLine1 {
|
|
stroke: #00b8d4 !important;
|
|
stroke-width: 2px !important;
|
|
}
|
|
|
|
/* Sequence diagram actors */
|
|
.actor {
|
|
stroke: #00e5ff !important;
|
|
fill: #0d2137 !important;
|
|
stroke-width: 2px !important;
|
|
filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.3)) !important;
|
|
}
|
|
|
|
/* Labels on edges */
|
|
.edgeLabel rect {
|
|
fill: #0a1628 !important;
|
|
opacity: 0.9 !important;
|
|
}
|
|
|
|
.edgeLabel span, .edgeLabel text, .edgeLabel tspan {
|
|
fill: #80deea !important;
|
|
color: #80deea !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
/* Note boxes */
|
|
.note {
|
|
fill: #112240 !important;
|
|
stroke: #00e5ff !important;
|
|
}
|
|
|
|
/* Mindmap specific */
|
|
.mindmap-node rect, .mindmap-node circle, .mindmap-node polygon {
|
|
filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.4)) !important;
|
|
}
|
|
|
|
.mindmap-node text, .mindmap-node tspan {
|
|
fill: #e0f7fa !important;
|
|
}
|
|
|
|
/* Activation bars in sequence diagrams */
|
|
.activation0, .activation1, .activation2 {
|
|
fill: #112240 !important;
|
|
stroke: #00e5ff !important;
|
|
}
|
|
|
|
/* Loop/alt boxes */
|
|
.loopLine {
|
|
stroke: #1a6a8a !important;
|
|
stroke-dasharray: 4 3 !important;
|
|
}
|
|
|
|
.loopText tspan, .loopText text {
|
|
fill: #4dd0e1 !important;
|
|
}
|
|
|
|
/* Label styling */
|
|
.label text, .label tspan {
|
|
fill: #e0f7fa !important;
|
|
}
|
|
|
|
/* Highlighted nodes with custom styles from mermaid */
|
|
[style*="fill:#4A90D9"], [style*="fill:#E74C3C"], [style*="fill:#27AE60"],
|
|
[style*="fill:#F39C12"], [style*="fill:#8E44AD"], [style*="fill:#9B59B6"],
|
|
[style*="fill:#2ECC71"], [style*="fill:#3498DB"], [style*="fill:#E67E22"] {
|
|
filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.6)) !important;
|
|
stroke: #00e5ff !important;
|
|
stroke-width: 2px !important;
|
|
}
|