Available Component Types and Variants in Archify: A Complete Guide

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 and drive the default styling system:

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 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:

{
  "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:

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:

<!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:

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.

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