Add UML diagrams to documentation directory

2025-03-31 20:31:31 +02:00
parent 626b7aaa7a
commit e82df2f308
5 changed files with 529 additions and 1 deletions
@@ -0,0 +1,148 @@
+# PowerPoint Toolbox Project Structure UML
+
+This UML diagram represents the file and directory structure of the PowerPoint toolbox add-in.
+
+```mermaid
+classDiagram
+    %% Project Structure
+    class Repository {
+        <<Root>>
+        Configuration Files
+        Source Code
+        Assets
+        Documentation
+    }
+
+    %% Configuration Files
+    class ConfigFiles {
+        <<Config>>
+        .eslintrc.json
+        .gitignore
+        .hintrc
+        babel.config.json
+        manifest.xml
+        package.json
+        tsconfig.json
+        webpack.config.js
+    }
+
+    %% Source Code Structure
+    class SourceCode {
+        <<Source>>
+        /src
+    }
+
+    class Commands {
+        <<Module>>
+        /src/commands
+        commands.html
+        commands.ts
+    }
+
+    class Taskpane {
+        <<Module>>
+        /src/taskpane
+        index.tsx
+        taskpane.html
+    }
+
+    class Components {
+        <<Module>>
+        /src/taskpane/components
+        ActionButton.tsx
+        AlignmentButtons.tsx
+        App.tsx
+        commonStyles.tsx
+        ConfidentialButtons.tsx
+        DraftButtons.tsx
+        GridGuidelineManager.tsx
+        Header.tsx
+        InsertTitles.tsx
+        MatchProperties.tsx
+        MatchSizes.tsx
+        ProgressBarButtons.tsx
+        RoundImage.tsx
+        Section.tsx
+        SwapPositions.tsx
+    }
+
+    class Types {
+        <<Module>>
+        /src/taskpane/types
+        office-types.ts
+    }
+
+    %% Assets
+    class Assets {
+        <<Resources>>
+        /assets
+        edison-16.png
+        edison-32.png
+        edison-64.png
+        edison-80.png
+        edison-128.png
+        edison-filled.png
+    }
+
+    %% Documentation
+    class Documentation {
+        <<Docs>>
+        /docs
+        DEVELOPERS.md
+        USER_GUIDE.md
+    }
+
+    %% Relationships
+    Repository *-- ConfigFiles : contains
+    Repository *-- SourceCode : contains
+    Repository *-- Assets : contains
+    Repository *-- Documentation : contains
+    
+    SourceCode *-- Commands : contains
+    SourceCode *-- Taskpane : contains
+    
+    Taskpane *-- Components : contains
+    Taskpane *-- Types : contains
+    
+    %% Dependency Relationships
+    Components --> Types : imports
+    Commands --> Components : may use
+```
+
+## Project Structure Explanation
+
+This UML diagram illustrates the file and directory organization of the PowerPoint toolbox add-in:
+
+1. **Repository Root**: Contains configuration files, source code, assets, and documentation.
+
+2. **Configuration Files**: Various configuration files for the development environment, including:
+   - manifest.xml: Office add-in manifest
+   - package.json: NPM package configuration
+   - webpack.config.js: Webpack bundler configuration
+   - tsconfig.json: TypeScript configuration
+   - babel.config.json: Babel configuration
+   - .eslintrc.json: ESLint configuration
+   - .gitignore: Git ignore rules
+   - .hintrc: Hint configuration
+
+3. **Source Code Structure**:
+   - **/src/commands**: Command-related files for Office ribbon integration
+   - **/src/taskpane**: Main taskpane UI implementation
+     - **/components**: React components for the UI
+     - **/types**: TypeScript type definitions
+
+4. **Assets**: Icon files in various sizes for the add-in
+
+5. **Documentation**: Developer and user documentation
+
+## Build and Execution Flow
+
+The PowerPoint toolbox add-in follows this general build and execution flow:
+
+1. Source code is written in TypeScript and React
+2. Webpack bundles the code according to webpack.config.js
+3. The Office add-in manifest (manifest.xml) defines how the add-in appears in PowerPoint
+4. When loaded in PowerPoint, the add-in renders the taskpane UI
+5. The taskpane components interact with PowerPoint through the Office JS API
+
+This structure follows Microsoft's recommended patterns for Office add-in development using React and TypeScript.