# What Is the Purpose of the `assets` Directory in the Diagram-Design Repository?

> Discover the purpose of the assets directory in the diagram-design repository. Learn how it stores static content, powers the live gallery, and provides diagram templates and examples.

- Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design)
- Tags: how-to-guide
- Published: 2026-09-06

---

**The `assets` directory in `skills/diagram-design/` serves as a self-contained static content store that powers the Diagram-Design skill's live gallery, provides template scaffolds for new diagrams, and supplies pre-rendered examples for all 39 supported diagram types.**

The `assets` directory sits at `skills/diagram-design/assets` in the [cathrynlavery/diagram-design](https://github.com/cathrynlavery/diagram-design) repository. It functions as the **core static-content delivery system** for the Diagram-Design skill, eliminating build pipelines and external dependencies while enabling instant visual previews across all supported agent hosts.

## Four Core Purposes of the `assets` Directory

### 1. Live Gallery for All 39 Diagram Types

The [`assets/index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/assets/index.html) file loads every diagram type in **light, dark, and full-editorial variants**, allowing users to browse the complete visual catalog without any build step.

```bash

# Open the live gallery on macOS

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

# Open on Linux

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

```

This gallery is referenced from README files, type reference documentation, and CI checks that validate rendering output.

### 2. Template Scaffolds for New Diagrams

Three template files provide starting points for different use cases:

- **Minimal light template**: [`template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template.html) — stripped-down foundation for quick diagrams
- **Full-editorial template**: [`template-full.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-full.html) — includes header/footer summary cards
- **Motion-enabled template**: [`template-motion.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-motion.html) — accessible animation scaffolding

```bash

# Start from minimal light template

cp skills/diagram-design/assets/template.html my-diagram.html

# Copy full-editorial template with summary cards

cp skills/diagram-design/assets/template-full.html my-diagram.html

```

### 3. Pre-Rendered Example Diagrams

The directory contains `example-<type>.html` files for every visual type — architecture, flowchart, UML class, and 36 others — each rendered in three skin variants. These examples are **self-contained HTML files** that embed required SVG, CSS, and fonts directly.

```bash

# Use an existing example as customization reference

cp skills/diagram-design/assets/example-architecture.html my-arch.html

# Render a specific variant for a report

open skills/diagram-design/assets/example-uml-class-dark.html

```

### 4. Supporting Import and Animation Workflows

Auxiliary files demonstrate advanced capabilities:

- [`example-import-drawio.html`](https://github.com/cathrynlavery/diagram-design/blob/main/example-import-drawio.html) — draw.io import workflow
- [`example-import-mermaid.html`](https://github.com/cathrynlavery/diagram-design/blob/main/example-import-mermaid.html) — Mermaid import workflow  
- [`example-policy-trace-animated.html`](https://github.com/cathrynlavery/diagram-design/blob/main/example-policy-trace-animated.html) — animated diagram example

## Why Self-Contained Static HTML Matters

Every file in `assets/` is **zero-dependency static HTML** (aside from optional Google Fonts). This architectural choice delivers three critical benefits:

- **Instant previews** — open directly in any browser without JavaScript runtimes
- **Deterministic testing** — automated pipelines validate rendering, geometry, and accessibility against stable baselines
- **Cross-host portability** — functions identically on Claude Code, Codex, Factory Droid, Pi, and other agent platforms

Users and agents can copy any template or example when asked to "make me a `<type>` diagram" — no external image dependencies or build steps required.

## Key Files in `skills/diagram-design/assets/`

| File | Purpose |
|------|---------|
| [`index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/index.html) | Live gallery displaying all 39 diagram types in three variants |
| [`template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template.html) | Minimal-light scaffold for new diagrams |
| [`template-full.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-full.html) | Full-editorial scaffold with header/footer cards |
| [`template-motion.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-motion.html) | Motion-enabled scaffold for accessible animation |
| `example-<type>.html` | Pre-rendered examples for each diagram type (light/dark/full variants) |
| [`example-import-drawio.html`](https://github.com/cathrynlavery/diagram-design/blob/main/example-import-drawio.html) | draw.io import workflow demonstration |
| [`example-import-mermaid.html`](https://github.com/cathrynlavery/diagram-design/blob/main/example-import-mermaid.html) | Mermaid import workflow demonstration |

## Summary

- The `assets` directory in `skills/diagram-design/` is the **static content backbone** of the Diagram-Design skill
- It provides a **live gallery** ([`index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/index.html)), **three template scaffolds**, and **39 pre-rendered diagram examples** across multiple skin variants
- All files are **self-contained static HTML** with embedded SVG, CSS, and fonts — no build pipeline required
- This design enables **instant previews**, **deterministic automated testing**, and **portability across all agent hosts**

## Frequently Asked Questions

### Where is the `assets` directory located in the repository?

The `assets` directory is located at `skills/diagram-design/assets/` within the repository root. This path follows the skill-based organization pattern used throughout the codebase.

### Do I need to run a build step to use the files in `assets/`?

No. All files in `assets/` are self-contained static HTML that can be opened directly in any modern browser. The required SVG, CSS, and fonts are embedded directly in each file, eliminating build pipelines and external dependencies.

### How many diagram types are covered by the example files?

The `assets` directory contains pre-rendered examples for **39 diagram types**, each available in light, dark, and full-editorial variants. These span architecture diagrams, flowcharts, UML variants (class, sequence, state), and specialized visualizations.

### Can I use these templates on any agent platform?

Yes. Because the `assets` files are static HTML with no runtime dependencies, they function identically across all supported agent hosts including Claude Code, Codex, Factory Droid, and Pi.