# How to Create Custom Semantic Tech Labels and Map Them to Visual Categories in Archify > Learn to create custom semantic tech labels and map them to visual categories in Archify. Convert technology names into visual categories with CSS custom properties and HTML templates. - Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify) - Tags: how-to-guide - Published: 2026-07-14 --- **Archify converts technology names like "Kafka" or "Redis" into CSS custom property-driven visual categories by prefixing them with `c-` and mapping them to color variables in the HTML template.** Archify (tt-a1i/archify) is an open-source diagramming engine that renders JSON Intermediate Representation (IR) into SVG architecture diagrams. By creating **custom semantic tech labels**, you can tag nodes with technology identifiers that automatically drive visual styling—eliminating the need for heavyweight icon assets while maintaining consistent color coding across your documentation. ## Declare Tech Labels in the JSON IR Each node in your Archify diagram accepts a `technology` field that accepts either a single string or an array of strings. These values become **semantic class identifiers** that the renderer uses during SVG generation. In your JSON IR (typically stored in files like [`archify/examples/workflow-example.json`](https://github.com/tt-a1i/archify/blob/main/archify/examples/workflow-example.json)), attach labels to nodes as follows: ```json { "id": "order-service", "type": "service", "technology": ["Kafka", "Redis"] } ``` Archify processes this array and generates corresponding CSS classes on the SVG elements. According to [`archify/SKILL.md`](https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md), the renderer treats these labels as semantic class identifiers that control visual appearance. ## Map Labels to Visual Categories with CSS Custom Properties Archify's styling system relies on CSS custom properties (variables) defined in the HTML wrapper. The built-in template at [`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html) provides the foundation, but you extend it by declaring variables that match your custom labels. ### Define Color Variables Add CSS variables to your HTML template following the `--c-{label}` naming convention. Archify's built-in stylesheet automatically recognizes any variable prefixed with `--c-` and applies it to elements carrying the corresponding class. ```css :root { --c-kafka: #ff7043; /* orange-red for streaming */ --c-redis: #4caf50; /* green for caching */ --c-s3: #2196f3; /* blue for object storage */ } ``` ### Create CSS Rules for Visual Styling While Archify includes generic rules that consume `--c-*` variables, you should explicitly define how each class renders. Archify automatically prefixes every technology label with `c-` when generating SVG classes, converting `Kafka` into `c-kafka`. Add specific rules to your ` ``` When executed, Archify processes the IR, attaches the classes `c-kafka` and `c-redis` to the Order Service node, and applies the CSS variables to render the custom colors. ## Summary - **Declare labels** using the `technology` array in your JSON IR nodes to create semantic identifiers. - **Define variables** in [`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html) or your custom HTML wrapper using the `--c-{label}` pattern. - **Target classes** by referencing the `c-{label}` format (lowercase, hyphenated) that Archify automatically generates from your technology names. - **Extend styling** beyond fill colors by adding stroke, opacity, or transition rules to the CSS classes. - **Reference examples** in `archify/examples/*.json` to see production implementations of the `technology` field. ## Frequently Asked Questions ### Where does Archify define the semantic class naming convention? The naming convention is documented in [`archify/SKILL.md`](https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md), which specifies that technology labels become semantic class identifiers prefixed with `c-` when rendered to SVG. ### Can I customize attributes beyond fill color using semantic tech labels? Yes. Since Archify injects the `c-{label}` class directly onto SVG elements, you can target these classes in your CSS to control any SVG presentation attribute, including `stroke`, `stroke-width`, `opacity`, and `filter` effects. ### How do I render a diagram with custom tech labels programmatically? Call `archify.render()` and pass the DOM element containing your JSON IR, as shown in [`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html). The function automatically processes the `technology` arrays and applies the corresponding CSS classes to the generated SVG nodes. ### What is the performance impact of using many custom tech labels? Semantic tech labels introduce minimal overhead because they leverage standard CSS classes and custom properties. According to the source implementation, the renderer performs a simple string transformation (prefixing with `c-`) and relies on the browser's native CSS engine for styling, making this approach significantly lighter than embedding icon assets.