# How Archify Visual Presets Affect Rendering: A Complete Technical Guide > Explore how Archify visual presets impact rendering. Understand how data-preset attributes activate CSS rules for diagram styling without altering core data. - Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify) - Tags: deep-dive - Published: 2026-08-17 --- **Archify visual presets control diagram styling through a `data-preset` attribute that activates preset-specific CSS rules on both HTML and SVG containers, without changing the underlying diagram data.** Archify generates architectural diagrams from JSON definitions, and visual presets let you switch between four distinct themes. This article explains exactly how these presets propagate through the rendering pipeline, based on the source code in [`tt-a1i/archify`](https://github.com/tt-a1i/archify). ## Where Visual Presets Are Defined and Stored The `visual_preset` field belongs to a diagram's metadata. According to [[`archify/schemas/architecture.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json)](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json), valid values are: - **classic** – default, minimal and dark-mode-agnostic - **signal-flow** – bright, luminous data-flow emphasis - **blueprint** – muted blue-tinted structural style - **editorial** – high-contrast, publication-ready with rounded corners If omitted, the renderer falls back to `"classic"`. The preset is stored in `meta.visual_preset` and propagated through three distinct rendering stages. ## How Presets Propagate Through the Rendering Pipeline ### HTML Template Injection The `writeDiagram()` function in [`archify/renderers/shared/cli.mjs`](https://github.com/tt-a1i/archify/blob/main/archify/renderers/shared/cli.mjs#L64-L65) writes the preset into the HTML template: ```javascript visualPreset: meta.visual_preset || 'classic' ``` This value becomes the `data-preset` attribute on the `` root element: ```html ``` Additionally, [`archify/renderers/shared/utils.mjs`](https://github.com/tt-a1i/archify/blob/main/archify/renderers/shared/utils.mjs) replaces the placeholder `[VISUAL PRESET]` in the template with the actual preset name. ### SVG Root Attribute The `svgRootAttrs()` function (lines 48–58 in [`cli.mjs`](https://github.com/tt-a1i/archify/blob/main/archify/renderers/shared/cli.mjs)) injects the preset into the SVG element: ```javascript data-preset="${esc(meta.visual_preset || 'classic')}" ``` This ensures SVG-specific styling rules can target the preset independently of the HTML container. ### CSS Selector Activation The rendered output contains rules scoped to `[data-preset="..."]` selectors. Examining [[`archify/examples/workflow-agent-tool-call-rendered.html`](https://github.com/tt-a1i/archify/blob/main/archify/examples/workflow-agent-tool-call-rendered.html)](https://github.com/tt-a1i/archify/blob/main/archify/examples/workflow-agent-tool-call-rendered.html) reveals patterns like: ```css html[data-preset="signal-flow"] .diagram-container { /* luminous color palette, animated ambient effects */ } html[data-preset="blueprint"] .diagram-container { /* blue-tinted strokes, structural emphasis */ } html[data-preset="editorial"] .card { /* larger typography, richer shadows, rounded corners */ } ``` Each preset swaps **color palettes**, **shadows**, **border-radius**, and **typography** for semantic lenses, flow arrows, and card components. ## Visual Preset Effects: The Four Themes Compared | Preset | Visual Characteristics | Best Use Case | |--------|------------------------|---------------| | **classic** | Neutral, minimal, adapts to dark/light mode | Default documentation, maximum compatibility | | **signal-flow** | Bright colors, animated ambient motion, highlighted edges | Data flow diagrams, real-time system visualization | | **blueprint** | Muted blues, strong borders, light background | Structural architecture, technical specifications | | **editorial** | High contrast, large type, rounded cards, rich shading | Presentations, publications, executive summaries | Crucially, **presets never modify diagram semantics**. Node IDs, relationships, and JSON structure remain identical across all themes. ## How to Specify a Visual Preset in Your Diagram Set `meta.visual_preset` in your Archify JSON: ```json { "meta": { "visual_preset": "blueprint", "title": "Microservice Architecture" }, "nodes": [...], "edges": [...] } ``` Omit the field entirely to use `"classic"` automatically. ## Test Coverage for Preset Rendering The Archify test suite verifies correct preset propagation without semantic side effects: - **`preset-tryon.test.mjs`** – confirms the renderer exposes a visual-style picker and that `` and `` elements receive correct `data-preset` attributes - **`animation.test.mjs`** – validates that all four presets produce distinct markup and that CSS rules apply as expected - **`semantic-flow.test.mjs`** – ensures flow-specific selectors like `svg[data-preset="signal-flow"] .semantic-lens-flow` match the chosen preset These tests guarantee that switching presets affects only presentation, never the underlying model. ## Summary - Archify provides **four visual presets** defined in the JSON schema: `classic`, `signal-flow`, `blueprint`, and `editorial` - Presets propagate via **`data-preset` attributes** on both `` and `` elements - The **`cli.mjs` renderer** handles injection, with **`utils.mjs`** managing template replacement - **CSS selectors** scope all visual changes to `[data-preset="..."]`, enabling theme-specific styling - **Diagram semantics remain unchanged**—only the presentation layer is affected - **Comprehensive tests** verify correct markup generation across all presets ## Frequently Asked Questions ### How do I set a visual preset in Archify? Add `meta.visual_preset` to your diagram JSON with one of the four valid values: `"classic"`, `"signal-flow"`, `"blueprint"`, or `"editorial"`. If omitted, the renderer defaults to `"classic"` as implemented in [`archify/renderers/shared/cli.mjs`](https://github.com/tt-a1i/archify/blob/main/archify/renderers/shared/cli.mjs). ### Do visual presets affect the diagram's data structure? No. Presets only control **visual presentation** through CSS. The underlying JSON semantics—node definitions, edge relationships, and all identifier fields—remain identical regardless of which preset is active. This separation is verified by [`archify/test/semantic-flow.test.mjs`](https://github.com/tt-a1i/archify/blob/main/archify/test/semantic-flow.test.mjs). ### Where are the preset CSS rules defined? The CSS selectors live in the **rendered HTML output**, not in standalone stylesheets. Examine [[`archify/examples/workflow-agent-tool-call-rendered.html`](https://github.com/tt-a1i/archify/blob/main/archify/examples/workflow-agent-tool-call-rendered.html)](https://github.com/tt-a1i/archify/blob/main/archify/examples/workflow-agent-tool-call-rendered.html) to see the generated rules scoped to `html[data-preset="..."]` and `svg[data-preset="..."]`. ### Can I create custom visual presets? The current schema in [[`archify/schemas/architecture.schema.json`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json)](https://github.com/tt-a1i/archify/blob/main/archify/schemas/architecture.schema.json) defines a closed enum for `visual_preset`. Extending support would require schema modification and corresponding CSS rule additions to the rendering pipeline.