Build an AI BPMN Diagram Analyzer using ToolJet 🛠️
Tags: javascript, webdev, programming, coding
Published: 2024-06-27 13:12:06

In this tutorial, we'll create a BPMN Diagram Analyzer application using ToolJet. This app allows users to generate detailed explanations of BPMN processes by uploading them in image format. We'll use **ToolJet's** **low-code app-builder** for the user interface and its **query builder** to connect to the Gemini API to generate an in depth analysis of uploaded BPMN processes.

Here's a quick preview of our application:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20b0iaftmp1hpm9bbae0.gif)

## Prerequisites

**Gemini API Key** : The Gemini API is an advanced AI service provided by [Google AI Studio](https://aistudio.google.com/app/apikey). It enables developers to integrate powerful content generation capabilities into their applications.

**ToolJet**(https://github.com/ToolJet/ToolJet) : An open-source, low-code business application builder. [Sign up](https://www.tooljet.com/signup) for a free ToolJet cloud account or [run ToolJet on your local machine](https://docs.tooljet.com/docs/setup/try-tooljet/) using Docker.


To begin, create a new application named _BPMN Diagram Analyzer_.

---
## Step 1: Adding UI Elements 🖼️
The first step in the app-building process is to utilize ToolJet's customizable pre-built components to build a UI in minutes. We will start with the header.

### App Header

1. For the logo, add an **Icon** component at the top of the canvas and name it `logo`.
2. Choose an appropriate icon (e.g., `IconAnalyzeFilled`) and set its color to `#3e63ddff`.
3. Add a **Text** component next to the Icon component.
4. Set its Data property to "BPMN Diagram Analyzer".
5. Style it with `#3e63ddff` as the color, `24px` as the font size, and font weight as bold.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1r4qz4lxsqiu65o61fae.png)

_We are using blue (hex code: #3e63ddff) as the primary color, style the upcoming components accordingly._

### Input Section

1. Add a **Container** on the left to hold the input elements, and name it `inputContainer`.
2. Inside this container, add a **Text** component as the header, and name it `inputLabel`.
3. Set the Text component's Data property to "Input".
4. Below it, place an **Image** component to display the uploaded BPMN diagram. Name it `imagePreview`.
5. Add a **File Picker** component and name it `fileUploader`.
6. Add a **Button** component labeled "Generate". Name it `generateButton`.
7. Add another **Button** labeled "Copy Output", and name it `copyButton`.
8. Position the buttons appropriately next to the File Picker.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jskct4n24vbg07jmv2oz.png)

### Output Section

1. Add another **Container** for the output section, and name it `outputContainer`.
2. Add a **Text** component inside this container as the header, and name it `outputLabel`.
3. Set the Text component's Data property to "Output".
4. Add another **Text** component for the generated explanation. Name it `generatedOutput`.
5. Set the data format to HTML since the generated explanation will be formatted in HTML format.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjvytfj5sfdzsp8g7cdx.png)

---

## Step 2: Configuring Queries 🔗
With the UI ready, we can now connect to Gemini API and format the image preview using queries.

### Generate Image Preview Query

1. Create a new **Run JavaScript code** query named `generateImagePreview`.
2. Add the code below in the query:

```json
return `data:image;base64,${components.fileUploader.file[0].base64Data}`
```
The above query will restructure the image data and return it. The returned value will be used as a URL to display the image as a preview in the Image component.

### Analyze Diagram Query

1. Create a new **REST API** query named `analyseDiagram`.
2. Set the method to POST and enter the below URL under the URL property:

```json
https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent
```

3. Under **Headers**, add a new header and set the key to `Content-Type` and value to `application/json`.
4. Create a new workspace constant named `GEMINI_API_KEY` and add your Gemini API Key to it.
5. Under **Parameters**, add a new row with the key as `key` and value as `{{constants.GEMINI_API_KEY}}`.
6. Configure the Body property of the query using the code below:

```json
{
  "contents": [
    {
      "parts": [
        {
          "text": "Explain in depth the content and overall of the uploaded BPMN (Business Process Model and Notation) diagram in HTML formatting only. Respond with only the explanation, and nothing else. Return the following information, with clear bullet points and headers (under 18 px) for each section: 1. **Title**: The title or main heading of the BPMN diagram. 2. **Description**: A brief description or summary of the BPMN diagram. 3. **Elements**: Explain all the processes identified in the diagram in the correct flow. If there are multiple sequences, explain them individually. 4. **Flows**: Describe the sequence flows, message flows, and associations between elements. 5. **Data Objects**: Identify and describe any data objects present in the diagram. 6. **Swimlanes**: If present, list the swimlanes (e.g., pools, lanes) and their roles or participants. Ensure the returned HTML is well-structured, with appropriate tags for headers, lists, and any other necessary elements for readability and organization."
        },
        {
          "inline_data": {
            "mime_type":"image/jpeg",
            "data": "{{components.fileUploader.file[0].base64Data}}"
          }
        }
      ]
    }
  ]
}
```

This JSON request sends an uploaded BPMN diagram image for analysis, asking for a detailed HTML explanation of its contents, including the title, description, elements, flows, data objects, and swimlanes.

---

## Step 3: Using Events For Dynamic Interaction 🔘

Events in ToolJet allow you to easily create dynamic app interactions based on triggers such as button clicks or query completion.

### Generate Button Click

1. Add a new event to the **Generate** button.
2. Leave the Event as **On click**, select **Run Query** as the Action and Query as `analyseDiagram`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/juagcv10qmhon1i8i8ac.png)

Now every time the Generate button is clicked, the `analyseDiagram` query will run and the output will be generated.

### Copy Button Click

1. Add an **On click** event on the **Copy Output** button to copy the generated output to the clipboard.
2. Set the action as **Copy to Clipboard** and under the Text property, enter the code below:

```js
{{components.generatedOutput.text}}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqovfgxi4tt882feg4oo.png)


The above setting will copy the output text from the related component every time we click on the Copy Output button.

### File Picker Load:

1. Add an **On File Loaded** event on the File Picker component to run the generateImagePreview query.
2. This configuration will ensure that the `generateImagePreview` query runs each time a file gets uploaded to the File Picker component.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84funu16nihb1wkh9xww.png)

This configuration will ensure that the generateImagePreview query runs each time a file gets uploaded to the File Picker component.

### Image Preview

1. Under the URL property of the **Image** component, enter the code below:

```js
{{queries.generateImagePreview.data}}
```

Now the Image component will display the BPMN diagram image once it is uploaded using the File Picker.

---

## Step 4: Testing ✅

Time to test all the functionalities.

- Use the **File Picker** to upload an image - a preview should be visible on the Image component.
- Click on the **Generate Button** - the Text component in output should display the explanation of the BPMN diagram in-depth through HTML formatting.
- Click on the **Copy Output Button** - the generated explanation should get copied and you should get a notification saying "Copied to clipboard!"


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/092pwp4qug1auw560d1q.png)

---

## Conclusion
By following this tutorial, you have successfully created a BPMN Diagram Analyzer using ToolJet. This app allows users to upload BPMN diagrams in image format and receive detailed explanations, enhancing their workflow analysis capabilities. Feel free to expand and customize the app further based on your specific requirements. Happy building!

To learn and explore more about ToolJet, check out the [ToolJet docs](https://docs.tooljet.com/docs/tooljet-concepts/what-are-components) or connect with us and post your queries on [Slack](https://tooljet.slack.com/).