企业官网建设流程全解析

LikeC4主题定制：创建符合企业品牌的设计系统

【免费下载链接】likec4Visualize, collaborate, and evolve the software architecture with always actual and live diagrams from your code项目地址: https://gitcode.com/GitHub_Trending/li/likec4

LikeC4是一款强大的软件架构可视化工具，它能从代码中生成实时更新的架构图，帮助团队协作和演进软件架构。通过主题定制功能，你可以轻松创建符合企业品牌风格的设计系统，让架构图在保持专业性的同时，展现独特的品牌个性。

为什么需要主题定制？

在现代企业环境中，一致的品牌形象至关重要。架构图作为沟通工具，不仅需要准确传达信息，还应体现企业的视觉风格。LikeC4的主题定制功能允许你：

• 匹配企业的品牌色彩方案
• 调整元素大小和样式以适应不同场景
• 统一跨团队的架构图视觉语言
• 增强图表的可读性和专业感

主题定制的核心概念

LikeC4的主题系统基于两个主要概念：主题覆盖和默认样式。通过这两个概念的组合，你可以实现从简单到复杂的各种定制需求。

主题覆盖（Theme Overrides）

主题覆盖允许你修改LikeC4的基础主题，包括颜色和尺寸。你可以定义全局颜色变量，然后在整个架构图中使用这些变量，确保视觉一致性。

默认样式（Default Styles）

默认样式用于设置元素和关系的默认属性。这些值将应用于所有元素，除非在规范中明确指定了其他属性。

开始定制你的第一个主题

1. 创建配置文件

首先，在你的项目根目录下创建一个配置文件。LikeC4支持多种格式的配置文件，包括JSON、JavaScript和TypeScript。对于主题定制，推荐使用TypeScript以获得更好的类型提示和验证。

// likec4.config.ts import { defineConfig, defineTheme } from '@likec4/config' export default defineConfig({ name: 'my-project', title: 'My Project Architecture', styles: { theme: defineTheme({ // 主题配置将在这里添加 }), defaults: { // 默认样式将在这里添加 } } })

2. 定义品牌色彩

品牌色彩是主题定制的核心。你可以通过theme.colors配置项来定义企业的品牌色彩。这些颜色可以是简单的CSS值，也可以是详细的对象，指定元素不同部分的颜色。

// likec4.config.ts import { defineConfig, defineTheme, defineThemeColor } from '@likec4/config' export default defineConfig({ name: 'my-project', title: 'My Project Architecture', styles: { theme: defineTheme({ colors: { primary: '#0055D1', // 企业主色调 secondary: '#36B37E', // 企业辅助色 accent: '#FF5630', // 强调色 neutral: defineThemeColor({ elements: { fill: '#F4F5F7', stroke: '#DADDE1', hiContrast: '#172B4D', loContrast: '#6B7785' }, relationships: { line: '#DADDE1', label: '#172B4D', labelBg: 'rgba(244, 245, 247, 0.8)' } }) } }), defaults: { color: 'primary', // 默认使用主色调 relationship: { color: 'neutral' // 关系线使用中性色 } } } })

3. 调整元素尺寸

除了颜色，你还可以调整元素的默认尺寸。通过theme.sizes配置项，你可以定义不同大小的元素尺寸，然后在架构图中根据需要使用这些尺寸。

// likec4.config.ts export default defineConfig({ name: 'my-project', // ...其他配置 styles: { theme: defineTheme({ // ...颜色配置 sizes: { sm: { width: 120, height: 80 }, md: { width: 180, height: 100 }, lg: { width: 240, height: 140 } } }), defaults: { size: 'md', // 默认使用中等尺寸 // ...其他默认样式 } } })

4. 设置默认样式

默认样式允许你设置所有元素和关系的默认属性。这包括边框样式、透明度、关系线样式等。

// likec4.config.ts export default defineConfig({ name: 'my-project', // ...其他配置 styles: { theme: defineTheme({ // ...主题配置 }), defaults: { border: 'solid', opacity: 100, size: 'md', color: 'primary', // 组的默认样式 group: { color: 'neutral', opacity: 15, border: 'dashed' }, // 关系的默认样式 relationship: { color: 'neutral', line: 'solid', arrow: 'vee' } } } })

应用主题到架构图

完成主题配置后，你可以在架构图中使用这些主题设置。下面是一个简单的示例：

model { user = person { color: accent } frontend = service { label: "Frontend Application" description: "React-based single page application" } backend = service { label: "Backend API" description: "Node.js REST API" size: lg } database = database { label: "Database" description: "PostgreSQL database" color: secondary } user -> frontend: "Uses" frontend -> backend: "Calls API" backend -> database: "Reads/writes data" } view main { include * autoLayout }

应用自定义主题后，你的架构图将呈现出企业品牌的视觉风格，如下所示：

高级主题定制技巧

扩展共享主题

如果你的组织有多个项目，可以创建共享主题并在各个项目中扩展它。这确保了所有项目的架构图保持一致的视觉风格。

// shared-theme.json { "styles": { "theme": { "colors": { "primary": "#0055D1", "secondary": "#36B37E", "accent": "#FF5630", "neutral": { "elements": { "fill": "#F4F5F7", "stroke": "#DADDE1", "hiContrast": "#172B4D", "loContrast": "#6B7785" } } } } } }

然后在项目配置中扩展这个共享主题：

// likec4.config.json { "name": "my-project", "extends": "../shared/shared-theme.json", "styles": { "defaults": { "color": "primary" } } }

使用TypeScript实现复杂主题逻辑

对于更复杂的主题需求，你可以使用TypeScript来实现条件逻辑和动态主题生成。

// likec4.config.ts import { defineConfig, defineTheme } from '@likec4/config' // 根据环境变量切换主题 const isDarkMode = process.env.LIKEC4_THEME === 'dark' const theme = defineTheme({ colors: { primary: isDarkMode ? '#4080FF' : '#0055D1', // 其他颜色... } }) export default defineConfig({ name: 'my-project', styles: { theme, // ...其他样式配置 } })

主题定制最佳实践

1. 保持一致性：确保主题颜色和样式与企业品牌指南保持一致。

2. 注重可读性：不要为了美观而牺牲图表的可读性。确保文本与背景之间有足够的对比度。

3. 建立主题库：为不同的场景（如演示、文档、内部沟通）创建不同的主题变体。

4. 定期审查：随着品牌的演变，定期审查和更新主题配置。

5. 共享最佳实践：在团队内部分享主题定制的最佳实践和技巧。

通过LikeC4的主题定制功能，你可以轻松创建符合企业品牌的架构图设计系统。无论是简单的颜色调整，还是复杂的样式定制，LikeC4都能满足你的需求，帮助你创建既专业又具有品牌特色的架构可视化作品。

开始使用LikeC4定制你的企业主题，让架构图成为品牌传播的一部分！

【免费下载链接】likec4Visualize, collaborate, and evolve the software architecture with always actual and live diagrams from your code项目地址: https://gitcode.com/GitHub_Trending/li/likec4