# PowerPoint Toolbox UML Diagrams

This document serves as an index for the UML diagrams created for the PowerPoint toolbox add-in repository.

## Available Diagrams

1. [Component Relationships](powerpoint-toolbox-uml.md) - Shows the relationships between React components and their interactions.

2. [Project Structure](powerpoint-toolbox-structure-uml.md) - Illustrates the file and directory organization of the repository.

3. [Data Flow](powerpoint-toolbox-dataflow-uml.md) - Demonstrates the flow of data and interactions between components and the PowerPoint API.

## Repository Overview

The PowerPoint toolbox add-in is a Microsoft Office add-in built with React and TypeScript that provides various tools for enhancing PowerPoint presentations. The add-in is structured as follows:

### Key Technologies

- **React**: For building the user interface
- **TypeScript**: For type-safe JavaScript development
- **Office JS API**: For interacting with PowerPoint
- **Fluent UI**: For consistent Microsoft-style UI components
- **Webpack**: For bundling and building the application

### Architecture Highlights

- **Component-Based Structure**: The application is organized into reusable UI components
- **Context API for State Management**: Uses React's Context API for sharing state across components
- **Unidirectional Data Flow**: Data flows from user interaction through the application to PowerPoint and back
- **Centralized Error Handling**: Error handling is managed through the Status Context

### Main Features

The add-in provides tools for:

- Matching sizes and properties between shapes
- Rounding image corners
- Swapping positions of shapes
- Inserting title slides
- Adding confidential markings and draft watermarks
- Managing progress bars
- Aligning shapes
- Managing grid guidelines

## How to View the Diagrams

Each diagram is contained in a separate Markdown file with embedded Mermaid syntax. To view the diagrams:

1. Open the desired diagram file in a Markdown viewer that supports Mermaid diagrams (such as GitHub, VS Code with the Mermaid extension, or any Mermaid-compatible viewer).

2. The diagrams will render automatically in compatible viewers.

## Diagram Types

- **Class Diagrams**: Used for component relationships and project structure
- **Sequence Diagrams**: Used for data flow and interaction patterns
- **Flowcharts**: Used for component communication patterns