PHPackages spryker-community/oms-visualizer - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. spryker-community/oms-visualizer ActiveLibrary[Utility & Helpers](/categories/utility) spryker-community/oms-visualizer ================================ OmsVisualizer - visualize OMS workflow with mermaid 0.1(10mo ago)248[3 PRs](https://github.com/spryker-community/oms-visualizer/pulls)MITPHPPHP >=8.2CI passing Since Jul 6Pushed 3mo agoCompare [ Source](https://github.com/spryker-community/oms-visualizer)[ Packagist](https://packagist.org/packages/spryker-community/oms-visualizer)[ Docs](https://github.com/spryker-community/oms-visualizer)[ RSS](/packages/spryker-community-oms-visualizer/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (1)Dependencies (4)Versions (10)Used By (0) OMS Visualizer ============== [](#oms-visualizer) A modern visualization tool for Spryker OMS (Order Management System) process flows. This package provides an enhanced, user-friendly way to visualize and interact with OMS graphs in your Spryker application. [![OMS Visualizer Example](oms-visualizer.png)](oms-visualizer.png) ✓ Tested with Spryker **B2B-Demoshop 202410.0** Features -------- [](#features) - Modern, interactive visualization of OMS process flows - Easy integration with existing Spryker projects - Built on Mermaid JS for reliable and attractive graph rendering - Background-, Font- and Graph-Colors can be changed via config - Zoom-In and Zoom-Out - Highlighting Start-, Final-, Failed- and Dead-States Setup ----- [](#setup) ### 1. Install Package [](#1-install-package) Install the package via Composer: ``` composer require spryker-community/oms-visualizer ``` ### 2. Integrate ZED Controller [](#2-integrate-zed-controller) To make the OMS Visualizer accessible through your Spryker application, follow these steps: 1. Add the `SprykerCommunity` namespace to `CORE_NAMESPACES` in your project's `config_default.php` file: ``` $config[KernelConstants::CORE_NAMESPACES] = [ 'SprykerShop', 'SprykerEco', 'Spryker', 'SprykerCommunity', // Add this line if not exist ]; ``` 2. Run the following console commands inside the `docker/sdk cli` to update caches: ``` console transfer:generate console cache:empty-all ``` These commands refresh the router cache, generate transfer objects, and warm up the Twig template cache to ensure your changes take effect. ### 3. Install Frontend Assets [](#3-install-frontend-assets) The OMS Visualizer uses Mermaid JS for graph visualization. Follow these steps to install the necessary frontend dependencies and assets: 1. Add the `spryker-community` workspace to the root `package.json` of your project: ``` "workspaces": [ "vendor/spryker/*", "vendor/spryker-community/*", "vendor/spryker/*/assets/Zed", "vendor/spryker-community/*/assets/Zed" ], ``` 2. Install all JavaScript dependencies from the `/vendor/spryker-community` directory and compile them for use in your Zed application: ``` npm install ``` 3. Create a new file at `./frontend/zed/build.js` with the following content: ``` 'use strict'; const oryxForZed = require('@spryker/oryx-for-zed'); const path = require('path'); const api = require('@spryker/oryx-for-zed/lib'); const build = require('@spryker/oryx-for-zed/lib/build'); const copyAssetsCallback = require('@spryker/oryx-for-zed/lib/copy'); // Add the OMS Visualizer package to the build process oryxForZed.settings.entry.dirs.push(path.resolve('./vendor/spryker-community')); api.getConfiguration(oryxForZed.settings) .then((configuration) => build(configuration, copyAssetsCallback)) .catch((error) => console.error('An error occurred while creating configuration', error)); ``` 4. Update your project's `package.json` file to include your `./frontend/zed/build.js` as build script: ``` "scripts": { "zed": "node ./frontend/zed/build", "other-scripts": "your-other-scripts" } ``` Note: Replace "other-scripts" with your existing script entries. 5. Run the build command to install and compile the frontend assets: ``` npm run zed ``` ### 4. Add navigation entry [](#4-add-navigation-entry) To have a separate navigation menu for the new OMS Visualizer, copy the content from `src/SprykerCommunity/Zed/Communication/navigation.xml` into your `config/Zed/navigation.xml`. Clear the cache for navigation: ``` vendor/bin/console application:build-navigation-cache ``` Troubleshooting --------------- [](#troubleshooting) ### Common Issues [](#common-issues) #### Incompatible Version of Chevrotain [](#incompatible-version-of-chevrotain) If you encounter errors related to the `chevrotain` npm module, you may need to install a compatible version: ``` npm install chevrotain@10.4.1 ``` This resolves a breaking dependency issue that can occur with newer versions of the package. Usage ----- [](#usage) After installation, you can access the OMS Visualizer through your Zed application's interface. Navigate to the OMS section to view and interact with your process flow visualizations. Development ----------- [](#development) ### Running Tests [](#running-tests) The OMS Visualizer includes a suite of unit tests to ensure code quality and functionality. To run the tests: 1. Make sure you have installed the development dependencies: ``` composer install ``` 2. Run the PHPUnit test suite: ``` vendor/bin/phpunit ``` The test suite includes: - Unit tests for the OmsVisualizerFacade - Tests for the FlowChartRenderer - Tests for state styling and creation ### Contributing [](#contributing) Contributions are welcome! Please feel free to submit a Pull Request. Support ------- [](#support) If you encounter any issues or have questions, please open an issue in the GitHub repository. License ------- [](#license) This package is released under the MIT license. ### Health Score 36 — LowBetter than 82% of packages Maintenance68 Regular maintenance activity Popularity14 Limited adoption so far Community9 Small or concentrated contributor base Maturity45 Maturing project, gaining track record Bus Factor1 Top contributor holds 85.7% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 307d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/11dff6ded7712379a6c6be72860508a8d0f8328c62d3b5840b431e37fbaaa5db?d=identicon)[spryker-community](/maintainers/spryker-community) --- Top Contributors [![sebastianlarisch](https://avatars.githubusercontent.com/u/52778227?v=4)](https://github.com/sebastianlarisch "sebastianlarisch (18 commits)")[![fsmeier](https://avatars.githubusercontent.com/u/1506919?v=4)](https://github.com/fsmeier "fsmeier (2 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)") --- Tags workflowmermaidsprykervisualizeroms ### Code Quality TestsPHPUnit Static AnalysisPHPStan Type Coverage Yes ### Embed Badge ![Health badge](/badges/spryker-community-oms-visualizer/health.svg) ``` [![Health](https://phpackages.com/badges/spryker-community-oms-visualizer/health.svg)](https://phpackages.com/packages/spryker-community-oms-visualizer) ``` ### Alternatives [symfony/workflow Provides tools for managing a workflow or finite state machine 62942.3M170](/packages/symfony-workflow)[yohang/finite A simple PHP Finite State Machine 1.3k3.5M10](/packages/yohang-finite)[franzl/studio Develop your Composer libraries with style 1.1k634.5k15](/packages/franzl-studio)[zerodahero/laravel-workflow Integerate Symfony Workflow component into Laravel. 204815.2k4](/packages/zerodahero-laravel-workflow)[phpmentors/workflower A BPMN 2.0 workflow engine for PHP 70652.9k4](/packages/phpmentors-workflower)[brexis/laravel-workflow Integerate Symfony Workflow component into Laravel. 283125.6k](/packages/brexis-laravel-workflow) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)