Archify Semantic Technology Labels: Supported Categories and Rendering Guide

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 and the skill definition at 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. 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.

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

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.

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: Documents the semantic tech-label feature and lists common usage examples.
• archify/SKILL.md: Defines how the prompt interpreter recognizes and normalizes semantic labels.
• 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 and guided by 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. 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. The skill definition in archify/SKILL.md and the renderers' README files provide additional context on how labels are interpreted per diagram type.

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