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

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 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 file loads every diagram type in light, dark, and full-editorial variants, allowing users to browse the complete visual catalog without any build step.

# 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 — stripped-down foundation for quick diagrams
• Full-editorial template: template-full.html — includes header/footer summary cards
• Motion-enabled template: template-motion.html — accessible animation scaffolding

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

# 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 — draw.io import workflow
• example-import-mermaid.html — Mermaid import workflow
• 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	Live gallery displaying all 39 diagram types in three variants
template.html	Minimal-light scaffold for new diagrams
template-full.html	Full-editorial scaffold with header/footer cards
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	draw.io import workflow demonstration
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), 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.

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