Abstract: A user may create a blueprint that specifies an application's architecture, including virtual machines (VM) nodes, software services and application components within the VM nodes. To do so, the user manipulates a graphical user interface (GUI) rendered by a graph layout manager and a Scalable Vector Graphics (SVG) layout engine. The SVG layout engine parses declarative layout configurations and translates the declarative layout into SVG elements that visually represent the blueprint. Additional information may be rendered in independent layers overlaid on the GUI which a user may selectively activate or de-activate to show or hide, respectively, the additional information. The layers may be generated using extension points exposed via the declarative layout.

Abstract: A user may create a blueprint that specifies an application's architecture, including virtual machines (VM) nodes, software services and application components within the VM nodes. To do so, the user manipulates a graphical user interface (GUI) rendered by a Scalable Vector Graphics (SVG) layout engine. The SVG layout engine parses declarative layout configurations and translates the declarative layout into SVG elements that visually represent the blueprint. The SVG layout engine dynamically calculates absolute positions and sizes of child elements based on the declarative layout.

Abstract: A user may create a blueprint that specifies an application's architecture, including virtual machines (VM) nodes, software services and application components within the VM nodes. To do so, the user manipulates a graphical user interface (GUI) rendered by a graph layout manager and a Scalable Vector Graphics (SVG) layout engine. The SVG layout engine parses declarative layout configurations and translates the declarative layout into SVG elements that visually represent the blueprint. The graph layout manager renders topology connections representing deployment dependencies in the GUI using a street-block-and-roads design pattern.

Abstract: A graphical user interface (GUI) engine receives an input event associated with a drag-and-drop action, determines a Scalable Vector Graphics (SVG) element that relates to the input event, and causes an anchor element to be attached to the SVG element, such as be wrapping the SVG element with the anchor element. Attaching an anchor element to an SVG element and defining the anchor element as “draggable” enables web browsers to perform drag-and-drop actions with SVG elements in a uniform and predictable manner. In one example use case, an SVG element may be wrapped with an anchor element when the SVG element is selected and dragged by a user, enabling an accurate representation of the SVG element to be displayed while the user is performing the drag-and-drop action.

Abstract: A user may create a blueprint that specifies an application's architecture, including virtual machines (VM) nodes, software services and application components within the VM nodes. To do so, the user manipulates a graphical user interface (GUI) rendered by a Scalable Vector Graphics (SVG) layout engine. The SVG layout engine parses declarative layout configurations and translates the declarative layout into SVG elements that visually represent the blueprint. The SVG layout engine dynamically calculates absolute positions and sizes of child elements based on the declarative layout.

Abstract: A user may create a blueprint that specifies an application's architecture, including virtual machines (VM) nodes, software services and application components within the VM nodes. To do so, the user manipulates a graphical user interface (GUI) rendered by a graph layout manager and a Scalable Vector Graphics (SVG) layout engine. The SVG layout engine parses declarative layout configurations and translates the declarative layout into SVG elements that visually represent the blueprint. The graph layout manager renders topology connections representing deployment dependencies in the GUI using a street-block-and-roads design pattern.

Abstract: A graphical user interface (GUI) engine receives an input event associated with a drag-and-drop action, determines a Scalable Vector Graphics (SVG) element that relates to the input event, and causes an anchor element to be attached to the SVG element, such as be wrapping the SVG element with the anchor element. Attaching an anchor element to an SVG element and defining the anchor element as “draggable” enables web browsers to perform drag-and-drop actions with SVG elements in a uniform and predictable manner. In one example use case, an SVG element may be wrapped with an anchor element when the SVG element is selected and dragged by a user, enabling an accurate representation of the SVG element to be displayed while the user is performing the drag-and-drop action.

Abstract: A user may create a blueprint that specifies an application's architecture, including virtual machines (VM) nodes, software services and application components within the VM nodes. To do so, the user manipulates a graphical user interface (GUI) rendered by a graph layout manager and a Scalable Vector Graphics (SVG) layout engine. The SVG layout engine parses declarative layout configurations and translates the declarative layout into SVG elements that visually represent the blueprint. Additional information may be rendered in independent layers overlaid on the GUI which a user may selectively activate or de-activate to show or hide, respectively, the additional information. The layers may be generated using extension points exposed via the declarative layout.