powerpoint-toolbox/docs/powerpoint-toolbox-uml-index.md

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 - Shows the relationships between React components and their interactions.

2. Project Structure - Illustrates the file and directory organization of the repository.

3. Data Flow - 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