# What Is the Live Gallery in Diagram Design and How to Access It > Explore the live gallery, a browsable collection of 39 editorial-quality diagrams from Diagram Design. Access it online via GitHub Pages or offline with a local HTML file. - Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design) - Tags: how-to-guide - Published: 2026-08-21 --- **The live gallery is a browsable collection of all 39 editorial-quality diagrams available in the Diagram Design skill, viewable online via GitHub Pages or offline via a local HTML file.** The *Diagram Design* repository by Cathryn Lavery ships with a comprehensive visual showcase called the **live gallery**. This gallery demonstrates every diagram type the skill can generate across three distinct visual themes. Understanding how to access this gallery helps users evaluate the available templates before implementation. ## What Is the Live Gallery? The **live gallery** is a static HTML interface that displays 39 pre-rendered diagram examples stored in the repository. Each diagram is presented in three visual variants—**light**, **dark**, and **full-editorial**—which users can toggle between using tabs on the page. According to the source code in [`skills/diagram-design/assets/index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/index.html), the gallery loads pre-rendered examples directly from the `assets/` directory without requiring a build step, JavaScript compilation, or external image dependencies. This design ensures the gallery works identically whether served from GitHub Pages or opened directly from your local filesystem. ## How to Access the Live Gallery You can reach the gallery through two primary methods: the public GitHub Pages deployment or the local [`index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/index.html) file. ### Access the Live Gallery Online (GitHub Pages) The published version lives at a static GitHub Pages URL and always reflects the latest commit on the default branch. As documented in [`README.md`](https://github.com/cathrynlavery/diagram-design/blob/main/README.md) at line 107, the public URL is: ```text https://cathrynlavery.github.io/diagram-design/ ``` Paste this URL into any modern web browser to view the full tabbed interface and all 39 diagram examples. ### Access the Live Gallery Locally (Offline) For offline viewing or development without internet access, open the [`index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/index.html) file located at [`skills/diagram-design/assets/index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/index.html). This file contains the same HTML structure and tabbed interface as the online version. On macOS, use the `open` command: ```bash open skills/diagram-design/assets/index.html ``` On Linux distributions, use `xdg-open`: ```bash xdg-open skills/diagram-design/assets/index.html ``` Both commands launch the default web browser with the local file, loading diagram examples from the adjacent `assets/` directory. ### Programmatic Access If you need to embed the gallery reference in automation scripts or generated documentation, reference the URL as a string constant: ```python gallery_url = "https://cathrynlavery.github.io/diagram-design/" print(f"View all diagram examples here: {gallery_url}") ``` ## Key Files Behind the Live Gallery The live gallery functionality is defined by three critical components in the `cathrynlavery/diagram-design` repository: - **[`skills/diagram-design/assets/index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/index.html)** – The core HTML page that renders the tabbed interface and switches between light, dark, and full-editorial views. - **`skills/diagram-design/assets/`** – The directory containing 39 individual diagram example files (named `example-.html`) that the gallery displays. - **[`README.md`](https://github.com/cathrynlavery/diagram-design/blob/main/README.md)** (line 107) – Documents the public GitHub Pages URL and announces the gallery's availability to users. These files work together to provide a zero-dependency browsing experience for all diagram templates. ## Summary - The **live gallery** showcases 39 diagram examples across light, dark, and full-editorial visual themes. - Access the gallery online at `https://cathrynlavery.github.io/diagram-design/` or offline via [`skills/diagram-design/assets/index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/index.html). - The gallery requires no build process, JavaScript compilation, or external dependencies to function. - Source files reside in `skills/diagram-design/assets/` with the entry point at [`index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/index.html). ## Frequently Asked Questions ### Can I view the live gallery without an internet connection? Yes. The gallery functions completely offline by opening [`skills/diagram-design/assets/index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/index.html) directly in a browser. Because all diagram examples are pre-rendered and stored locally in the `assets/` directory, no network requests are required after cloning the repository. ### How many diagram examples are included in the live gallery? The gallery contains **39 editorial-quality diagrams** that demonstrate the full range of outputs available from the Diagram Design skill. Each of the 39 diagrams includes three visual variants accessible via tabs in the interface. ### Do I need to build the project to view the gallery? No. The live gallery is a static HTML implementation that requires zero build steps. The [`index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/index.html) file loads pre-rendered diagram examples directly from the filesystem, making it immediately usable after cloning the repository or downloading the source code. ### Where is the live gallery URL documented in the source code? The public GitHub Pages URL is documented in [`README.md`](https://github.com/cathrynlavery/diagram-design/blob/main/README.md) at line 107, labeled "Browse the live gallery." This section directs users to `https://cathrynlavery.github.io/diagram-design/` as the canonical online location for viewing the diagram collection.