FIrst documentation for Web Modeler (#620)

* docs(web-modeler): rough first update

* docs(web-modeler): rename Cloud Modeler to Web Modeler and Camunda Modeler to Desktop Modeler

* docs(web-modeler): rewrite launch-cloud-modeler.md page

* docs(web-modeler): fix issues that ocurred after rebase

* docs(web-modeler): rewrite model-your-first-diagram.md page

* docs(web-modeler): rewrite import-diagram.md page

* docs(web-modeler): rewrite save-and-deploy.md page

* docs(web-modeler): rewrite start-instance.md page

* docs(web-modeler): remove model-overview.md page

* docs(web-modeler): document project roles and invitation

* docs(web-modeler): finish docs for collaboration: folder, share, embed, comment, mention

* docs(web-modeler): document milestones and diffing

* docs(web-modeler): rewrite utilizing-forms.md page and use updated imgs

* docs(web-modeler): rewrite automating-a-process-using-bpmn.md and use updated imgs

* docs(web-modeler): rewrite getting-started-orchestrate-microservices.md and use updated imgs

* docs(web-modeler): rewrite model-your-first-process.md and use updated imgs

* docs(web-modeler): rewrite deploy-your-process-and-start-process-instance.md and use updated imgs

* docs(web-modeler): rewrite implement-service-task.md and use updated imgs

* docs(web-modeler): update implement-decision-gateway.md page and use updated imgs

* docs(web-modeler): add supported browsers and cleanup unused images

* docs(web-modeler): add news about web modeler and migration

* docs(web-modeler): document canvas tools, real time collaboration and attention grabber

* docs(redirects): support modeler rename

* docs(redirects): add redirect for cloud modeler overview

* docs(redirects): swap order

* docs(web-modeler): add bpmn guide to next steps

* docs(modeler): link to modeler about in bpmn-primer page

* style(formatting): technical review of documentation

* merge conflict with rename

* docs(web-modeler): resolve review comments

Co-authored-by: Amara <[email protected]>
Co-authored-by: Christina Ausley <[email protected]>

.gitignore

@@ -21,3 +21,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 node_modules
+/camunda-cloud-documentation.iml

docs/apis-clients/java-client-examples/process-deploy.md

@@ -29,7 +29,7 @@ final DeploymentEvent deploymentEvent =
 
 [Source on GitHub](https://github.com/camunda-cloud/zeebe/tree/develop/samples/src/main/resources/demoProcess.bpmn)
 
-Download the XML and save it in the Java classpath before running the example. Open the file with Camunda Modeler for a graphical representation.
+Download the XML and save it in the Java classpath before running the example. Open the file with Desktop Modeler for a graphical representation.
 
 <!--
 ```xml

docs/components/concepts/processes.md

@@ -26,7 +26,7 @@ Zeebe uses [BPMN 2.0](http://www.bpmn.org/) to represent processes. BPMN is an i
 
 Zeebe provides a free and open-source BPMN modeling tool to create BPMN diagrams and configure their technical properties. The modeler is a desktop application based on the [bpmn.io](https://bpmn.io) open-source project.
 
-Camunda Modeler can be [downloaded from GitHub](https://camunda.com/download/modeler/).
+Desktop Modeler can be [downloaded from GitHub](https://camunda.com/download/modeler/).
 
 ## Sequences
 

docs/components/modeler/about.md

@@ -11,20 +11,15 @@ In tandem, different events and implementation details (such as the conditions w
 
 Camunda offers a few tools to design your diagrams and implement them:
 
-- [Cloud Modeler](./cloud-modeler/launch-cloud-modeler.md)
-- [Camunda Modeler](./camunda-modeler/install-the-modeler.md)
+- [Web Modeler](./web-modeler/launch-cloud-modeler.md)
+- [Desktop Modeler](./desktop-modeler/install-the-modeler.md)
 
-:::note
-You can also utilize [Cawemo](https://cawemo.com/), which focuses on the design phase and provides options for collaborative work on a BPMN model.
-:::
+Web Modeler and Desktop Modeler differ mainly in their environment. Web Modeler is part of Cloud Console and offers a seamless integration into Camunda Cloud to model BPMN. Desktop Modeler is a desktop application that can be installed and used locally, all while integrating your local development environment.
 
-**Cloud Modeler** and **Camunda Modeler** support the technical implementation of the models. It's possible to design the model in Cawemo, and continue working with Cloud Modeler or Camunda Modeler.
-
-Cloud Modeler and Camunda Modeler differ mainly in their environment. Cloud Modeler is part of Cloud Console and offers a seamless integration into Camunda Cloud to model BPMN. Camunda Modeler is a desktop application that can be installed and used locally, all while integrating your local development environment.
-
-In this guide, we'll demonstrate modeling BPMN diagrams using both Cloud Modeler and Camunda Modeler.
+In this guide, we'll demonstrate modeling BPMN diagrams using both Web Modeler and Desktop Modeler.
 
 ## Next steps
 
+- [Modeling BPMN](./guides/automating-a-process-using-bpmn.md) - Learn how to quickly model an automated process using BPMN.
 - [Camunda Forms](./guides/utilizing-forms.md) - Allows you to easily design and configure forms. Once configured, they can be connected to a user task or start event to implement a task form in your application.
 - [DMN](./dmn/dmn.md) - In DMN, decisions can be modeled and executed using the same language. Business analysts can model the rules that lead to a decision in easy to read tables, and those tables can be executed directly by a decision engine (like Camunda).

docs/components/modeler/bpmn/bpmn-primer.md

@@ -114,12 +114,12 @@ The following is an introduction to BPMN 2.0, its elements, and their execution
 
 ## Modeling BPMN diagrams
 
-The best tool for modeling BPMN diagrams for Zeebe is **Camunda Modeler**.
+The best tool for modeling BPMN diagrams for Zeebe is [Modeler](../about.md).
 
 ![overview](./assets/modeler.gif)
 
 - [Download page](https://camunda.com/download/modeler/)
-- [Source code repository](https://github.com/camunda/camunda-modeler)
+- [Source code repository](https://github.com/camunda/desktop-modeler)
 
 ## BPMN elements
 

docs/components/modeler/camunda-modeler/connect-to-camunda-cloud.md → docs/components/modeler/desktop-modeler/connect-to-camunda-cloud.md

@@ -4,7 +4,7 @@ title: Connect to Camunda Cloud
 description: "Camunda Modeler can communicate directly with Camunda Cloud."
 ---
 
-Camunda Modeler can communicate directly with Camunda Cloud.
+Desktop Modeler can communicate directly with Camunda Cloud.
 
 Click the deployment icon:
 

docs/components/modeler/camunda-modeler/element-templates/element-templates.md → docs/components/modeler/desktop-modeler/element-templates/element-templates.md

@@ -1,18 +1,18 @@
 ---
-id: camunda-modeler-element-templates
+id: desktop-modeler-element-templates
 title: Element templates
 description: "Element templates are a way to extend Camunda Modeler with domain-specific diagram elements, such as service and user tasks."
 ---
 
 :::note
-Element templates can be used with Camunda Modeler version 1.0+; they are currently available in BPMN diagrams only.
+Element templates can be used with Desktop Modeler version 1.0+; they are currently available in BPMN diagrams only.
 :::
 
 # Overview
 
-Element templates are a way to extend [Camunda Modeler](https://camunda.org/bpmn/tool/) with domain-specific diagram elements, such as service and user tasks.
+Element templates are a way to extend [Desktop Modeler](https://camunda.org/bpmn/tool/) with domain-specific diagram elements, such as service and user tasks.
 
-![Custom fields in the Camunda Modeler](./img/overview.png)
+![Custom fields in the Desktop Modeler](./img/overview.png)
 
 If applicable, element templates can be assigned to a diagram element via the properties panel.
 Once applied, element templates configure the diagram element with pre-defined values for BPMN properties, input/output mappings, and extension properties.
@@ -23,4 +23,4 @@ As seen in the _Mail Task_ example above, Modeler allows properties of custom el
 
 Refer to the following resources to learn more about element templates:
 
-* [Element template documentation](https://github.com/camunda/camunda-modeler/tree/master/docs/element-templates)
+* [Element template documentation](https://github.com/camunda/desktop-modeler/tree/master/docs/element-templates)

docs/components/modeler/camunda-modeler/install-the-modeler.md → docs/components/modeler/desktop-modeler/install-the-modeler.md

@@ -4,6 +4,6 @@ title: Install the Modeler
 description: "Camunda Modeler is the desktop application for modeling processes with BPMN."
 ---
 
-[Camunda Modeler](https://github.com/camunda/camunda-modeler) is the desktop application for modeling processes with BPMN.
+[Desktop Modeler](https://github.com/camunda/desktop-modeler) is the desktop application for modeling processes with BPMN.
 
 The application can be run on Windows, MacOS, and Linux. The corresponding packages can be found on the [downloads page](https://camunda.com/download/modeler/).

docs/components/modeler/camunda-modeler/model-your-first-diagram.md → docs/components/modeler/desktop-modeler/model-your-first-diagram.md

@@ -3,7 +3,7 @@ id: model-your-first-diagram
 title: Model your first diagram
 ---
 
-After [downloading](./install-the-modeler.md) and starting Camunda Modeler, you can model your first BPMN diagram. Follow the steps below:
+After [downloading](./install-the-modeler.md) and starting Desktop Modeler, you can model your first BPMN diagram. Follow the steps below:
 
 1. Create a BPMN diagram:
 
@@ -13,7 +13,7 @@ After [downloading](./install-the-modeler.md) and starting Camunda Modeler, you
 
 ![new diagram](./img/new-diagram.png)
 
-As with [Cloud Modeler](../cloud-modeler/model-your-first-diagram.md), you can now add new elements.
+As with [Web Modeler](../web-modeler/model-your-first-diagram.md), you can now add new elements.
 
 3. On the left side of the screen you will find the element palette supported by the engine. Drag and drop the elements onto the diagram:
 

docs/components/modeler/dmn/dmn.md

@@ -1,6 +1,6 @@
 ---
-id: camunda-modeler-dmn
-title: Editing DMN in Camunda Modeler
+id: desktop-modeler-dmn
+title: Editing DMN in Desktop Modeler
 description: To start modeling, let's create a DMN diagram.
 ---
 
@@ -36,7 +36,7 @@ To save your diagram, click **File > Save File As...** in the top-level menu. Th
 
 ## DMN coverage
 
-Camunda Modeler covers the following elements:
+Desktop Modeler covers the following elements:
 
 - Decision (tables and literal expressions)
 - Input data

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

@@ -0,0 +1,116 @@
+---
+id: collaboration
+title: Collaboration
+description: Collaboration features and access rights for Web Modeler.
+---
+
+## Projects
+
+Files and folders are stored in projects.
+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 levels of access to a project in Web Modeler, outlined in this section.
+
+After creating a project, you can invite members of your Camunda Cloud organization to collaborate in Web Modeler.
+There are four roles with different levels of access rights that can be assigned to each user:
+
+* **Project Admin**: The user can edit the project itself, all folders and diagrams within the project, and invite more users to collaborate.
+* **Editor**: The user can edit all folders and diagrams within the project.
+* **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, view a list of your collaborators and invite more by taking the steps below:
+
+1. Click **Add User**.
+![invite user](img/collaboration/web-modeler-collaborator-invite-modal-opened.png)
+
+2. Choose a role for your new collaborator.
+![invite choose role](img/collaboration/web-modeler-collaborator-invite-choose-role.png)
+
+3. Begin typing the name of the individual and Web Modeler will suggest Camunda Cloud organization members that you can invite to the project.
+![invite suggestions](img/collaboration/web-modeler-collaborator-invite-suggestions.png)
+
+4. Write a message to your new collaborator about their invitation to the project.
+![invite type message](img/collaboration/web-modeler-collaborator-invite-type-message.png)
+
+5. Click **Send** and your new collaborator will receive an email with the invitation.
+![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.
+This link can also be protected with an additional password.
+
+1. Navigate to a diagram and click on the share icon button.
+![share button](img/collaboration/web-modeler-share-icon-button.png)
+
+2. Click **Create link**.
+![share create link](img/collaboration/web-modeler-share-modal.png)
+
+1. Click **Copy** to copy the link to your clipboard.
+![share copy link](img/collaboration/web-modeler-share-modal-create.png)
+
+1. Click **Add** and type a new password to protect your link.
+![share copy link](img/collaboration/web-modeler-share-modal-password-protect.png)
+
+5. Click **Email** to share the new link with multiple recipients.
+![share copy link](img/collaboration/web-modeler-share-modal-email.png)
+
+Similar to the sharing link, a diagram can be embedded into HTML pages via an iframe tag. The iframe tag can be copied from the sharing dialog via the **Embed** button.
+
+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, the discussion will be attached directly to the diagram.
+Switch between the **Properties Panel** and **Comments** using the two tabs present at the top of the right side panel.
+![comment](img/collaboration/web-modeler-comment-type-here.png)
+
+New comments can be added to the discussion by any collaborator with Admin, Editor, or Commenter access rights.
+
+Afterwards, the comment can be edited or deleted via the context menu icon.
+![comment context menu](img/collaboration/web-modeler-comment-with-context-menu.png)
+
+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)
+
+### 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)
+
+## 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. To do this, take the following steps:
+
+1. Switch on the attention grabber pointer from the canvas tools.
+![attention grabber](img/attention-grabber.png)
+
+2. 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/import-diagram.md

@@ -0,0 +1,27 @@
+---
+id: import-diagram
+title: Import diagram
+description: "You can import a BPMN diagram at any time with Web Modeler."
+---
+
+You can import a BPMN diagram at any time with Web Modeler, and there are several ways to accomplish this:
+
+- In a project, click **New > Upload files** and select the files from your computer.
+![import diagram](img/import-diagram/web-modeler-upload-file-menu-item.png)
+![import diagram](img/import-diagram/web-modeler-upload-file-choose.png)
+![import diagram](img/import-diagram/web-modeler-upload-file-completed.png)
+
+- In a project, drag one file from your computer and drop it.
+![import diagram](img/import-diagram/web-modeler-project-drag-and-drop.png)
+
+- In a diagram, open the breadcrumb menu and choose **Replace via upload**. Then, select a file from your computer.
+
+![import diagram](img/import-diagram/web-modeler-replace-via-upload-menu-item.png)
+![import diagram](img/import-diagram/web-modeler-replace-via-upload-choose.png)
+
+- In a diagram, drag one file from your computer and drop it onto the canvas.
+![import diagram](img/import-diagram/web-modeler-diagram-replace-via-drag-and-drop.png)
+
+:::note
+Within the last two options above, note that the content of the diagram will be replaced with the content of the file.
+:::