Visual Designer
The Visual Designer is a drag-and-drop editor embedded in your application that lets business users create and modify workflow schemes without writing code - process changes ship in hours instead of days or weeks, and the designed scheme is executed directly by WorkflowRuntime with no translation layer.
Every time a business process changes - a new approval step, a different routing rule, an updated SLA - somebody has to file a ticket and wait for a developer to update the code. The wait can take days or weeks. By the time the change ships, the policy that motivated it may have changed again.
The Visual Designer is a drag-and-drop editor that lets business users create and modify workflow schemes without writing code. They draw activities on a canvas, connect them with transitions, and configure commands, timers, and rules through property panels - all from within your application.
With the Visual Designer, process changes ship in hours, not sprints. An HR coordinator adjusts an onboarding sequence and deploys it the same day. A compliance officer adds a review step to a procurement flow without filing a developer ticket. The scheme the business user designs is the scheme WorkflowRuntime executes - no translation layer, no back-and-forth with engineering.
What it is
The Visual Designer is an embeddable component that renders inside your application. Business users see a canvas where they drag activity blocks (approval steps, document reviews, system actions) and connect them with transitions. Each activity has a property panel where the user configures commands (what moves the process forward), timers (when to auto-advance or escalate), conditions (when a transition is allowed), and rules (who can act and what happens next).
Think of it as a whiteboard that executes. The diagram the user draws is not a specification for developers to implement - it is the running workflow. Changes take effect immediately when the user saves and deploys through the Designer.
The Designer also ships with a built-in library of pre-built workflow schemes that appear in the Templates tab in the elements sidebar. These templates demonstrate common patterns - approval flows, parallel processes, timer-based escalation - and users can drag any template onto the canvas to use it as a starting point. Templates are grouped by category, and each one includes a description so users knows what it does before they drag it in.
For developers: the Designer ships as npm packages for React, Angular, and vanilla JavaScript (@optimajet/workflow-designer). It communicates with WorkflowRuntime through a controller endpoint in your application. Your job is to mount the component and configure the controller - the Designer handles the rest. The template library is customizable: point the Designer at a URL that serves your own set of template files, and it loads those instead of the built-in ones. Templates you do not replace keep working from the built-in defaults. See Embed Designer in React for setup.
Why it matters
The Visual Designer delivers these outcomes:
- Process changes in hours, not weeks - business users modify workflows directly, without filing tickets or waiting for the next deployment cycle. A procurement manager adds an escalation step during lunch; it is live after lunch.
- No translation errors - the diagram the business stakeholder reviews is the exact scheme that runs in production. There is no requirements document to misinterpret, no handoff between business and engineering.
- End-user process modeling in SaaS products - embed the Designer per-tenant so each customer builds and manages their own workflows. The Designer respects tenant isolation when connected to a multitenant
WorkflowRuntime, so one deployment serves many tenants without data leakage. - Full design capability without code - users configure commands, conditions, timers, actions, rules, and annotations through property panels. They can build complex multi-step processes - parallel approval, timed escalation, conditional branching - entirely through the visual interface.
- Pre-built templates as starting points - the Designer ships with a library of common workflow patterns. Business users drag a matching template onto the canvas instead of building from scratch, reducing design time and ensuring consistent process structure.
Who it is for
Evaluator (CEO, CTO, PM): the Designer removes the engineering bottleneck from process changes. Your team ships workflow updates without touching the application codebase, reducing the cost of process maintenance and accelerating time-to-market for workflow-dependent features. In a SaaS product, the Designer lets customers self-serve their own process configuration, reducing support load and increasing product value.
Developer: the Designer is a frontend component with a documented API. You mount it, configure the backend controller, and business users take over from there. You are never blocked by business users requesting process changes, and business users are never blocked waiting for you. See Embed Designer in React and Designer Customization for integration details.
Enterprise architect: the Designer produces standard scheme XML that WorkflowRuntime executes directly. The output is portable and version-controlled through the runtime's built-in process versioning. The Designer does not introduce a proprietary storage format or a separate execution engine - it is a presentation layer on top of the same runtime that powers all Workflow Engine deployments.
When to use it
Use the Visual Designer when business stakeholders need to define, modify, or approve workflow logic without developer involvement. Typical examples:
- Approval workflows - expense reports, purchase orders, contract reviews where the approval chain changes as the organization grows. The business owner adjusts the chain in the Designer; the change is live immediately.
- HR onboarding sequences - steps, document requests, and system provisioning tasks that vary by department, role, or location. HR configures each onboarding track independently.
- Content publishing pipelines - draft, review, approve, publish stages where the review requirements differ by content type. Editors modify the pipeline without involving engineering.
- Customer-facing process configuration - in a SaaS application, tenants configure their own business rules, approval chains, and SLA timers through the embedded Designer. Each tenant sees only their own schemes.
- Templates as starting points - a team rolling out a new workflow selects a pre-built template from the Designer's Templates tab that matches their process pattern, then customizes it. This is faster than starting from an empty canvas and ensures consistency across similar processes.
How it compares
Workflow Engine supports three ways to define a process - visually, in code, or in XML. Each suits a different audience and use case. The Visual Designer is one of them.
| Approach | Who it is for | Strength |
|---|---|---|
| Visual Designer - drag-and-drop editor in the browser | Business users, analysts, product owners who need to see and modify the process directly | Visual clarity: the process is visible as a diagram. Anyone can understand and change it without reading code or XML. |
Programmatic - define the scheme in C# code using ProcessDefinitionBuilder | Developers who want version control, code review, and the full power of the language | Full expressiveness: conditions, actions, and parameters are written in C# with compile-time checking and IDE support. |
| Simple Process Notation - write the scheme as XML directly | Advanced users who need precise control or programmatic generation of scheme files | Portable and diffable: XML is easy to generate, compare, and validate in CI pipelines. |
All three approaches produce a scheme that WorkflowRuntime can load and execute. You can mix them in the same project - prototype the flow in the Designer, then migrate to ProcessDefinitionBuilder when the logic stabilizes, or generate scheme XML from an external system.
The Visual Designer is the right choice when the process changes frequently and the people who understand the process are not the people who write the code.
Frequently asked questions
Can business users really design workflows without writing code?
Yes. The Visual Designer is a drag-and-drop interface with property panels for configuring commands, timers, conditions, and rules. No code, no XML, no SQL. A non-technical user can build a multi-step approval flow in minutes.
Do I need a specific license or edition to use the Designer?
The Visual Designer is included with all Workflow Engine editions. It ships as an embeddable frontend component with a backend controller - no separate license is required to use it in production.
What frontend frameworks does the Designer support?
The Designer ships as npm packages for React, Angular, and vanilla JavaScript. You can also mount it in Blazor or other frameworks using a wrapper component. It communicates with the server through standard HTTP requests and renders in any modern browser.
Can I customize the set of templates that appear in the Templates tab?
Yes. You provide your own template files on a server or CDN, and point the Designer at that location. The Designer loads your templates instead of the built-in ones. Templates that depend on plugins you have not installed are automatically hidden. You only need to provide the templates you want to replace - everything else keeps working from the built-in defaults. See the Designer Customization page for configuration details.
Can I customize the Designer's appearance, available activities, and behavior?
Yes. The Designer exposes configuration for color themes, visible activity types, toolbar buttons, property panel controls, and autocomplete providers. You can hide unused activity types, restrict available commands or actions, and replace default controls with your own. See Designer Customization for the full API.
Does the Designer work with the runtime's existing features like timers, subprocesses, and multitenancy?
Yes. Activities, transitions, timers, commands, conditions, rules, subprocesses, annotations, and localization are all configurable through the Designer interface. When connected to a multitenant WorkflowRuntime, the Designer respects tenant isolation - each tenant sees and edits only their own schemes.