how-to-guide

How to Configure Visual Presets in Archify: Signal Flow, Blueprint, Classic, and Editorial

August 8, 2026 tt-a1i/archify ↗

Archify supports four visual presets—Classic, Signal Flow, Blueprint, and Editorial—that you configure by setting the visual_preset field in your diagram's meta object or passing the --preset flag via CLI.

Archify is an open-source architecture visualization engine that transforms JSON diagram definitions into rendered outputs. When you configure visual presets, you change the presentation layer—including colors, borders, and animation—while preserving the underlying semantic structure. This guide demonstrates how to implement Classic, Signal Flow, Blueprint, and Editorial modes using the tt-a1i/archify source code.

Understanding the Four Visual Presets

Archify provides four distinct visual presets that cater to different presentation contexts. Each preset maps to specific CSS rules that control the rendering pipeline without modifying diagram geometry.

Classic: The stable default offering minimal motion, muted color palettes, and static layouts. Use this for documentation that requires consistent, distraction-free visuals.
Signal Flow: A motion-forward preset designed for live demos and presentations. It features luminous accent colors, ambient scan effects, and subtle animations that highlight data flow.
Blueprint: A draft-first, review-oriented view characterized by crisp square borders, precise grid alignment, and restrained motion. Ideal for technical reviews and architecture sign-offs.
Editorial: A publication-ready preset with warmer tones, larger typography, and minimal animation. Optimized for design hand-offs and stakeholder presentations.

Configuring Presets in Diagram Metadata

The primary configuration method involves setting the visual_preset field within your diagram's meta object. The schema restricts values to the enum defined in archify/schemas/architecture.schema.json: ["classic", "signal-flow", "blueprint", "editorial"].

{
  "schema_version": 1,
  "diagram_type": "workflow",
  "meta": {
    "title": "Agent Tool Call Workflow",
    "visual_preset": "signal-flow",
    "animation": "trace",
    "quality_profile": "showcase"
  },
  "lanes": [],
  "nodes": [],
  "edges": []
}

See the live example in [archify/examples/agent-tool-call.workflow.json](https://github.com/tt-a1i/archify/blob/main/archify/examples/agent-tool-call.workflow.json).

Overriding Presets via CLI

You can override the preset at render time using the --preset flag. The CLI renderer extracts meta.visual_preset or falls back to "classic" when not specified.

npx archify render workflow.json --preset blueprint

Internally, the CLI sets meta.visual_preset before invoking the rendering pipeline. In archify/renderers/shared/cli.mjs at line 59, the code establishes the preset with visualPreset: meta.visual_preset || 'classic'.

Runtime Preset Switching in HTML

For web-based outputs, Archify injects the preset into the HTML data-preset attribute on the root <html> element. This enables dynamic theme switching without re-rendering the diagram.

<html data-preset="signal-flow" data-theme="dark">
  <head>
    <title>Architecture Diagram</title>
  </head>
  <body>
    <div id="diagram"></div>
  </body>
</html>

<script>
  // Switch to Blueprint at runtime
  document.documentElement.setAttribute('data-preset', 'blueprint');
</script>

The renderer builds this attribute at line 146 of archify/renderers/shared/cli.mjs using data-preset="${esc(meta.visual_preset || 'classic')}". CSS selectors in experiments/mco-showcase/mco-runtime.html target these attributes to apply preset-specific styling.

Validating Presets in Automated Tests

Because presets only affect presentation while preserving semantic IDs and layout, you can regression-test all four variants against the same underlying geometry. The test suite iterates through valid enum values to ensure schema compliance.

import { validate } from '@archify/validator';
import workflow from './agent-tool-call.workflow.json';

for (const preset of ['classic', 'signal-flow', 'blueprint', 'editorial']) {
  workflow.meta.visual_preset = preset;
  const result = await validate('workflow', workflow);
  console.log(`${preset}: ${result.ok ? 'PASS' : 'FAIL'}`);
}

Reference the full test implementation in archify/test/preset-tryon.test.mjs.

How Presets Propagate Through the Rendering Pipeline

Understanding the preset propagation chain helps debug styling issues and customize CSS.

Schema Validation

The visual_preset enum is strictly defined in archify/schemas/architecture.schema.json, guaranteeing that only the four permitted values pass validation.

CLI Renderer Extraction

In archify/renderers/shared/cli.mjs, the renderer extracts the preset at line 59 and injects it into the HTML output at line 146. This ensures the data-preset attribute always reflects the configured value or defaults to Classic.

Gallery Generation

When building visual proofs, the gallery builder reads source.meta.visual_preset at line 273 of scripts/build-gallery.mjs, defaulting to "classic" if unspecified. This maintains consistency across automated documentation builds.

CSS Implementation

The actual visual differences are implemented via CSS attribute selectors. The file experiments/mco-showcase/mco-runtime.html contains rules such as [data-preset="signal-flow"], [data-preset="blueprint"], and [data-preset="editorial"] that control colors, borders, spacing, and animation keyframes.

Summary

Archify provides four visual presets—Classic, Signal Flow, Blueprint, and Editorial—configured via the visual_preset field in diagram metadata.
The CLI supports runtime overrides using the --preset flag, processed in archify/renderers/shared/cli.mjs.
HTML outputs use the data-preset attribute for CSS-driven styling, enabling dynamic switching without regeneration.
Presets are validated against the JSON schema in archify/schemas/architecture.schema.json and tested in archify/test/preset-tryon.test.mjs.
Because presets only modify presentation layers, semantic IDs, layout geometry, and exported assets remain identical across all configurations.

Frequently Asked Questions

What is the default visual preset if I don't specify one?

Classic is the default value. When meta.visual_preset is undefined, the CLI renderer in archify/renderers/shared/cli.mjs falls back to "classic" at line 59, and the gallery builder in scripts/build-gallery.mjs applies the same default at line 273.

Can I switch presets after rendering without regenerating the diagram?

Yes. Since Archify injects the preset into the HTML data-preset attribute, you can change the visual style at runtime using JavaScript: document.documentElement.setAttribute('data-preset', 'editorial'). The underlying SVG geometry remains unchanged; only CSS rules update.

Do visual presets affect exported PNG or SVG files?

No. Visual presets control HTML/CSS presentation only. According to the Archify source code, semantic IDs, layout, and exported assets remain identical across presets, ensuring consistent documentation outputs regardless of the selected view mode.

Where is the preset validation defined?

The allowed values are defined as an enum in archify/schemas/architecture.schema.json, which restricts visual_preset to ["classic", "signal-flow", "blueprint", "editorial"]. This schema is enforced during validation and CLI processing to prevent invalid preset configurations.

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 →