diff --git a/README.md b/README.md index c88a102..25eaa50 100644 --- a/README.md +++ b/README.md @@ -1,175 +1,101 @@ -# Workflow Documentation Tool for Aria Automation Orchestrator (WDT4vRO) v2.0.0 + +# Workflow Documentation Tool for Aria Automation Orchestrator (WDT4vRO) [![Open in Browser](https://img.shields.io/badge/Open%20in-Browser-4285F4?style=for-the-badge&logo=googlechrome&logoColor=white)](https://wdt4vro.vercel.app/) [![Version](https://img.shields.io/badge/version-2.0.0-blue.svg?style=for-the-badge)](https://github.com/imtrinity94/WDT4vRO/releases/tag/v2.0.0) -A comprehensive visualization and documentation tool that converts XML-based workflow definitions from VMware VCF Operations Orchestrator (aka Aria Automation Orchestrator or vRealize Orchestrator) into intuitive, interactive diagrams. This tool helps teams understand, document, and maintain complex workflows with ease. +A comprehensive visualization and documentation tool that converts XML-based workflow definitions from VMware VCF Operations Orchestrator (formerly Aria Automation Orchestrator or vRealize Orchestrator) into intuitive, interactive diagrams. This tool helps teams understand, document, and maintain complex workflows with ease. -🌐 **Try Online**: [https://wdt4vro.onrender.com/](https://wdt4vro.onrender.com/) or [https://wdt4vro.vercel.app/](https://wdt4vro.vercel.app/) +🌐 **Try Online**: [https://wdt4vro.vercel.app/](https://wdt4vro.vercel.app/) ## πŸš€ What's New in v2.0.0 -- **Enhanced Script Display** - - Improved script viewing with syntax highlighting - - Better handling of script content in custom conditions - - More reliable script extraction from workflow items - -- **Improved Workflow Item Handling** - - Better support for custom conditions - - More accurate display of workflow item properties - - Fixed issues with Windows OS condition display +- **Enhanced Script Display**: Improved script viewing with syntax highlighting and better handling of script content in custom conditions. +- **Improved Workflow Item Handling**: Better support for custom conditions and more accurate display of workflow item properties. +- **UI/UX Improvements**: Updated welcome screen with version information, better error handling, and an improved layout for workflow details. -- **UI/UX Improvements** - - Updated welcome screen with version information - - Better error handling and user feedback - - Improved layout for workflow details +## Screenshots -## Homescreen +### Homescreen image -## Generated Workflow Schema +### Generated Workflow Schema ![Workflow Visualization Example](assets/wofklow_sample_diagram.png) -## Generated Metadata Tables and Scripts Tables +### Generated Metadata Tables and Scripts Tables image - ## 🌟 Key Features -- **πŸ“ XML Workflow Import** - - Directly upload XML workflow files - - Supports all standard vRO workflow elements - - Automatic detection of workflow types and relationships - -- **🎨 Intelligent Visualization** - - Automatic layout of workflow elements - - Color-coded nodes for different element types - - Custom icons for different workflow actions - - Support for async workflows and scheduled tasks - -- **πŸ” Interactive Interface** - - Zoom and pan functionality - - Detailed tooltips on hover - - Responsive design for all devices - - Full-screen mode for better visibility - -- **πŸ“„ Comprehensive Documentation** - - Automatic metadata extraction - - Input/output parameter documentation - - Workflow element details panel - - Export functionality for sharing +- **πŸ“ XML Workflow Import**: Directly upload XML workflow files and get instant visualizations. +- **🎨 Intelligent Visualization**: Automatic layout of workflow elements with color-coded nodes and custom icons. +- **πŸ” Interactive Interface**: Zoom, pan, and view detailed tooltips on hover. +- **πŸ“„ Comprehensive Documentation**: Automatic metadata extraction, input/output parameter documentation, and a detailed workflow element panel. ## πŸš€ Getting Started -### Quick Start +### Option 1: Use Online Version (Recommended) +1. Go to [https://wdt4vro.vercel.app/](https://wdt4vro.vercel.app/). +2. Click "Upload Workflow" and select your XML file. -#### Option 1: Use Online Version (Recommended) -1. Go to [https://wdt4vro.onrender.com/](https://wdt4vro.onrender.com/) -2. Click "Upload Workflow" and select your XML file - -#### Option 2: Run Locally -1. **Clone the repository** +### Option 2: Run Locally +1. **Clone the repository**: ```bash git clone https://github.com/imtrinity94/WDT4vRO.git cd WDT4vRO ``` +2. **Run a local server**: + ```bash + python -m http.server 8000 + ``` +3. **Open in your browser**: + Navigate to `http://localhost:8000`. -2. **Run a local server** - - Python 3: - ```bash - python -m http.server 8000 - ``` - - Or use any other local web server - -3. **Open in browser** - - Navigate to `http://localhost:8000` - - Click "Upload Workflow" and select your XML file - -## πŸ› οΈ Usage Guide - -### Uploading Workflows -1. Click the "Upload Workflow" button -2. Select your XML workflow file -3. The tool will automatically process and display the workflow - -### Navigation -- **Zoom**: Use the +/- buttons or mouse wheel -- **Pan**: Click and drag the canvas -- **Reset View**: Click the home button - -### Export Options -- **PNG**: Download as high-resolution image -- **HTML**: Self-contained HTML export +## πŸ› οΈ For Developers -## πŸ—οΈ Project Structure +### Project Structure ``` WDT4vRO/ β”œβ”€β”€ assets/ # Static assets and images -β”‚ β”œβ”€β”€ wdt4vro_icon.svg # Application icon -β”‚ └── wdt4vro-screenshot.png # Screenshot -β”œβ”€β”€ icons/ # Workflow element icons -β”‚ β”œβ”€β”€ action.svg # Action icon -β”‚ β”œβ”€β”€ workflow-async.svg # Async workflow icon -β”‚ β”œβ”€β”€ workflow-schedule.svg # Schedule workflow icon -β”‚ └── ... -β”œβ”€β”€ Sample Workflow XMLs/ # Example workflow files -β”‚ └── all-workflow-element-polyglot.xml +β”œβ”€β”€ icons/ # Workflow element icons +β”œβ”€β”€ Sample Workflow XMLs/ # Example workflow files β”œβ”€β”€ index.html # Main application file -β”œβ”€β”€ full.render.js # Graphviz renderer -β”œβ”€β”€ README.md # This file -└── LICENSE # License information +β”œβ”€β”€ full.render.js # Graphviz renderer (legacy) +└── README.md # This file ``` -## 🀝 Contributing - -We welcome contributions! Here's how you can help: +### Development Setup -1. **Report Issues** - - Found a bug? Open an issue with steps to reproduce - - Have a feature request? Let us know! +1. **Prerequisites**: + - A modern web browser (Chrome, Firefox, Edge). + - A local web server (Python's `http.server`, `live-server` for Node.js, etc.). -2. **Submit Pull Requests** - - Fork the repository - - Create a feature branch - - Commit your changes - - Push to your fork - - Submit a pull request +2. **Running the Application**: + - The application is a single `index.html` file with embedded CSS and JavaScript. + - You can open `index.html` directly in your browser, but it's recommended to use a local server to avoid potential CORS issues with file loading. -3. **Improve Documentation** - - Update README - - Add code comments - - Write tutorials or guides +### Code Overview -## πŸ“„ License - -This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. +- **`index.html`**: The main entry point of the application. It contains the HTML structure, CSS for styling, and JavaScript for all the application logic, including: + - **File Upload and Parsing**: Handles XML file uploads and parses the workflow data. + - **Graph Generation**: Creates the workflow diagram using SVG and `foreignObject` for HTML content within the SVG. + - **Details Pane**: Generates the detailed view of workflow items, including input/output parameters and scripts. + - **Monaco Editor Integration**: Provides syntax highlighting for scripts. + - **Export Functionality**: Handles exporting the diagram to PNG and the full documentation to HTML. -## πŸ“ž Support +- **`icons/`**: Contains SVG icons for different workflow item types. The `getIconForNode` function in `index.html` maps workflow item types to these icons. -For support, please: -1. Check the [Issues](https://github.com/imtrinity94/WDT4vRO/issues) page -2. If your issue isn't listed, create a new one -3. For direct contact, email support@example.com +- **`assets/`**: Includes images and other static files used in the UI. -## πŸ“š Resources - -- [vRO Documentation](https://docs.vmware.com/en/vRealize-Orchestrator/) -- [Graphviz Documentation](https://graphviz.org/documentation/) -- [SVG Reference](https://developer.mozilla.org/en-US/docs/Web/SVG) +## 🀝 Contributing -## 🌟 Special Thanks +We welcome contributions! Here's how you can help: -- VMware for vRealize Orchestrator -- The Graphviz team -- All contributors and users +1. **Report Issues**: Found a bug or have a feature request? [Open an issue](https://github.com/imtrinity94/WDT4vRO/issues/new). +2. **Submit Pull Requests**: Fork the repository, create a feature branch, and submit a pull request with your changes. +3. **Improve Documentation**: Update the README, add code comments, or write tutorials. ---- +## πŸ“„ License -
- Made with ❀️ by the WDT4vRO Team - - --- - - VMware Aria Automation Orchestratorβ„’ is a trademark of Broadcom Inc. This project is not affiliated with or endorsed by Broadcom Inc. or its subsidiaries. -
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.