how-to-guide

Archify Viewer Keyboard Shortcuts: Complete Guide to Mouse-Free Diagram Interaction

August 4, 2026 tt-a1i/archify ↗

Archify viewer keyboard shortcuts provide 15+ global hotkeys for instant navigation, theme switching, route tracing, and presentation control without touching the mouse.

The Archify open-source diagram viewer is built around a keyboard-first interaction model that lets developers and architects manipulate complex system diagrams entirely through hotkeys. These shortcuts are defined in docs/index.html and archify/assets/template.html and wired to a centralized keydown listener that routes commands to the appropriate viewer component.

Complete Archify Keyboard Shortcuts Reference

Every diagram page generated by Archify includes the same global shortcut set. The shortcuts are enumerated in docs/index.html lines 733-746 and rendered via a hidden help overlay (<div class="diagram-guide-shortcuts"> at line 4750 of archify/assets/template.html).

Shortcut	Action	Implementation Detail
?	Toggle shortcuts help overlay	Shows/hides `<div class="diagram-guide-shortcuts">` containing all hotkey labels
/	Open find panel	Focuses hidden `<input>` for node/endpoint search by ID
Enter	Focus highlighted node	Centers viewport on selection and expands label
[ / ]	Cycle guided views	Swaps between preset configurations ("overview", "detail", etc.)
+ / - / 0	Zoom in/out/reset	Adjusts SVG `viewBox` scale; `0` restores fit-to-screen
Esc	Close any overlay	Dismisses help, export panel, find box, or modal UI

Visualization and Analysis Modes

Shortcut	Action	Implementation Detail
T	Toggle light/dark theme	Swaps `data-theme` attribute on `<html>`, triggering CSS variable changes
M	Open semantic radar view	Re-projects node/edge data into radial layout for cluster analysis
L	Compare semantic kinds (lens view)	Groups nodes by "kind" (component, service, etc.) with color-coded legend
R	Trace and inspect route	Highlights edges sequentially; builds storyboard for animation
F	Enter presentation stage	Enables stepped mode where P or arrows advance animation steps

Export and Playback

Shortcut	Action	Implementation Detail
E	Open export menu	Displays HTML-to-image, SVG, and JSON format options
P	Play/pause story animation	Controls route-tracer storyboard playback
↑ / ↓	Navigate menu items	Moves focus between entries with `aria-selected` support

How the Keyboard Shortcut System Works

Centralized Event Delegation

The Archify viewer uses a single global listener rather than per-element handlers. In scripts/start-template.html around line 440, the system captures all keystrokes through document.addEventListener('keydown', …) and routes actions based on event.key:

document.addEventListener('keydown', (e) => {
  if (e.target.matches('input, textarea')) return; // preserve typing
  switch (e.key) {
    case '?': toggleHelpOverlay(); break;
    case 't': toggleTheme(); break;
    case '/': openFindPanel(); break;
    case 'r': startRouteTrace(); break;
    case 'm': openRadar(); break;
    case 'l': openLens(); break;
    case 'f': enterPresentation(); break;
    case 'e': openExportMenu(); break;
    case 'Enter': focusNode(); break;
    case '[': previousGuidedView(); break;
    case ']': nextGuidedView(); break;
    case 'p': togglePlay(); break;
    case '+': zoomIn(); break;
    case '-': zoomOut(); break;
    case '0': resetZoom(); break;
    case 'Escape': closeOverlays(); break;
  }
});

This approach ensures consistent behavior across all diagram types—architecture, workflow, and data-flow visualizations all respond identically.

State-Driven UI Updates

Rather than manipulating DOM elements directly, shortcuts toggle values in a central viewerState object. The UI reacts to state changes, making the system predictable and debuggable:

viewerState.theme → controls data-theme attribute
viewerState.zoom → drives viewBox calculations
viewerState.currentView → selects guided configuration
viewerState.playing → manages animation frame requests

Accessibility Integration

Shortcuts are exposed to assistive technologies through aria-keyshortcuts attributes:

<button aria-keyshortcuts="E">Export</button>

The help overlay renders shortcuts as semantic <kbd> elements:

<div class="diagram-guide-shortcuts" aria-label="Additional keyboard shortcuts">
  <span><kbd>E</kbd> Export</span>
  <span><kbd>T</kbd> Theme</span>
  <span><kbd>S</kbd> Style</span>
  <span><kbd>0</kbd> Reset</span>
  <span><kbd>+</kbd> Zoom in</span>
  <span><kbd>-</kbd> Zoom out</span>
  <span><kbd>Esc</kbd> Close</span>
</div>

Practical Examples of Archify Shortcuts in Action

Switching Themes Instantly

The T key toggles between light and dark modes by manipulating the data-theme attribute:

function toggleTheme() {
  const html = document.documentElement;
  html.dataset.theme = html.dataset.theme === 'dark' ? 'light' : 'dark';
}

CSS variables bound to this attribute update automatically—no page reload required.

Tracing Routes for Documentation

The R → P workflow enables rapid route documentation:

Press R to highlight a specific path through your architecture
Press P to play the animation for stakeholders
Press F to enter presentation mode for step-by-step explanation

Key Source Files for Archify Shortcuts

File	Purpose
`docs/index.html#L733-L746`	Documents full shortcut list for users
`archify/assets/template.html#L4750`	Renders help overlay on every diagram page
`scripts/start-template.html#L440`	Contains the global `keydown` listener
`examples/web-app.html#L4823`	Demonstrates shortcuts in production diagram

Extending the Shortcut System

Adding new shortcuts requires only two changes:

Extend the switch statement in the global listener
Update the help overlay markup in template.html

The state-driven architecture automatically propagates changes—no additional wiring needed.

Summary

15+ global hotkeys provide complete mouse-free control of Archify diagrams
Centralized keydown listener in scripts/start-template.html routes all commands
State-driven architecture ensures consistent behavior across visualization types
Accessibility features include aria-keyshortcuts and semantic <kbd> markup
Quick access: ? for help, / to find nodes, T for themes, E to export

Frequently Asked Questions

How do I view all available Archify viewer keyboard shortcuts?

Press the ? key at any time. This toggles the help overlay defined in archify/assets/template.html line 4750, which displays every shortcut with its function.

The global listener explicitly ignores keystrokes when event.target matches input or textarea selectors. This prevents shortcut interference during text entry—check the guard clause in scripts/start-template.html.

Can I customize or disable specific Archify keyboard shortcuts?

The source code uses a straightforward switch statement that can be modified directly. To disable a shortcut, remove its case; to remap, change the case value. The help overlay in template.html must be updated to match your changes.

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 →