# Archify Viewer Keyboard Shortcuts: Complete Guide to Mouse-Free Diagram Interaction > Master Archify viewer keyboard shortcuts for seamless mouse-free interaction. Discover 15+ hotkeys for navigation, theming, tracing, and presentation. - Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify) - Tags: how-to-guide - Published: 2026-08-04 --- **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`](https://github.com/tt-a1i/archify/blob/main/docs/index.html) and [`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/docs/index.html) lines 733-746 and rendered via a hidden help overlay (`
` at line 4750 of [`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html)). ### Navigation and View Control | Shortcut | Action | Implementation Detail | |----------|--------|----------------------| | **?** | Toggle shortcuts help overlay | Shows/hides `
` containing all hotkey labels | | **/** | Open find panel | Focuses hidden `` 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 ``, 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`](https://github.com/tt-a1i/archify/blob/main/scripts/start-template.html) around line 440, the system captures all keystrokes through `document.addEventListener('keydown', …)` and routes actions based on `event.key`: ```javascript 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: ```html ``` The help overlay renders shortcuts as semantic `` elements: ```html
E Export T Theme S Style 0 Reset + Zoom in - Zoom out Esc Close
``` ## 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: ```javascript 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: 1. Press **R** to highlight a specific path through your architecture 2. Press **P** to play the animation for stakeholders 3. 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: 1. Extend the `switch` statement in the global listener 2. Update the help overlay markup in [`template.html`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/scripts/start-template.html) routes all commands - **State-driven architecture** ensures consistent behavior across visualization types - **Accessibility features** include `aria-keyshortcuts` and semantic `` 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`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html) line 4750, which displays every shortcut with its function. ### Why don't Archify shortcuts work when I'm typing in a search box? 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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/template.html) must be updated to match your changes.