docs(web-modeler): document canvas tools, real time collaboration and…

… attention grabber

docs/components/modeler/web-modeler/collaboration.md

@@ -12,7 +12,6 @@ The user access on files and folders is defined at the project level.
 When you access Web Modeler via the Cloud menu, you see the Home page with all the projects you can access:
 ![home page](img/collaboration/web-modeler-home.png)
 
-
 ###  Access rights and permissions
 
 Users can have various level of access to a project in Web Modeler.
@@ -25,7 +24,6 @@ There are four roles with different levels of access rights that can be assigned
 * **Commenter:** the user cannot edit folders or diagrams nor invite users, but can view and leave comments on diagrams.
 * **Viewer:** the user cannot edit folders or diagrams nor leave comments, but can only view diagrams.
 
-
 ### Inviting users to Projects
 
 On the right side of a Project you can see a list of your collaborators and invite more.
@@ -46,13 +44,11 @@ On the right side of a Project you can see a list of your collaborators and invi
 ![invite sent](img/collaboration/web-modeler-collaborator-invite-sent.png)
 ![invite email](img/collaboration/web-modeler-collaborator-invite-email.png)
 
-
 ### Folders
 
 You can create folders in a project to semantically group and organize your diagrams.
 The user access on a folder is inherited from the project.
 
-
 ## Sharing and embedding diagrams
 
 Diagrams can also be shared with others in read-only mode via a sharing link.
@@ -77,7 +73,6 @@ Similar to the sharing link, a diagram can be embedded into HTML pages via an if
 
 For wiki systems like [Confluence](https://www.atlassian.com/software/confluence), we recommend using the HTML macro and adding the iframe tag from the sharing dialog. This way, diagrams can be easily included in documentation pages. To adjust the dimensions of the diagram, the width and height values of the iframe tag can be modified.
 
-
 ## Comments
 
 When selecting an element of the BPMN diagram, a discussion can be attached to this element. If no element is selected, then the discussion will be attached directly to the diagram.
@@ -91,11 +86,31 @@ Afterwards, the comment can be edited or deleted via the context menu icon.
 Elements with discussions attached will always have a visible blue overlay so you can easily identify discussion points.
 ![comment context menu](img/collaboration/web-modeler-comment-overlay-on-diagram.png)
 
-
-### Mentioning in comments
+### Mention others in comments
 
 By typing the ‘@’ character, you are able to filter the collaborators on the project and select one of them.
 ![comment suggestion](img/collaboration/web-modeler-comment-mention-suggestions.png)
 
 When submitting the comment, this user will receive an email as a notification about the new comment.
-![comment suggestion email](img/collaboration/web-modeler-comment-mention-email.png)
+![comment suggestion email](img/collaboration/web-modeler-comment-mention-email.png)
+
+## Interact with your collaborators
+
+### Model a diagram together
+
+When others are opening the same diagram as you, the updates on the diagram are sent in real time. You can also see who is in the diagram with you.
+![real time collaboration](img/real-time-collaboration.png)
+
+### Draw other's attention
+
+Whether you are in a presentation or if others are in the same diagram as you are, use the attention grabber pointer to draw attention to a specific part of the diagram.
+
+1. Switch on the attention grabber pointer from the canvas tools
+![attention grabber](img/attention-grabber.png)
+
+2. And drop the pointer by clicking anywhere on the canvas
+![attention grabber gif](img/attention-grabber-pointer-pulse.gif)
+
+The pointer will pulsate to draw attention and will match your avatar color.
+It can also be seen in real-time by others that are looking at the same diagram as you.
+

docs/components/modeler/web-modeler/milestones.md

@@ -37,3 +37,9 @@ Milestones can be compared visually. By enabling the diffing feature, the curren
 
 The differences that are highlighted are only those that affect the execution of the BPMN process. Pure visual changes like position changes are not highlighted.
 ![milestones diffing](img/milestones/web-modeler-milestone-diffing.png)
+
+## Related Diagrams
+Web Modeler identifies all diagrams in a project that share the same process id and displays them in the **Related Diagrams** section underneath the Milestones.
+You can compare a related diagram to the latest version of the current diagram or any another milestone to easily keep track of the changes you've done.
+![milestones diffing](img/milestones/web-modeler-related-diagrams.png)
+

docs/components/modeler/web-modeler/model-your-first-diagram.md

@@ -16,3 +16,24 @@ Each element has adjustable attributes. Use the properties panel on the right si
 Elements supporting different types can be reconfigured by clicking on the corresponding icon. In the following screenshot, a task has been added to the diagram. It can be converted to a service task, for example.
 
 ![task configuration](img/web-modeler-new-diagram-with-configuration.png)
+
+Use the canvas tools on the bottom right corner to interact with your diagram
+
+1. Zoom in
+![zoom in](img/zoom-in.png)
+
+2. Zoom out
+![zoom in](img/zoom-out.png)
+
+3. Reset viewport when you get lost on the canvas
+![reset view port](img/reset-viewport.png)
+
+4. Open the minimap to easily navigate complex diagrams
+![mini map](img/minimap.png)
+
+5. Enter the fullscreen mode for a distraction free modeling frenzy
+![full screen](img/fullscreen.png)
+
+6. Drop an attention point and use it as a laser pointer in your presentations
+![attention grabber](img/attention-grabber.png)
+