---
title: "7种视觉风格系统"
type: concept
tags: []
sources: [fireworks-tech-graph]
last_updated: 2026-04-18
---

## Description
fireworks-tech-graph 内置的 7 种视觉风格系统，每种风格定义了背景色、字体、颜色 Token、布局规范和使用场景推荐。

## The 7 Styles

| # | 名称 | 背景色 | 字体 | 适用场景 |
|---|------|--------|------|---------|
| 1 | **扁平图标风**（默认） | `#ffffff` | Helvetica | 博客、幻灯片、技术文档 |
| 2 | **暗黑极客风** | `#0f0f1a` | SF Mono / Fira Code | GitHub README、开发者文章 |
| 3 | **工程蓝图风** | `#0a1628` | Courier New | 架构设计文档、工程规范 |
| 4 | **Notion 极简风** | `#ffffff` | system-ui | Notion、Confluence、内部 Wiki |
| 5 | **玻璃态卡片风** | `#0d1117` 渐变 | Inter | 产品官网、演讲 Keynote |
| 6 | **Claude 官方风格** | `#f8f6f3` | system-ui | Anthropic 风格图表，温暖专业美学 |
| 7 | **OpenAI 官方风格** | `#ffffff` | system-ui | OpenAI 风格图表，简洁现代设计 |

## 风格选择指南

**UML 图类型：**
- 类图/组件图/包图：风格 1（扁平图标风）或风格 4（Notion极简风）
- 序列图/时序图：风格 2（暗黑极客风）
- 状态机图/活动图：风格 3（工程蓝图风）
- 用例图/交互图：风格 1（扁平图标风）

**AI/Agent 图类型：**
- RAG/Agentic Search：风格 2（暗黑极客风）或风格 5（玻璃态卡片风）
- 记忆架构：风格 3（工程蓝图风）
- Multi-Agent：风格 5（玻璃态卡片风）

**文档类型：**
- 内部文档：风格 4（Notion极简风）
- 技术博客：风格 1（扁平图标风）
- GitHub README：风格 2（暗黑极客风）
- 演示文稿：风格 5（玻璃态卡片风）或风格 6（Claude官方风格）

**品牌特定：**
- Anthropic/Claude 项目：风格 6（Claude官方风格）
- OpenAI 项目：风格 7（OpenAI官方风格）

## Key Enhancements
- `style_overrides`：微调标题对齐或配色 token
- `containers[].header_prefix` / `containers[].header_text`：工程编号分区标题（风格3）
- `containers[].side_label`：左侧 Layer Label（风格6）
- `window_controls` / `meta_*`：终端/文档风格顶部 chrome
- `blueprint_title_block`：蓝图标题信息框（风格3）

## Relationships
- [[7种视觉风格系统]] is implemented_by [[fireworks-tech-graph]]
- [[7种视觉风格系统]] is used_for [[14种UML图]]
- [[7种视觉风格系统]] is used_for [[RAG]]
- [[7种视觉风格系统]] is used_for [[AI Agent]]