58 lines
2.4 KiB
Markdown
58 lines
2.4 KiB
Markdown
# 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
|