WebExpress 0.0.10-alpha – A visual SVG editor for statuses and transitions

When processes in WebExpress should not only be represented technically but also experienced visually, a dedicated editor becomes essential. Status values such as new, planning, in progress and completed form the foundation of many workflows. Only the ability to arrange these statuses freely and make their transitions visible creates a tool that makes processes intuitively understandable. This is where the idea of an SVG‑based editor comes into play, presenting status nodes and their connections interactively.

The editor displays each status as a movable node on an open workspace. Users can arrange these nodes freely to structure their own workflows. The transitions between statuses are shown as lines that define the possible change from one state to another. Instead of drawing these connections automatically and rigidly, the editor allows manual routing. Each transition consists not only of a start and end point but also of a series of waypoints that define the path of the line.

These waypoints are freely movable intermediate points that users can add or remove at any time. A click on a transition creates a new waypoint that can then be moved via drag and drop. This allows users to adjust the path of the connection so that even complex diagrams remain clear. Lines can be routed around other elements, parallel connections can be separated cleanly and the overall workflow becomes easier to understand. The editor reacts in real time. When a status is moved, all associated transitions adjust automatically without losing the manually defined waypoints.

SVG is ideally suited for this approach because it provides precise shapes, clean lines and direct interaction. Each status node is an SVG element, each transition is a polyline and each waypoint is a small circle that serves as a handle. Interaction is based on pointer events, enabling smooth and intuitive movement of nodes and waypoints. Users always feel as if they are working directly with the diagram without technical details getting in the way.

The data model remains clearly structured. Each status has a position and a list of possible transitions. Each transition contains an ordered list of waypoints that define the visual path. When saving, this structure is stored as JSON so that WebExpress knows not only the logical order of statuses but also the visual representation of the workflow. The separation between logic and presentation is preserved, yet the editor allows both layers to be shaped simultaneously.

This combination of free arrangement, manual line routing and direct interaction creates a tool that is both technically precise and visually flexible. It helps users plan, document and optimize processes without requiring them to work with complex diagramming tools. The SVG editor becomes a central part of the WebExpress experience, an intuitive visual interface that makes processes visible while remaining fully configurable.