Merge pull request #6 from dyka3773/develop

Release v1.4.0: Theme System Implementation

Author: dyka3773

README.md

@@ -35,12 +35,14 @@ pip install mvn-tree-visualizer
 - **🌐 Multiple Output Formats:**
   - **HTML:** Generates an interactive HTML diagram of your dependency tree using Mermaid.js.
   - **JSON:** Creates a structured JSON representation of the dependency tree, perfect for scripting or integration with other tools.
+- **🎨 Theme System:** Choose from 2 built-in themes (minimal, dark) for clean and consistent diagram styling.
 - **🔄 Watch Mode:** Automatically regenerates diagrams when Maven dependency files change using the `--watch` flag.
 - **📋 Version Display:** Show or hide dependency versions in both HTML and JSON outputs using the `--show-versions` flag.
 - **⚡ Easy to Use:** A simple command-line interface that gets the job done with minimal configuration.
 - **📂 File Merging:** Automatically finds and merges multiple `maven_dependency_file` files from different subdirectories.
 - **🎨 Customizable Output:** Specify the output file name and location.
-- **💾 SVG Export:** Download the generated diagram as an SVG file directly from the HTML page.
+- **💾 Enhanced Downloads:** Download diagrams as SVG or high-resolution PNG directly from the HTML page.
+- **🖱️ Interactive Features:** Hover tooltips, click-to-highlight connections, pan/zoom controls, and keyboard shortcuts.
 
 ## How to Use
 
@@ -73,6 +75,15 @@ mvn_tree_visualizer --filename "maven_dependency_file" --output "dependencies.js
 mvn_tree_visualizer --filename "maven_dependency_file" --output "diagram.html" --show-versions
 ```
 
+#### With Custom Themes
+```bash
+# Dark theme for low-light environments  
+mvn_tree_visualizer --filename "maven_dependency_file" --output "diagram.html" --theme dark
+
+# Default minimal theme (clean monospace design)
+mvn_tree_visualizer --filename "maven_dependency_file" --output "diagram.html"
+```
+
 #### JSON Output with Versions
 ```bash
 mvn_tree_visualizer --filename "maven_dependency_file" --output "dependencies.json" --format json --show-versions
@@ -109,12 +120,20 @@ Each example includes:
 | `--filename` | The name of the file containing the Maven dependency tree | `maven_dependency_file` |
 | `--output` | The name of the output file | `diagram.html` |
 | `--format` | The output format (`html` or `json`) | `html` |
+| `--theme` | Theme for HTML diagrams (`minimal`, `dark`) | `minimal` |
 | `--show-versions` | Show dependency versions in the diagram | `False` |
 | `--watch` | Watch for file changes and auto-regenerate diagram | `False` |
 | `--directory` | The directory to scan for the Maven dependency file(s) | current directory |
 | `--keep-tree` | Keep the intermediate `dependency_tree.txt` file | `False` |
 | `--help` | Show the help message and exit | - |
 
+### Theme Options
+
+- **`minimal`**: Clean monospace design with simple black borders (default)
+- **`dark`**: Same minimal styling but with white text on black background
+
+📖 **See the complete [Theme Documentation](docs/THEMES.md) for detailed information about themes and interactive features.**
+
 ## Performance
 
 **For Large Projects:**

ROADMAP.md

@@ -41,42 +41,61 @@ This document outlines the future direction of the `mvn-tree-visualizer` project
     *   [x] Comprehensive test coverage (22 tests)
     *   [x] Modular code organization improvements
 
-## v1.4.0 - Visual and Theme Enhancements 🎨 (Next Release)
+## v1.4.0 - Visual and Theme Enhancements ✅ (Released)
 
 **Focus:** Making the output more visually appealing and customizable.
 
-**Priority:** High - Addresses user feedback about visual appearance and usability with large dependency trees.
-
-*   **Visual Themes (High Priority):**
-    *   [ ] `--theme` option with multiple built-in themes (dark, light, colorful)
-    *   [ ] CSS variable system for easy theme customization
-    *   [ ] Better default styling and typography improvements
-    *   [ ] Responsive design for different screen sizes
-    *   [ ] Custom CSS support for advanced users
-*   **Interactive Features (High Priority):**
+**Status:** Released July 17, 2025
+
+*   **Visual Themes (Completed):**
+    *   [x] `--theme` option with multiple built-in themes (default/minimal, dark, light)
+    *   [x] Standardized color scheme across all themes
+    *   [x] Clean minimal design as default theme  
+    *   [x] Enhanced dark theme with proper text visibility
+    *   [x] Consistent graphDiv styling across themes
+*   **Interactive Features (Completed):**
+    *   [x] SVG download functionality
+    *   [x] Pan and zoom controls with keyboard shortcuts
+    *   [x] Full-screen diagram experience
+    *   [x] Improved hover effects for nodes
+*   **Template Enhancements (Completed):**
+    *   [x] Enhanced template system with theme support
+    *   [x] Improved Mermaid.js configuration options
+    *   [x] Standardized color coding for node types (root=blue, intermediate=orange, leaf=green)
+    *   [x] Comprehensive examples for all themes
+
+## v1.5.0 - Interactive Features 🎯 (Next Release)
+
+**Focus:** Enhanced interactivity and user experience.
+
+**Priority:** High - Building on the solid theme foundation with interactive capabilities.
+
+*   **Node Interaction Features (High Priority):**
+    *   [ ] **Descendant Highlighting:** Click nodes to highlight only their downstream dependencies
     *   [ ] Tooltips with detailed dependency information (groupId, version, scope)
-    *   [ ] Hover effects and better visual feedback
     *   [ ] Expandable/collapsible dependency groups for large trees
-    *   [ ] Better visual hierarchy for nested dependencies
-*   **Template Enhancements (Medium Priority):**
-    *   [ ] Enhanced Jinja2 template system for theme support
-    *   [ ] Improved Mermaid.js configuration options
-    *   [ ] Better color coding for different dependency types/scopes
+    *   [ ] Search and filter functionality within diagrams
+*   **Enhanced Controls (Medium Priority):**
+    *   [ ] PNG download option alongside SVG
+    *   [ ] Zoom to fit specific dependency subtrees
+    *   [ ] Better visual hierarchy controls for nested dependencies
+*   **Performance & Layout (Medium Priority):**
+    *   [ ] Better layout options for large dependency trees
+    *   [ ] Performance optimizations for very large projects
 
-## v1.5.0 - Advanced Features 🚀
+## v1.6.0 - Advanced Features 🚀
 
 **Focus:** Performance and advanced functionality for power users.
 
-*   **Performance & Layout:**
-    *   [ ] Better layout options for large dependency trees
-    *   [ ] Performance optimizations for very large projects
-    *   [ ] Memory usage improvements for complex graphs
 *   **Export Enhancements:**
     *   [ ] PNG, PDF export options
     *   [ ] SVG improvements and customization
     *   [ ] High-quality output for presentations
+*   **Advanced Analysis:**
+    *   [ ] Memory usage improvements for complex graphs
+    *   [ ] Dependency statistics and analysis
 
-## v1.6.0+ - Extended Capabilities 🔮
+## v1.7.0+ - Extended Capabilities 🔮
 
 **Focus:** Advanced analysis and integration features.
 

docs/THEMES.md

@@ -0,0 +1,106 @@
+# Theme System Documentation
+
+The mvn-tree-visualizer v1.4.0 introduces a clean and focused theme system with two carefully designed themes.
+
+## Available Themes
+
+### 1. Minimal Theme (Default)
+- **Description**: Clean monospace design with simple black borders and minimal styling
+- **Use case**: Default choice for documentation, development, and general use
+- **Colors**: Standardized blue for root nodes, orange for intermediate, green for leaves
+- **Features**: Monospace fonts, clean lines, no decorative elements
+- **Background**: White with black text and borders
+
+### 2. Dark Theme  
+- **Description**: Same minimal styling as default but optimized for low-light environments
+- **Use case**: Late-night coding sessions, dark IDE environments, reducing eye strain
+- **Colors**: Same standardized color scheme on enhanced dark backgrounds
+- **Features**: Identical layout to minimal theme with inverted colors
+- **Background**: Dark gray (`#2d3748`) with white text and light borders
+
+## Standardized Color Scheme
+
+Both themes use a consistent color scheme for better recognition:
+- **Root Nodes**: Blue (#3B82F6) - Your main project dependencies
+- **Intermediate Nodes**: Orange (#F59E0B) - Transitive dependencies with children
+- **Leaf Nodes**: Green (#10B981) - Final dependencies with no children
+
+## Usage
+
+### CLI Usage
+```bash
+# Use minimal theme (default)
+mvn-tree-visualizer /path/to/project
+
+# Use dark theme
+mvn-tree-visualizer /path/to/project --theme dark
+
+# Combine with other options
+mvn-tree-visualizer /path/to/project --theme dark --show-versions --output my-diagram.html
+```
+
+### Available Theme Options
+- `minimal` - Clean minimal design (default)
+- `dark` - Same minimal design with dark colors
+
+## Interactive Features
+
+### 1. Enhanced Controls
+- **Download SVG**: Export diagram as scalable vector graphics
+- **Note**: PNG download feature planned for future version
+
+### 2. Node Interactions
+- **Hover Effects**: Nodes show subtle opacity changes on hover
+- **Click Functionality**: Currently disabled - planned for future version
+
+### 3. Keyboard Shortcuts
+- **Ctrl+S**: Download as SVG
+- **Ctrl+R**: Reset pan/zoom to center
+
+### 4. Pan and Zoom
+- **Mouse Controls**: Drag to pan, scroll to zoom
+- **Touch Support**: Mobile-friendly touch controls
+- **Reset Controls**: Built-in reset and fit-to-screen
+
+## Full-Screen Experience
+
+The diagram takes up the full height of the browser window minus the control bar, providing maximum space for viewing complex dependency trees.
+
+## Node Styling
+
+The enhanced Mermaid generation includes intelligent node styling:
+
+### Node Types
+- **Root Nodes**: Blue styling for main project dependencies
+- **Leaf Nodes**: Green styling for final dependencies
+- **Intermediate Nodes**: Orange styling for transitive dependencies
+
+### Enhanced Features
+- **Sanitized IDs**: Safe Mermaid-compatible node identifiers
+- **Proper Labels**: Clean display names with version support
+- **Consistent Styling**: Identical appearance across both themes
+
+## Browser Compatibility
+
+The enhanced templates work with:
+- Chrome/Chromium 90+
+- Firefox 88+
+- Safari 14+
+- Edge 90+
+
+## Examples
+
+### Basic Theme Usage
+```bash
+# Generate with dark theme
+mvn-tree-visualizer . --theme dark --output dark-deps.html
+
+# Generate with minimal theme (default)
+mvn-tree-visualizer . --output minimal-deps.html
+```
+
+### Watch Mode with Themes
+```bash
+# Watch for changes with dark theme
+mvn-tree-visualizer . --theme dark --watch
+```

examples/README.md

@@ -9,10 +9,20 @@ The `simple-project/` directory contains a basic Maven project with common depen
 - Apache Commons Lang3
 - JUnit (test scope)
 
+**Available Examples:**
+- `diagram-dark.html` - Dark theme optimized for low-light environments
+- `diagram-minimal.html` - Light theme with minimal styling
+- `dependencies.json` - JSON output for programmatic use
+
 **To generate outputs:**
 ```bash
 cd examples/simple-project
-mvn_tree_visualizer --filename maven_dependency_file --output diagram.html
+
+# Generate with different themes
+mvn_tree_visualizer --filename maven_dependency_file --output diagram-minimal.html
+mvn_tree_visualizer --filename maven_dependency_file --output diagram-dark.html --theme dark
+
+# Generate JSON output
 mvn_tree_visualizer --filename maven_dependency_file --output dependencies.json --format json
 ```
 
@@ -24,13 +34,32 @@ The `complex-project/` directory contains a more realistic microservice project
 - Google Guava
 - Comprehensive test dependencies
 
+**Available Examples:**
+- `diagram-minimal.html` - Clean minimal theme
+- `diagram-dark.html` - Dark theme optimized for low-light environments
+
 **To generate outputs:**
 ```bash
 cd examples/complex-project
-mvn_tree_visualizer --filename maven_dependency_file --output diagram.html --show-versions
-mvn_tree_visualizer --filename maven_dependency_file --output dependencies.json --format json --show-versions
+
+# Generate with different themes and versions
+mvn_tree_visualizer --filename maven_dependency_file --output diagram-minimal.html --show-versions
+mvn_tree_visualizer --filename maven_dependency_file --output diagram-dark.html --theme dark --show-versions
 ```
 
+## Theme Comparison
+
+You can easily compare all themes by opening the different diagram files:
+
+### Color Scheme (Consistent Across All Themes)
+- **Root nodes**: Blue - Your main project dependencies
+- **Intermediate nodes**: Orange - Transitive dependencies with children
+- **Leaf nodes**: Green - Final dependencies with no children
+
+### Theme Characteristics
+- **Default**: Clean minimal design with monospace fonts and simple borders
+- **Dark**: Dark backgrounds with bright text, optimized for low-light environments  
+
 ## Use Cases
 
 ### 1. Quick Dependency Overview