Slidev Archify Explorer

Make an Archify diagram a clickable, print-safe preview in Slidev. Authors provide the static SVG and interactive HTML once; the preview itself opens the full Archify viewer in a dialog.

Component site and live demo · Open the presentation

What it does

ArchifyExplorer.vue renders the static SVG as a clickable preview. Clicking anywhere on the preview opens a native dialog containing Archify's standalone HTML viewer, so viewers can focus nodes, follow relationships, search, and use the Archify controls without leaving the presentation.

• Works with Archify standalone HTML files; the HTML carries its viewer with it.
• Respects Slidev's configured base path.
• Uses a keyboard-operable native button and <dialog>, with an accessible preview, labelled dialog, and titled iframe.
• Keeps the static preview in Slidev PDF/print mode and omits the interactive controls.
• Supports a default preview prop and a slot for custom preview/layout content.
• Button and close labels can be localized.

Try the demo

npm ci
npm run dev

Slidev opens the one-slide example at http://localhost:3030. Click the diagram preview, then select a node in the Archify view.

The demo pairs public/diagrams/ai-sdlc-control-plane.svg (static slide/PDF image) with public/diagrams/ai-sdlc-control-plane.html (interactive viewer). Its editable Archify source is in diagrams/.

Use it in your deck

Install the published package from npm:

npm install --save-dev slidev-addon-archify-explorer

Declare the addon in the deck frontmatter:

addons:
  - slidev-addon-archify-explorer

Put the standalone Archify HTML and SVG under public/, then use one component:

<ArchifyExplorer
  preview="diagrams/system.svg"
  src="diagrams/system.html"
  title="System architecture"
  alt="System architecture diagram"
  button-label="Explore diagram"
  close-label="Close"
/>

preview and src are paths under public/, not remote URLs. Slidev's base URL is prepended automatically. Clicking anywhere on the SVG opens the explorer, and the preview uses a zoom cursor to communicate that behavior. The default labels are English; pass button-label and close-label to localize them.

For a custom preview or layout, provide slot content instead of preview; the slot is preserved in print mode:

<ArchifyExplorer src="diagrams/system.html" title="System architecture">
  <div class="custom-preview">...</div>
</ArchifyExplorer>

Commands

| Command | Description | | --- | --- | | npm run dev | Start the addon demo presentation | | npm run build | Build the demo deck | | npm run build:pages | Build the component site and hosted demo into dist/ | | npm run export | Export the demo deck to PDF |

Requires Node.js 22 or newer.

Contributing

Issues and pull requests are welcome. Use Conventional Commits for commit messages and PR titles, for example feat: support custom button labels. See CONTRIBUTING.md, SECURITY.md, and CODE_OF_CONDUCT.md.

Release tags and GitHub releases are generated from Conventional Commits with semantic-release. npm releases are published by GitHub Actions when npm Trusted Publishing is configured; see npm release setup and the release security notes.

License

The component and demo source are MIT-licensed; see LICENSE. The included standalone diagram embeds Archify and third-party viewer code. See THIRD_PARTY_NOTICES.md and ARCHIFY-LICENSE.