self-media-james/articles/002/mermaid-tech.css
邓文兵 5f639d8400 docs(architecture): 添加 OpenClaw 系统架构全景图解
- 新增 15 个 Mermaid 架构图解文件,涵盖系统核心组件
- 添加系统架构全景图,展示外部消息平台到 LLM 提供商的完整流程
- 新增网关层、通道管理、路由层、ACP 协议层、Agent 运行时等模块架构图
- 添加记忆系统、心跳系统、插件系统、安全架构等专项设计图
- 新增消息流转序列图和启动流程图
- 添加容器化部署架构和数据存储结构图
- 配置 Mermaid 图表样式,统一科技感视觉主题
- 添加完整的系统设计模式思维导图
- 新增 456 行深度架构分析文章,覆盖六大核心子系统
2026-03-12 09:31:11 +08:00

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;
}