Archify Component Types: The Complete Guide to Frontend, Backend, Database, Cloud, and Security Variants

The Archify component type variants are: frontend, backend, database, cloud, security, messagebus, and external.

These seven values form a strict enum defined in the shared schema and power how Archify categorizes every building block in a system architecture. This article breaks down each Archify component type variant, shows where they're declared in the source code, and provides runnable JSON examples you can adapt for your own diagrams.

---

Where Component Types Are Defined in Archify

Archify centralizes type definitions in [archify/schemas/common.schema.json](https://github.com/tt-a1i/archify/blob/main/archify/schemas/common.schema.json). The componentType property uses a JSON Schema enum to enforce valid values across all architecture files.

{
  "componentType": {
    "enum": [
      "frontend",
      "backend",
      "database",
      "cloud",
      "security",
      "messagebus",
      "external"
    ]
  }
}

Source: Lines 20–22 of archify/schemas/common.schema.json

The main architecture schema then references this definition when validating component objects. In [archify/schemas/architecture.schema.json](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json), you'll find components declared with their type field constrained by this shared enum.

Reference usage: Lines 90–92 of architecture.schema.json

---

The Seven Archify Component Type Variants Explained

Each component type variant carries semantic meaning that determines how Archify renders the element and what relationships it can form with other components.

frontend

Represents user-facing interfaces—web applications, mobile apps, desktop clients, or any surface that end users interact with directly.

{
  "id": "web",
  "type": "frontend",
  "label": "Web App",
  "sublabel": "React UI"
}

Source: Example from examples/maka-architecture.architecture.json, line 20

backend

Encapsulates server-side logic, API services, background workers, and business rule processors that frontend components call upon.

{
  "id": "api",
  "type": "backend",
  "label": "API Service",
  "sublabel": "Node.js"
}

database

Covers all persistent storage systems—relational databases, document stores, key-value caches, and search indexes.

{
  "id": "postgres",
  "type": "database",
  "label": "Postgres",
  "sublabel": "SQL store"
}

cloud

Represents managed cloud-native services that your architecture consumes rather than hosts directly: object storage, managed queues, CDN endpoints, serverless functions, and IaaS resources.

{
  "id": "s3",
  "type": "cloud",
  "label": "S3 Bucket",
  "sublabel": "Object storage"
}

security

Dedicated to authentication, authorization, encryption, secrets management, and other protective infrastructure components.

{
  "id": "jwt-guard",
  "type": "security",
  "label": "JWT Guard",
  "sublabel": "OAuth2"
}

messagebus

Event-driven and message-oriented middleware: streaming platforms, pub/sub systems, and queue-based communication layers that decouple producers from consumers.

{
  "id": "trace-bus",
  "type": "messagebus",
  "label": "Trace Bus",
  "sublabel": "Event stream"
}

external

The catch-all for anything outside your system boundary: third-party APIs, SaaS providers, manual user actions, or external data sources.

{
  "id": "github",
  "type": "external",
  "label": "GitHub",
  "sublabel": "repo webhook"
}

---

Complete Working Example

Below is a full architecture snippet combining all seven Archify component type variants in a realistic web application setup:

{
  "name": "E-commerce Platform",
  "components": [
    {
      "id": "web",
      "type": "frontend",
      "label": "Web Store",
      "sublabel": "Next.js"
    },
    {
      "id": "api",
      "type": "backend",
      "label": "Order API",
      "sublabel": "Go microservice"
    },
    {
      "id": "redis",
      "type": "database",
      "label": "Redis Cache",
      "sublabel": "Session store"
    },
    {
      "id": "cloudfront",
      "type": "cloud",
      "label": "CloudFront",
      "sublabel": "AWS CDN"
    },
    {
      "id": "auth0",
      "type": "security",
      "label": "Auth0",
      "sublabel": "SSO provider"
    },
    {
      "id": "eventbridge",
      "type": "messagebus",
      "label": "EventBridge",
      "sublabel": "AWS events"
    },
    {
      "id": "stripe",
      "type": "external",
      "label": "Stripe",
      "sublabel": "Payment processor"
    }
  ]
}

---

Key Source Files to Reference

File	Purpose	Direct Link
archify/schemas/common.schema.json	Root schema defining all shared enums including componentType	View on GitHub
archify/schemas/architecture.schema.json	Main architecture validation schema referencing component types	View on GitHub
examples/maka-architecture.architecture.json	Real-world example demonstrating multiple component types in practice	View on GitHub
archify/examples/web-app.architecture.json	Canonical web application reference architecture	View on GitHub

---

Summary

• Seven strict variants define all Archify components: frontend, backend, database, cloud, security, messagebus, external
• Centralized definition lives in common.schema.json lines 20–22
• Schema enforcement occurs through architecture.schema.json cross-reference
• Practical examples appear in examples/maka-architecture.architecture.json and related files
• Every component requires a valid type field—invalid values fail schema validation

---

Frequently Asked Questions

What happens if I use an invalid component type in Archify?

Archify rejects the architecture file during validation. The JSON Schema enum constraint in common.schema.json strictly limits type to the seven documented values—any deviation triggers a parse error before diagram generation begins.

Can I extend Archify with custom component types?

Not without modifying the core schema. The componentType enum is hardcoded in common.schema.json. To add variants, you would need to fork the repository and update both the schema definition and any rendering logic that consumes the new type.

How does Archify visually distinguish different component types?

The schema associates each type with default icons, colors, and connection rules. For example, security components typically render with shield styling, while external types use dashed borders to indicate boundary crossing. Check the rendering engine in archify/src/render/ for type-specific styling implementations.

Where can I see all seven types used together?

The examples/maka-architecture.architecture.json file demonstrates realistic usage of each variant. Additionally, archify/examples/web-app.architecture.json provides a cohesive full-system example showing how types interact in a production-grade architecture.

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