What Is the Live Gallery in Diagram Design and How to Access It

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, 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 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 at line 107, the public URL is:

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 file located at 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:

open skills/diagram-design/assets/index.html

On Linux distributions, use xdg-open:

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:

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 – 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-<type>.html) that the gallery displays.
• 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.
• 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.

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 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 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}