Does Archify Support Multi-Language and Localization Features?

Yes, Archify includes a built-in i18n (internationalization) system that enables multi-language user interfaces without external dependencies.

All user-facing strings in the web UI are marked with data-i18n attributes and swapped at runtime using a lightweight JavaScript helper. You can switch languages by providing a different translation map, and the core architecture diagram generation remains unchanged regardless of locale.

How Archify's Localization System Works

Archify implements client-side internationalization through a simple but effective pattern. The system relies on three components: annotated HTML elements, a runtime translation loop, and plain JavaScript object maps for each language.

The data-i18n Attribute Pattern

Every user-visible string in the UI carries a translation key. Archify uses three variants to handle different insertion contexts:

• data-i18n — replaces textContent
• data-i18n-html — replaces innerHTML (for rich content)
• data-i18n-placeholder — sets input placeholder text

In scripts/guide-template.html, the runtime logic iterates over these marked nodes and applies translations from the active language map:

// Core translation loop from guide-template.html (around line 278)
document.querySelectorAll('[data-i18n]').forEach(node => {
  const key = node.dataset.i18n;
  node.textContent = translations[key] || key;
});

This approach keeps the HTML declarative and the JavaScript minimal. No build-step transformation or server-side rendering is required.

Adding a New Language

To localize Archify to a new language, create a translation map and register it on the global i18n object:

// locales/fr.js — French translation map
const FR_TRANSLATIONS = {
  versionLabel: "Guide de scénario / stable / v[[ARCHIFY_VERSION]]",
  navProof: "Laboratoire de preuves",
  recommend: "Recommander une recette →",
  // ... all keys matching data-i18n attributes
};

// Register with Archify's i18n system
window.i18n = {
  en: EN_TRANSLATIONS,
  zh: ZH_TRANSLATIONS,
  es: ES_TRANSLATIONS,
  fr: FR_TRANSLATIONS  // newly added
};

Switch languages at runtime by re-running the translation helper with the desired locale:

function setLanguage(lang) {
  const t = (key) => window.i18n[lang]?.[key] || key;
  
  document.querySelectorAll('[data-i18n]')
    .forEach(n => n.textContent = t(n.dataset.i18n));
  
  document.querySelectorAll('[data-i18n-html]')
    .forEach(n => n.innerHTML = t(n.dataset.i18nHtml));
  
  document.querySelectorAll('[data-i18n-placeholder]')
    .forEach(n => n.placeholder = t(n.dataset.i18nPlaceholder));
}

// Activate French
setLanguage('fr');

Key Files for Multi-Language Support

File	Role in Localization
scripts/guide-template.html	Contains the HTML UI with data-i18n attributes and the runtime translation loop
docs/index.html	Demonstrates i18n across landing page content and feature descriptions
archify/assets/template.html	Core template for generated diagrams; includes i18n hooks for diagram UI elements
User-created locale files (e.g., locales/fr.js)	Hold key-value translation pairs; can be bundled or loaded on-demand

The static HTML+JS architecture means translation files can be embedded directly, fetched via <script> tags, or bundled at build time without modifying the diagram generation engine.

Marking UI Elements for Translation

Any HTML element can participate in localization by adding the appropriate data attribute:

<!-- Simple text replacement -->
<button class="primary" id="recommend" data-i18n="recommend">
  Recommend a recipe →
</button>

<!-- HTML content (preserves formatting) -->
<div class="description" data-i18n-html="welcomeMessage">
  Welcome to <strong>Archify</strong>
</div>

<!-- Input placeholder -->
<input type="text" data-i18n-placeholder="searchHint" placeholder="Search architectures...">

When setLanguage('fr') executes, these elements update to their French equivalents instantly.

Architecture Diagrams and Localization

A critical design decision in Archify's multi-language support: generated architecture diagrams are language-agnostic. The same diagram structures render identically regardless of the active UI locale. Only the surrounding interface text adapts, ensuring:

• Consistent visual output across languages
• No duplication of diagram generation logic
• Smaller translation bundles (UI text only, not diagram data)

Summary

• Archify supports full localization through a lightweight, dependency-free i18n system
• Translation uses data-i18n, data-i18n-html, and data-i18n-placeholder attributes scanned at runtime
• Language maps are plain JavaScript objects; add new locales by creating new maps
• Core implementation lives in scripts/guide-template.html around line 278
• Diagram generation is decoupled from UI language—visual output remains consistent

Frequently Asked Questions

What languages does Archify support out of the box?

Archify ships with English (en), Chinese (zh), and Spanish (es) translation maps based on the source code analysis. You can verify the exact bundled locales by checking the window.i18n object initialization in scripts/guide-template.html or examining any locale files in the repository.

Does Archify require a build step to add translations?

No. Because Archify uses runtime DOM replacement rather than compile-time string extraction, you can add translations by simply loading a new JavaScript file containing your language map. The translation helper executes client-side, making it suitable for static hosting without build pipelines.

Can I use JSON files instead of JavaScript objects for translations?

Yes. The system expects the window.i18n object to contain key-value mappings, but the source of those mappings is flexible. Load JSON via fetch() and assign to window.i18n.fr = await response.json(), or use <script type="module"> imports. The core requirement is that the translation lookup—window.i18n[lang][key]—must resolve successfully.

Does localization affect the generated architecture diagrams?

No. The diagram generation engine in Archify produces identical structural output regardless of UI language. Only interface elements marked with data-i18n attributes change. This separation ensures that sharing diagrams across language regions does not cause visual inconsistencies.

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