deep-dive

How Archify Visual Presets Affect Rendering: A Complete Technical Guide

August 17, 2026 tt-a1i/archify ↗

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.

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), 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 writes the preset into the HTML template:

visualPreset: meta.visual_preset || 'classic'

This value becomes the data-preset attribute on the <html> root element:

<html data-preset="signal-flow">

Additionally, 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) injects the preset into the SVG element:

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) reveals patterns like:

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:

{
  "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 <html> and <svg> 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 <html> and <svg> 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.

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.

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) 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) defines a closed enum for visual_preset. Extending support would require schema modification and corresponding CSS rule additions to the rendering pipeline.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:

curl -s "https://instagit.com/install.md"

Add to your MCP client configuration:

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

Ask your agent:

"Use Instagit MCP to understand how tt-a1i/archify works."

Works with

Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →