how-to-guide

How to Use Archify Visual Presets: Classic, Signal-Flow, Blueprint, and Editorial

August 3, 2026 tt-a1i/archify ↗

Archify provides four visual presets—classic, signal-flow, blueprint, and editorial—that change the viewer's styling via CSS variables while preserving diagram geometry, and you can activate them through the JSON meta.visual_preset field, CLI --visual-preset flag, or the S keyboard shortcut in the viewer.

The tt-a1i/archify repository ships with these archify visual presets to instantly transform how architecture diagrams appear without altering their underlying structure. Each preset injects specific CSS variables into the generated HTML to control colors, grid styles, typography, and animation levels.

The Four Visual Presets Explained

Archify visual presets are purely presentational layers that modify the viewer's appearance while keeping node IDs, layout positions, and semantics identical.

classic (default): A neutral, stable appearance that serves as the baseline view for general-purpose diagram review.
signal-flow: A luminous, motion-forward style with subtle animations designed to highlight data-flow or request-path movement.
blueprint: A high-contrast drafting grid with squared-off edges and minimal motion, optimized for engineering reviews and print-ready documentation.
editorial: Warm, publication-style colors and typography intended for presentation-oriented documents and reports.

Method 1: Configuring the Preset in JSON IR

The most common way to set archify visual presets is within your diagram's JSON Intermediate Representation (IR). Set the meta.visual_preset field to one of the four enum values: classic, signal-flow, blueprint, or editorial.

{
  "schema_version": 1,
  "diagram_type": "architecture",
  "meta": {
    "title": "Checkout Service",
    "visual_preset": "blueprint",
    "animation": "none"
  },
  "components": [
    { "id": "frontend", "type": "frontend", "label": "Web UI" },
    { "id": "checkout", "type": "backend", "label": "Checkout API" },
    { "id": "db", "type": "database", "label": "Postgres" }
  ],
  "connections": [
    { "source": "frontend", "target": "checkout" },
    { "source": "checkout", "target": "db" }
  ]
}

The list of allowed values is documented in the schema at archify/schemas/README.md (lines 24-26). When the renderer processes this file, it automatically applies the corresponding CSS variables to the generated HTML output.

Method 2: Overriding via the CLI

You can override the JSON setting or specify a preset directly from the command line using the --visual-preset flag. This is useful for generating multiple versions of the same diagram with different styling.

npx skills use tt-a1i/archify@archify \
  --agent codex \
  --json examples/web-app.json \
  --visual-preset signal-flow \
  --output web-app-sf.html

According to the source code in archify/renderers/shared/cli.mjs (line 59), the CLI reads meta.visual_preset || 'classic', falling back to the classic preset when none is specified in either the JSON or command-line arguments.

Method 3: Switching at Runtime in the Viewer

Every HTML artifact generated by Archify includes an accessible visual style picker that allows viewers to cycle through presets without re-rendering. Press S to open the preset menu, then use arrow keys or click to select a different style.

The runtime implementation updates the data-preset attribute on both the <html> and <svg> elements to reflect the active style instantly. This behavior is verified in the test suite at archify/test/preset-tryon.test.mjs (lines 40-46), which confirms the "S cycles" shortcut functionality across all renderers.

Complete Working Examples

Example 1: Blueprint Style for Engineering Documentation

Create a JSON file with the blueprint preset for technical reviews:

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "schema_version": 1,
  "diagram_type": "architecture",
  "meta": {
    "title": "Payment Gateway",
    "visual_preset": "blueprint"
  },
  "components": [
    { "id": "gateway", "type": "backend", "label": "Payment API" },
    { "id": "redis", "type": "cache", "label": "Redis Cluster" }
  ],
  "connections": [
    { "source": "gateway", "target": "redis" }
  ]
}

Render it with:

node archify/bin/archify.mjs deliver architecture payment.json out.html

The generated out.html will display in the blueprint style by default.

Example 2: CLI Override for Signal-Flow Animation

Force the signal-flow preset regardless of JSON settings:

npx skills use tt-a1i/archify@archify \
  --agent opencode \
  --json examples/web-app.json \
  --visual-preset signal-flow

Example 3: Runtime Style Switching

Open any generated Archify HTML file in a browser.
Press S to activate the style picker (element ID btn-preset).
Select Editorial from the menu.
Inspect the DOM to verify data-preset="editorial" appears on both the <html> root and the <svg> container.

Summary

Archify visual presets (classic, signal-flow, blueprint, editorial) modify only CSS variables and styling, never diagram geometry or IDs.
Set presets permanently in JSON via meta.visual_preset as documented in archify/schemas/README.md.
Override presets temporarily using the CLI --visual-preset flag, with classic as the fallback default per cli.mjs.
Switch presets interactively at runtime using the S key shortcut, which updates data-preset attributes instantly.

Frequently Asked Questions

Do visual presets affect the diagram structure or validation?

No. Archify visual presets are purely presentational and never alter node IDs, layout positions, or the underlying IR. This guarantees that the same diagram source passes identical validation tests (archify test …) regardless of which preset is active.

What is the default preset if none is specified?

The default preset is classic. As implemented in archify/renderers/shared/cli.mjs (line 59), the renderer falls back to classic when meta.visual_preset is undefined and no CLI override is provided.

Can I create custom visual presets?

The current schema in archify/schemas/README.md (lines 24-26) defines a closed enum of four values. While the runtime CSS variable system could theoretically support additional themes, the validator will reject any visual_preset value outside the built-in set of classic, signal-flow, blueprint, and editorial.

Why does my generated HTML have data-preset attributes on both html and svg elements?

The renderer applies the data-preset attribute to both the <html> root and the <svg> container to ensure CSS selectors can target styles at either the document level or the graphic level. This dual-application supports the runtime picker functionality tested in archify/test/preset-tryon.test.mjs, allowing instant theme switching without re-rendering the diagram geometry.

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 →