Visual Treatments for Different Component Types in Archify

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:

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.

Define a component with the security visual treatment:

{
  "id": "auth",
  "type": "security",
  "label": "Auth Service",
  "size": [120, 80],
  "pos": [400, 200]
}

This generates SVG output with the corresponding classes applied:

<rect x="400" y="200" width="120" height="80"
      class="c-security"
      stroke-width="1.5"/>
<text x="460" y="245" class="t-security">Auth Service</text>

Rendering Diagrams Programmatically

Import the architecture renderer and pass your JSON definition to generate the styled SVG:

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.

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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}