Graph Wizard for Flowchart
The Graph Wizard for Flowchart demo shows how graph defaults and input gestures can be
customized to support fast creation of flowchart diagrams.
Context-sensitive and complex input gestures are defined and managed by a
GraphWizardInputMode, that filters all possible actions for a graph item by some
pre-conditions. All active actions are then listed in the Legend that also contains
their keyboard shortcuts. While an action is executed, the Legend is hidden.
Many actions can be triggered by a button that is displayed close to the current model
item when the action is active. Those buttons can also be accessed via keyboard by
pressing the Tab key and confirming the action using Enter.
Flowchart Diagrams consist of several flowchart nodes connected by directed edges that
represent the flow between the nodes.
Each flowchart node has a specific type that is visualized by the according node shape.
The type also influences which actions are available for the node.
Things to Try
Press Space to create a new flowchart node in a free direction. Note that after
the new node and an edge to it are created, the node type can be selected and the labels
for the edge and node can be edited.
- Use the Arrow keys to switch to another node in this direction.
- Press the C key to trigger the shortcut for switching the node color.
Click on the node type button and choose the diamond-shaped Decision type. For
this you can either click the corresponding button or focus it using the
Arrow keys and select is using Enter.
Note that the new Create two child nodes... action is now available for the
Click the Add two child nodes button of a decision node to create two nodes with
edges from the decision node and edit their labels.
During this multi-step action, pressing the Esc key brings you back to the
Press the L key or click the layout button in the main toolbar to calculate a
fresh layout from scratch.