nexus/wiki/concepts/7种视觉风格系统.md

title, type, tags, sources, last_updated

title	type	tags	sources	last_updated
7种视觉风格系统	concept		fireworks-tech-graph	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