Skip to content

Comments

Introduction

Comments are used to display explanatory information to the user about the flow. Comments can be standalone:

or connected to one or more nodes with a link line:

Creating comments

Comments can be created by the user by clicking the ‘Create Comment’ button in the default toolbar or by clicking the ‘Create comment’ option in the default canvas background context menu/toolbar.

Note: If the application is providing its own toolbar it would need to have a button defined with the createAutoComment internal action and, in the context menu/toolbar for the canvas background there would need to be an option defined with the createComment internal action.

Editing comments

The comment can be changed to ‘edit mode’ by either double clicking it or clicking the ‘Edit Comment’ option in the default context menu/toolbar. If the application is providing its own context menu/toolbar it would need to provide an option with the setCommentEditingMode action defined.

Doing this: Yields this:

After text has been entered into the comment entry area the user can click on the canvas background to finish editing and display the comment.

Comment Selection

See the Object Selection section in the flow editor page for details.

Resizing comments

Comments can be sized by dragging the border.

Connecting a comment to a node

The user can create a link from a comment to a node in one of two way:

  1. By dragging the small gray ‘guide’ circle at the bottom of the comment and dropping it onto the target node or
  2. By selecting one of more nodes and then creating the comment. This will automatically add comment links from the comments to each selected node.

By default, the connection is shown as a dashed link line.

Coloring comment backgrounds

Comment backgrounds can be colored by clicking the ‘Change Color’ option in the default context menu/toolbar for the comment. If the application provides its own context menu/toolbar then the colorSelectedObjects action must be defined.

Markdown

Optionally, the application can switch on markdown support within comments. This allows the user to enter markdown syntax when the comment is in edit mode, which is then formated approriately in display mode.

Entering this: Yields this:

HTML in Markdown

As well as markdown syntax, the user can also enter HTML into the markdown text. This is then run when the comment is presented in display mode. HTML support allows the user more extensive customization capabilities including the specification of CSS for the text.

For example, specifying this will color the word Red:

Some <span style="color: red">Red</span> text
Here’s an example comment with some sample HTML:

html-markdown