# Visual Treatments for Different Component Types in Archify
> Discover how Archify uses visual treatments for component types with fill and text classes. Ensure consistent semantics across all diagram renderers.
- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: architecture
- Published: 2026-07-15
---
**Archify applies distinct CSS fill and text classes to each component type through centralized mappings in the geometry helper module, ensuring consistent visual semantics across all diagram renderers.**
The **tt-a1i/archify** repository implements a declarative styling system where visual treatments for different component types in Archify are controlled via type-to-class mappings. Each component receives a specific background color and text accent based on its `type` field, with fallbacks for undefined types to maintain diagram readability.
## How Visual Styling Works
Archify separates visual concerns into two class categories: **fill classes** (background colors, prefixed with `c-`) and **text classes** (label colors, prefixed with `t-`). The renderers look up these classes based on the component's `type` property and apply them to SVG elements during the rendering pipeline.
### Component Type to CSS Class Mapping
The following mappings define the visual treatments for all supported component types:
| Component type | Fill class (background) | Text class (label) |
|----------------|------------------------|-------------------|
| `frontend` | `c-frontend` | `t-frontend` |
| `backend` | `c-backend` | `t-backend` |
| `database` | `c-database` | `t-database` |
| `cloud` | `c-cloud` | `t-cloud` |
| `security` | `c-security` | `t-security` |
| `messagebus` | `c-messagebus` | `t-messagebus` |
| `external` | `c-external` | `t-external` |
These classes are applied to SVG rectangles and text elements, allowing CSS to control the actual color values. The repository's `docs/assets/archify-*.png` files demonstrate the rendered visual output for each type.
## Source Code Implementation
The type-to-class mappings are defined in **`archify/renderers/shared/geometry.mjs`** at lines 53-71. This module exports `componentFill` and `componentText` objects that map type strings to CSS class names.
The architecture renderer consumes these mappings in **`archify/renderers/architecture/render-architecture.mjs`** at lines 297-298:
```javascript
const fill = componentFill[c.type] || 'c-external';
const accent = componentText[c.type] || 't-muted';
```
The code uses the nullish coalescing pattern to provide sensible defaults: `'c-external'` for undefined fill types and `'t-muted'` for undefined text accents.
## Configuring Component Types in JSON
To apply a specific visual treatment, set the `type` field in your architecture definition. Valid types are enforced by **[`archify/schemas/architecture.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json)**.
Define a component with the security visual treatment:
```json
{
"id": "auth",
"type": "security",
"label": "Auth Service",
"size": [120, 80],
"pos": [400, 200]
}
```
This generates SVG output with the corresponding classes applied:
```svg
Auth Service
```
## Rendering Diagrams Programmatically
Import the architecture renderer and pass your JSON definition to generate the styled SVG:
```javascript
import { renderArchitecture } from './archify/renderers/architecture/render-architecture.mjs';
import archDef from './my-arch.json' assert { type: 'json' };
const svg = renderArchitecture(archDef);
console.log(svg);
```
The renderer automatically applies the appropriate `c-*` and `t-*` classes based on each component's `type` property as defined in **[`archify/examples/archify-repo.architecture.json`](https://github.com/tt-a1i/archify/blob/main/archify/examples/archify-repo.architecture.json)**.
## Summary
- Archify uses a centralized mapping system in `geometry.mjs` to translate component types into CSS classes.
- **Seven component types** are supported out of the box: `frontend`, `backend`, `database`, `cloud`, `security`, `messagebus`, and `external`.
- Each type maps to a `c-*` fill class and `t-*` text class, with fallbacks to `c-external` and `t-muted` for unknown types.
- The visual treatment is controlled declaratively via the `type` field in JSON component definitions.
- All renderers (architecture, workflow, sequence, data-flow) consume the same geometry module for consistent styling.
## Frequently Asked Questions
### What CSS classes does Archify use for component styling?
Archify uses `c-*` prefixed classes for background fills (e.g., `c-security`, `c-database`) and `t-*` prefixed classes for text labels (e.g., `t-frontend`, `t-backend`). These classes are applied to SVG elements, allowing external stylesheets to define the actual color values while the renderer controls the semantic mapping.
### How do I change the color of a component in Archify?
You change colors by modifying the `type` property in your component JSON definition to one of the seven supported types: `frontend`, `backend`, `database`, `cloud`, `security`, `messagebus`, or `external`. For custom colors, define your own CSS rules for the corresponding `c-*` and `t-*` classes, as the renderer applies these classes regardless of the stylesheet implementation.
### Where are component type mappings defined in the Archify source code?
The mappings reside in **`archify/renderers/shared/geometry.mjs`** at lines 53-71, which exports `componentFill` and `componentText` objects. The architecture renderer references these mappings at lines 297-298 of **`archify/renderers/architecture/render-architecture.mjs`** to assign classes during SVG generation.
### What happens if I use an undefined component type?
The renderer applies fallback classes: `c-external` for the background fill and `t-muted` for the text label. This ensures the diagram renders successfully even when encountering custom or misspelled type values, defaulting to neutral styling rather than failing.