# 578 Microsim File Relationship Diagram 15be6122

> MicroSim File Relationship Diagram

- Skill: `tools-only/578-microsim-file-relationship-diagram-15be6122` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add tools-only/578-microsim-file-relationship-diagram-15be6122`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tools-only/578-microsim-file-relationship-diagram-15be6122/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tools-only (https://skillmd.com/u/tools-only)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/tools-only/578-microsim-file-relationship-diagram-15be6122

---

# MicroSim File Relationship Diagram

**Chapter:** 12 - Interactive Elements Microsims
**Generator:** mermaid-generator
**Match Score:** 93/100
**Difficulty:** Easy

## Specification

<summary>MicroSim File Relationship Diagram</summary>
    Type: diagram

    Purpose: Show how the three core MicroSim files relate to each other and integrate into the MkDocs textbook

    Components to show:
    - MkDocs Navigation (top level, light gray box)
    - index.md (blue document icon, within MkDocs)
    - iframe element (orange rounded box, within index.md)
    - main.html (green document icon, pointed to by iframe)
    - p5.js simulation (red canvas, within main.html)
    - metadata.json (purple document icon, separate)
    - Learning Management System (optional, dotted line from metadata.json)

    Connections:
    - MkDocs Navigation → index.md (solid arrow, "includes")
    - index.md → iframe element (solid arrow, "contains")
    - iframe element → main.html (solid arrow, "embeds")
    - main.html → p5.js simulation (solid arrow, "renders")
    - metadata.json → Learning Management System (dotted arrow, "can export to")
    - metadata.json → index.md (dotted arrow, "describes")

    Style: Block diagram with document icons and containers

    Labels:
    - "Student navigates here" near index.md
    - "Sandbox isolation" near iframe
    - "Self-contained, interactive" near main.html
    - "Discovery & cataloging" near metadata.json

    Annotations:
    - Note near iframe: "Provides security boundary"
    - Note near main.html: "Loads p5.js from CDN"

    Color scheme: Blue for documentation, green for code, purple for metadata, orange for integration

    Implementation: Block diagram with icons