# Available Component Types and Variants in Archify: A Complete Guide

> Explore Archify's seven component types and five visual variants. Understand frontend, backend, database, cloud, security, messagebus, and external components with Signal Flow, Blueprint, Editorial, Classic, and Flow styles.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: api-reference
- Published: 2026-08-28

---

**Archify defines seven core component types—frontend, backend, database, cloud, security, messagebus, and external—and supports five visual variants (Signal Flow, Blueprint, Editorial, Classic, and Flow) that govern the diagram’s color palette, animation behavior, and rendering style.**

Archify, maintained in the `tt-a1i/archify` repository, uses a strict schema to classify diagram elements by **component type** while allowing runtime customization through **visual presets**. These available component types and variants in Archify determine everything from CSS color variables to motion characteristics, making them foundational to creating consistent architecture, workflow, and sequence diagrams.

## The Seven Built-In Component Types

Archify recognizes seven canonical component kinds that function across all diagram types, including Architecture, Workflow, Sequence, Data-flow, and Lifecycle diagrams. These types are hardcoded in the test suite at [`archify/test/v1-compatibility.test.mjs`](https://github.com/tt-a1i/archify/blob/main/archify/test/v1-compatibility.test.mjs#L48-L57) and drive the default styling system:

```js
const componentTypes = [
  'frontend',
  'backend',
  'database',
  'cloud',
  'security',
  'messagebus',
  'external'
];

```

Each type maps to specific CSS custom properties (for example, `--frontend-fill` and `--backend-stroke`) that the viewer uses for automatic legend generation, role-based lensing, and filtering. When you declare a component with `"type": "database"`, Archify automatically applies the corresponding color palette and iconography without requiring manual style overrides.

## Visual Variants and Presets

**Visual variants**, also called presets, change the global appearance of a diagram, controlling animation speed, edge styling, and color emphasis. Users can switch variants at runtime via the `variant=` URL query parameter, the UI’s “Visual style” picker (accessed with the `S` key), or CLI flags.

### Available Visual Presets

The variant registry is defined in [`experiments/visual-evolution/prototype.mjs`](https://github.com/tt-a1i/archify/blob/main/experiments/visual-evolution/prototype.mjs#L323-L347) and exposed through the viewer toolbar. Archify ships with the following presets:

- **Signal Flow** (`signal`) — The default preset featuring motion-forward animations and animated edges for live presentations.
- **Blueprint** (`blueprint`) — A static, high-precision style optimized for engineering reviews and technical documentation.
- **Editorial** (`ember`) — A publication-ready layout with minimal motion, designed for exported assets and slide decks.
- **Classic** (`classic`) — A stable, high-contrast default suitable for legacy browsers and accessibility requirements.
- **Flow** (`flow`) — An alias of `signal` maintained for backward compatibility with earlier Archify schemas.

The active variant is stored in the document attribute `data-prototype-variant`, which the viewer reads to initialize the rendering engine.

## Practical Implementation Examples

### Declaring All Component Types in JSON

To create a diagram utilizing every available component type, structure your JSON according to the Archify schema:

```json
{
  "schema_version": 1,
  "diagram_type": "architecture",
  "meta": { 
    "title": "All component types", 
    "visual_preset": "signal-flow" 
  },
  "components": [
    { "id": "fe", "type": "frontend", "label": "Web UI", "pos": [40, 60], "size": [120, 52] },
    { "id": "be", "type": "backend", "label": "API", "pos": [40, 150], "size": [120, 52] },
    { "id": "db", "type": "database", "label": "Postgres", "pos": [40, 240], "size": [120, 52] },
    { "id": "cl", "type": "cloud", "label": "AWS", "pos": [40, 330], "size": [120, 52] },
    { "id": "sec", "type": "security", "label": "OAuth", "pos": [40, 420], "size": [120, 52] },
    { "id": "mb", "type": "messagebus", "label": "Kafka", "pos": [40, 510], "size": [120, 52] },
    { "id": "ext", "type": "external", "label": "3rd-party", "pos": [40, 600], "size": [120, 52] }
  ],
  "connections": []
}

```

Render this file using the CLI:

```bash
node archify/bin/archify.mjs render architecture examples/minimal-architecture.json --out arch.html

```

### Switching Variants in the Browser

Control the visual preset declaratively by setting the `data-prototype-variant` attribute on the HTML element:

```html
<!DOCTYPE html>
<html data-prototype-variant="blueprint">
<head>
  <script src="archify/viewer.js"></script>
</head>
<body>
  <div id="archify-root"></div>
  <script>
    fetch('examples/web-app.architecture.json')
      .then(r => r.json())
      .then(json => Archify.render('#archify-root', json));
  </script>
</body>
</html>

```

Toggle variants dynamically by appending `?variant=ember` to the URL or pressing `S` to cycle through the toolbar options.

### Setting Presets via CLI

Override the default visual style when generating static assets:

```bash
node archify/bin/archify.mjs render architecture \
  examples/minimal-architecture.json \
  --out minimal.html \
  --preset blueprint

```

Valid options for the `--preset` flag include `signal-flow`, `blueprint`, `editorial`, and `classic`.

## Summary

- Archify defines **seven component types** (frontend, backend, database, cloud, security, messagebus, external) that work across all diagram schemas.
- The **visual variant** system includes five presets: Signal Flow (default), Blueprint, Editorial, Classic, and Flow.
- Component types are validated in `v1-compatibility.test.mjs`, while variant logic resides in `prototype.mjs`.
- You can set variants via HTML attributes, URL parameters, keyboard shortcuts (`S`), or CLI `--preset` flags.
- Each component type automatically links to CSS custom properties for consistent theming.

## Frequently Asked Questions

### How do I change the visual style of an Archify diagram at runtime?

You can switch visual styles by appending `?variant=blueprint` (or `signal`, `ember`, `classic`) to the viewer URL, pressing the `S` key to cycle through the toolbar presets, or programmatically updating the `data-prototype-variant` attribute on the root HTML element. The viewer re-renders immediately without requiring a page reload.

### Can I create custom component types beyond the seven built-in ones?

No, the schema strictly enforces the seven canonical types defined in `archify/test/v1-compatibility.test.mjs`. While you can customize the appearance of these types through CSS overrides and custom palettes, the internal engine recognizes only frontend, backend, database, cloud, security, messagebus, and external for filtering and legend generation.

### What is the difference between the 'signal' and 'flow' variants?

There is no functional difference; `flow` is a legacy alias maintained for backward compatibility with older Archify files. Both keys trigger the **Signal Flow** preset, which features animated edges and motion-forward styling. New diagrams should use `signal` or `signal-flow` to ensure future compatibility.

### Where are component type color definitions stored?

Color mappings for component types are defined as CSS custom properties (variables like `--frontend-fill` and `--database-stroke`) within the viewer stylesheet. The viewer reads the component's `type` field and applies the corresponding variable automatically, as validated in the schema documentation at [`archify/schemas/README.md`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/README.md).