# Archify Semantic Technology Labels: Supported Categories and Rendering Guide

> Discover Archify's supported semantic technology labels like postgres, aws.lambda, and github-actions. Map tokens to styles and colors automatically without icon libraries.

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

---

**Archify supports semantic technology labels that automatically map tokens like `postgres`, `aws.lambda`, and `github-actions` to visual styles, CSS classes, and color palettes without requiring an embedded icon library.**

The `tt-a1i/archify` repository provides a diagram-as-code tool that uses **semantic technology labels** to style architecture, workflow, and sequence diagrams. These labels are parsed from your prompts or JSON intermediate representation (IR) and translated into renderer-specific CSS classes. This article explains the full set of supported labels, how the detection logic works, and where the mapping is defined in the source code.

## Supported Semantic Technology Label Categories

Archify recognizes tokens across eight major technology categories. Each category maps to a predefined CSS class that controls color, shape, and diagram grouping.

- **Cloud providers and services**: Labels such as `aws.lambda`, `aws.s3`, `azure.function`, and `gcp.cloudrun` map to the `c-backend` class and are colored with a provider-specific palette.
- **Databases**: Tokens like `postgres`, `mysql`, `mongodb`, `redis`, and `dynamodb` render with the `c-database` style.
- **Message buses and queues**: `kafka`, `rabbitmq`, `sns`, and `sqs` receive the `c-messagebus` style.
- **Caching and storage**: `memcached`, `redis`, `s3`, and `gcs` render as `c-backend` or cloud-style nodes depending on the type.
- **CI/CD and DevOps**: `github-actions`, `gitlab-ci`, `jenkins`, and `circleci` use the `c-frontend` shape but are colored as tool nodes.
- **AI and LLM services**: `openai`, `anthropic`, and `cohere` render with the `c-frontend` style and a distinct accent color.
- **Security and identity**: `jwt`, `oauth`, `oidc`, and `iam` map to the `c-security` style.
- **Miscellaneous services**: Infrastructure tokens such as `api-gateway`, `load-balancer`, `cdn`, and `reverse-proxy` render with `c-backend` or cloud styles as appropriate.

## How Semantic Label Detection Works

Archify detects technology tokens inside plain-text prompts or explicit `type` fields in JSON IR. When you describe a component with a token such as `PostgreSQL` or `AWS`, the parser normalizes it to a canonical label like `postgres` or `aws.lambda`.

The mapping logic lives in the renderer’s template at [`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html) and the skill definition at [`archify/SKILL.md`](https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md). These files define how a normalized label is linked to a CSS variable such as `--frontend-fill`, `--backend-fill`, or `--database-fill`.

## Rendering Classes and CSS Mapping

Every semantic label resolves to a base CSS class that controls shape and grouping. The core classes include `c-frontend`, `c-backend`, `c-database`, `c-messagebus`, `c-security`, and cloud variants.

The visual theme is applied through CSS variables declared in [`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html). For example, a node with the label `aws.lambda` receives the `c-backend` class plus a provider-specific color override, while `github-actions` receives `c-frontend` with a tool-node color override.

## Code Examples

### Architecture Diagram (JSON IR)

In the JSON IR, you explicitly assign the semantic class via the `type` field. The following example defines a React frontend, a Node.js API, PostgreSQL, Redis, and an AWS Lambda function.

```json
{
  "diagram_type": "architecture",
  "nodes": [
    { "id": "frontend", "label": "React", "type": "c-frontend" },
    { "id": "api",       "label": "Node.js API", "type": "c-backend" },
    { "id": "db",        "label": "PostgreSQL", "type": "c-database" },
    { "id": "cache",     "label": "Redis", "type": "c-database" },
    { "id": "cloud",     "label": "aws.lambda", "type": "c-backend" }
  ],
  "edges": [
    { "from": "frontend", "to": "api" },
    { "from": "api", "to": "db" },
    { "from": "api", "to": "cache" },
    { "from": "api", "to": "cloud" }
  ]
}

```

### Workflow Diagram (Plain Text Prompt)

For workflow diagrams, Archify parses inline tokens from a plain-text description. The token `github-actions` is automatically recognized as a CI/CD label.

```text
Use archify to draw a workflow:
User submits a request -> Agent plans -> Approval Gate (github-actions) -> Tool Call -> Trace Log -> Final Reply

```

### Sequence Diagram (Plain Text Prompt)

Sequence diagrams support the same token detection. Archify scans the prompt and maps `frontend`, `aws.lambda`, `redis`, and `postgres` to their respective CSS classes.

```text
Use archify to draw a sequence diagram:
Browser -> Web App (frontend) -> API (aws.lambda) -> Redis (cache) -> PostgreSQL (postgres) -> API -> Browser

```

## Extending Labels with Dot Notation

If a technology is not included in the built-in list, you can still use **dot notation** such as `provider.service`. The renderer treats unknown dot-notation labels as generic `c-backend` nodes. You can further customize their appearance by injecting a custom class through the JSON IR.

## Key Source Files

- **[`README.md`](https://github.com/tt-a1i/archify/blob/main/README.md)**: Documents the semantic tech-label feature and lists common usage examples.
- **[`archify/SKILL.md`](https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md)**: Defines how the prompt interpreter recognizes and normalizes semantic labels.
- **[`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html)**: Contains the CSS variables and class-to-color mappings used by the renderer.
- **`archify/renderers/**/README.md`**: Describes the design language for each diagram type and reserved semantic lane IDs.
- **`examples/**/web-app.html`**: A live example that demonstrates semantic labels in a rendered diagram.

## Summary

- Archify supports semantic technology labels across eight major categories, including cloud services, databases, message queues, CI/CD tools, AI services, and security components.
- Labels are normalized from prompt text or declared explicitly in JSON IR and mapped to CSS classes such as `c-frontend`, `c-backend`, and `c-database`.
- The rendering logic and color palettes are defined in [`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html) and guided by [`archify/SKILL.md`](https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md).
- Unknown technologies can be expressed using `provider.service` dot notation and fall back to generic `c-backend` styling.

## Frequently Asked Questions

### What semantic technology labels are supported by Archify out of the box?

Archify natively supports labels across cloud providers, databases, message buses, caching layers, CI/CD tools, AI services, security standards, and miscellaneous infrastructure services. Each category maps to a dedicated CSS class like `c-database` or `c-security`.

### How does Archify map a label like `aws.lambda` to a visual style?

The parser normalizes the token and the renderer looks up the corresponding entry in [`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html). It assigns the `c-backend` class and applies a provider-specific color via CSS variables such as `--backend-fill`.

### Can I add custom semantic labels that are not in the built-in list?

Yes. You can use dot notation (`provider.service`) to convey intent, and the renderer will treat it as a generic `c-backend` node. You can also override the styling by specifying a custom class in the JSON IR.

### Where is the CSS styling for semantic labels defined?

The master styling and color variables live in [`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html). The skill definition in [`archify/SKILL.md`](https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md) and the renderers' README files provide additional context on how labels are interpreted per diagram type.