Browsing your diagrams

A single, self-contained HTML file - no build step, no install - for browsing a folder of .mmd diagrams in a searchable tree. Designed to sit alongside the diagrams your CI pipeline already generates, giving your team an easy way to explore them without opening each file individually.

Download diagram-viewer-template.html

Setup

Copy the downloaded file into the same folder as your generated .mmd diagrams (e.g. next to your diagrams/ folder from the CI guide).
Add a diagrams.json file alongside it, listing the relative path to every diagram you want to browse:
```
["diagrams/OrderQueue.mmd", "diagrams/nested/RefundFlow.mmd"]
```
Serve the folder with any static file server - for example GitHub Pages, Netlify, or locally with npx serve - and open the HTML file.

A note on file:// URLs

Opening the file directly by double-clicking it (a file:// URL) will not work - browsers block fetch() requests to local files for security reasons, so diagrams.json and the individual .mmd files won't load. A real static server, even a trivial local one, is required.

How it works

The template reads diagrams.json, builds a searchable tree (via jsTree) from the listed paths - splitting each on / so folders in your diagram output become folders in the tree - and renders the selected file's raw Mermaid text with Mermaid.js, loaded from public CDNs. There's nothing to install and nothing to configure beyond the manifest file.