Build an AI BPMN Diagram Analyzer using ToolJet 🛠️

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:

Prerequisites

Gemini API Key : The Gemini API is an advanced AI service provided by Google AI Studio. 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 for a free ToolJet cloud account or run ToolJet on your local machine 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.

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.

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.

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:

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:

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

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

{
  "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.

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:

{{components.generatedOutput.text}}

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.

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:

{{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!"

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 or connect with us and post your queries on Slack.