What Are the Visual Presets in Archify and How Do They Affect Rendering?

Archify supports four visual presets—classic, signal-flow, blueprint, and editorial—that define a diagram’s look-and-feel through CSS variables and data attributes while preserving the underlying geometry and semantic IDs.

The tt-a1i/archify repository implements a declarative styling system where visual presets act as a pure presentation layer. These presets are stored in a diagram’s JSON metadata under meta.visual_preset according to the architecture schema, and applied at runtime through HTML data attributes, enabling consistent rendering across different viewing contexts without modifying the architecture’s structural topology.

The Four Visual Presets in Archify

The meta.visual_preset field accepts one of four enumerated values, each optimized for specific presentation contexts.

Classic

The classic preset serves as the stable default when meta.visual_preset is omitted. It provides a balanced visual foundation that adapts to both light and dark color modes, making it the general-purpose choice for authoring and viewing. As documented in [archify/SKILL.md](https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md), this preset maintains independence from color mode settings while ensuring consistent contrast ratios across environments.

Signal-Flow

The signal-flow preset implements a "luminous" style with motion-forward animation capabilities. This preset uses a distinct set of CSS variables for colors and grid layouts, enabling trace animations that highlight data-flow or runtime scenarios. Unlike other presets, signal-flow enables trace animation by default, though meta.animation can still override this to none if needed.

Blueprint

The blueprint preset provides a draft-first, review-oriented style designed for engineering contexts. It applies tighter, engineering-grade grids with squared notation and a subdued color palette. This preset is ideal for design-review scenarios where drafting precision and clarity supersede aesthetic polish.

Editorial

The editorial preset offers a warm, publication-oriented style optimized for reading and storytelling. It features larger typography, refined color schemes, and adjusted spacing that prioritizes readability. Use this preset when diagrams serve as polished visual assets in documentation, articles, or external communications.

How Visual Presets Influence Rendering

When a diagram loads, the Archify viewer injects the active preset into the root element as a data attribute (data-preset="…") and selects corresponding CSS rules. This mechanism, implemented in archify/renderers/shared/cli.mjs, affects rendering in four specific dimensions:

• Colors and theme tokens – Each preset defines its own palette that layers on top of the selected light/dark theme, overriding specific CSS variables without changing the base color mode.
• Grid and layout – The blueprint preset tightens the grid for engineering precision, while signal-flow and editorial adjust spacing to accommodate motion paths or readable typography.
• Motion configuration – Only signal-flow enables trace animation by default; other presets respect the meta.animation setting independently.
• Export assets – Share-card PNGs and WebM exports respect the active preset to ensure exported images match the viewer’s current state, as detailed in [archify/references/viewer-runtime.md](https://github.com/tt-a1i/archify/blob/main/archify/references/viewer-runtime.md).

Implementing Visual Presets in Code

Loading a Diagram with a Specific Preset

The loadDiagram function from @archify/renderer automatically reads the meta.visual_preset field and applies it to the document root:

import { loadDiagram } from '@archify/renderer';

// The JSON file contains meta.visual_preset = 'signal-flow'
const diagram = await loadDiagram('incident-response.workflow.json');

// The viewer automatically applies the preset:
document.documentElement.dataset.preset = diagram.meta.visual_preset || 'classic';

Runtime Preset Override

You can switch presets dynamically without reloading the diagram JSON, as the preset is a pure styling layer:

function setPreset(preset) {
  if (!['classic','signal-flow','blueprint','editorial'].includes(preset)) return;
  document.documentElement.dataset.preset = preset;
  // Re-render or refresh as needed to apply new CSS variables
}

Validating Preset Independence

Since visual presets do not affect semantic IDs or node positions, you can verify that a diagram validates correctly regardless of the selected style:

import { validate } from '@archify/validator';
import fs from 'fs';

const json = JSON.parse(fs.readFileSync('production-deployment.architecture.json'));
json.meta.visual_preset = 'blueprint';
const result = validate('architecture', json);
console.assert(result.ok, 'Blueprint preset should still validate against the schema');

Summary

• Archify provides four visual presets: classic, signal-flow, blueprint, and editorial, defined in archify/schemas/architecture.schema.json.
• Presets are stored in meta.visual_preset and applied via the data-preset attribute on the root HTML element.
• They function as a pure styling layer, leaving semantic IDs, node positions, and relationship definitions unchanged.
• Presets control colors, grid density, motion defaults, and export asset generation while maintaining validation compatibility.
• The classic preset serves as the default when no preset is specified, functioning across both light and dark modes.

Frequently Asked Questions

What are the four visual presets available in Archify?

Archify supports classic (the stable default), signal-flow (luminous with motion), blueprint (engineering-grade grids), and editorial (publication-optimized typography). These values are enumerated in the Architecture schema under meta.visual_preset and demonstrated in the mco-showcase runtime.

How do I change the visual preset programmatically?

Set the data-preset attribute on the document root element to one of the four valid values. The diagram will re-render with the new CSS variables without requiring a JSON reload. You can also modify meta.visual_preset in the source JSON before calling loadDiagram().

Will switching visual presets affect my diagram's structure or validation?

No. Visual presets are a pure styling layer that does not affect semantic IDs, node positions, or relationship definitions. The same JSON topology validates identically across all presets, enabling reliable testing and QA workflows as discussed in the research-visual-evolution-round-6 documentation.

Which preset should I use for design reviews versus documentation?

Use blueprint for design reviews and engineering contexts where precise grids and drafting notation are required. Use editorial for documentation, articles, or any scenario where the diagram functions as a polished visual asset for external audiences.

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