Skip to content
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
184 changes: 55 additions & 129 deletions README.md
Original file line number Diff line number Diff line change
@@ -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
<img width="816" alt="image" src="https://github.com/user-attachments/assets/8041e1e3-3286-4caa-9a84-c87e3e19d801" />

## 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
<img width="851" alt="image" src="https://github.com/user-attachments/assets/286e7cc5-570c-4f63-8510-a4ab7975f772" />


## 🌟 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

<div align="center">
Made with ❤️ by the WDT4vRO Team

---

<sub>VMware Aria Automation Orchestrator™ is a trademark of Broadcom Inc. This project is not affiliated with or endorsed by Broadcom Inc. or its subsidiaries.</sub>
</div>
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.