tutorial

Archify Visual Presets and Themes: A Complete Guide to Diagram Customization

August 9, 2026 tt-a1i/archify ↗

Archify supports four distinct visual presets (classic, signal-flow, blueprint, editorial) and two built-in color themes (dark and light) that control the overall look-and-feel of diagrams through JSON metadata and HTML data attributes.

Archify is an open-source diagramming tool that separates content from presentation through a flexible styling system. The visual presets and themes available in the repository allow you to transform the same diagram data into radically different visual outputs suitable for documentation, presentations, or technical drafting.

Available Visual Presets in Archify

Archify defines four visual presets in archify/schemas/architecture.schema.json that determine the stylistic treatment of diagram elements:

classic – The stable default style suitable for general-purpose diagrams
signal-flow – A motion-forward style emphasizing directional flow and movement
blueprint – A drafting-first aesthetic with grid-heavy technical styling
editorial – A publication-oriented style optimized for documentation and print

The preset is stored in the diagram's metadata under meta.visual_preset and defaults to classic when unspecified.

Theme Modes: Dark vs. Light

In addition to visual presets, Archify implements two color themes that affect the entire palette:

dark – Dark-mode colors (default)
light – Light-mode colors for bright backgrounds

According to the source code in experiments/visual-evolution/prototype.html, themes are applied via the data-theme attribute on the root HTML element. The CSS uses attribute selectors like [data-theme="dark"] to swap CSS custom properties dynamically.

How to Configure Visual Presets and Themes

You can apply these styling options through multiple interfaces depending on your workflow.

Setting Presets in JSON Diagrams

Define the visual preset directly in your diagram's metadata:

{
  "schema_version": 1,
  "diagram_type": "workflow",
  "meta": {
    "title": "Sample workflow",
    "visual_preset": "signal-flow"
  }
}

The visual_preset field is validated against the enum defined in architecture.schema.json.

Switching Themes in HTML

For web-based rendering, set both theme and preset using data attributes:

<!DOCTYPE html>
<html lang="en" data-theme="light" data-preset="blueprint">
  ...
</html>

The data-theme attribute selects the color palette while data-preset applies the visual style.

Using the CLI to Render with Specific Styles

The Archify CLI supports preset selection via command-line flags:

archify render diagram.json --preset=editorial

In archify/renderers/shared/cli.mjs, the implementation injects the preset attribute into generated HTML:

const preset = ` data-preset="${esc(meta.visual_preset || 'classic')}"`;

This line defaults to classic when no preset is specified in metadata or CLI arguments.

Source Files and Implementation Details

The styling system is implemented across several key files:

archify/schemas/architecture.schema.json – Enumerates the four valid visual_preset values
archify/renderers/shared/cli.mjs – Handles data-preset attribute injection with fallback logic
experiments/visual-evolution/prototype.html – Demonstrates data-theme and data-preset selectors
examples/ – Contains real-world diagrams showcasing different preset and theme combinations

Both attributes are read by the renderer to swap CSS custom properties, enabling instant visual transformation without modifying diagram structure.

Summary

Archify provides four visual presets (classic, signal-flow, blueprint, editorial) defined in the JSON schema
Two theme modes (dark and light) control color palettes via the data-theme HTML attribute
Presets are stored in meta.visual_preset while themes use the data-theme attribute on root HTML elements
The CLI tool in cli.mjs supports --preset flags and defaults to classic when unspecified
CSS custom properties enable dynamic switching without regenerating diagram content

Frequently Asked Questions

What is the default visual preset in Archify?

If you do not specify a preset in your JSON metadata or CLI arguments, Archify defaults to the classic preset. This fallback is hardcoded in archify/renderers/shared/cli.mjs where the template string explicitly uses 'classic' as the default value.

Can I use dark mode with the blueprint preset?

Yes, presets and themes are independent properties. You can combine any of the four visual presets (classic, signal-flow, blueprint, editorial) with either dark or light themes. Set data-theme="dark" and data-preset="blueprint" simultaneously in your HTML or rendering configuration.

Where are the visual presets validated?

The allowed values are enumerated in archify/schemas/architecture.schema.json, which validates the meta.visual_preset field in diagram JSON files. This ensures only the four defined presets can be used, preventing invalid styling configurations.

How do I preview different themes during development?

Use the prototype HTML file at experiments/visual-evolution/prototype.html as a reference implementation. It demonstrates how to toggle both data-theme and data-preset attributes on the root HTML element to preview different visual combinations in real-time.

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 →