Documenting software with ChatGPT and MermaidJS

Diagrams are an essential part of software development, they help developers and stakeholders to visualize and understand complex systems. However, creating diagrams can be time-consuming and tedious. In this post, we will explore how to automate the process of creating diagrams using ChatGPT-3 and MermaidJS.

ChatGPT-3 is a powerful language model developed by OpenAI, it can generate human-like text. We can use ChatGPT-3 to generate the code for the diagrams, reducing the time and effort required to create them. MermaidJS is a JavaScript library that allows us to render diagrams from code written in a simple, markdown-like syntax. Together, ChatGPT-3 and MermaidJS make it easy to create diagrams quickly and efficiently.

We will show how to use ChatGPT-3 to generate code for different types of diagrams, including class diagrams, state diagrams, and flowcharts. We will also discuss the benefits of using this approach and any limitations or challenges that may arise. By the end of this post, you will have a better understanding of how to use ChatGPT-3 and MermaidJS to create diagrams for software development.

We will be covering the following topics:

• Setting up and using ChatGPT-3 and MermaidJS
• Generating code for class diagrams
• Generating code for state diagrams
• Generating code for flowcharts
• Benefits and Limitations of this approach

By the end of this post, you will be able to understand how to use ChatGPT-3 and MermaidJS to create diagrams for software development and how to automate the process of creating diagrams.

Getting Started

Before we dive into using ChatGPT-3 and MermaidJS to create diagrams, let’s first go over the prerequisites and necessary installation steps.

Prerequisites

• An API key for OpenAI’s GPT-3 API
• A local development environment with Node.js and npm (or yarn) installed

Installation

First, you’ll need to sign up for an API key on the OpenAI website to access the GPT-3 API. Once you have your API key, you can use it to access the API and generate code for your diagrams.

Next, you’ll need to install MermaidJS in your local development environment. To do this, you can use npm (or yarn) to install the library:

npm install mermaid

Alternatively, you can also include it using a script tag in your HTML file

<script src="https://unpkg.com/mermaid@8.4.8/dist/mermaid.min.js"></script>

That’s all you need to get started with using ChatGPT-3 and MermaidJS to create diagrams. Next, we’ll take a closer look at how to use them to create class diagrams.

You can also include some code snippets or screenshots that show how to access the GPT-3 API, and how to include the MermaidJS library in your project.

Please note that in order to use OpenAI’s GPT-3 API, you need an API key, which can be obtained by creating an account on their website.

Class Diagrams

Class diagrams are a type of diagram that shows the classes, interfaces, and objects in a system, and their relationships to one another. They are commonly used in object-oriented programming to design and document software systems.

To generate code for a class diagram using ChatGPT-3, you can provide it with a description of the classes, interfaces, and objects in your system, as well as their relationships to one another. The model will then generate the code for the diagram in a format that can be rendered using MermaidJS.

Here’s an example of how you can use ChatGPT-3 to generate code for a class diagram:

import openai_secret_manager

# Let's setup the OpenAI API key
assert "openai" in openai_secret_manager.get_services()
secrets = openai_secret_manager.get_secrets("openai")

print(secrets)

import openai
openai.api_key = secrets["api_key"]

# Define the prompt for the model
prompt = (
    "generate class diagram for a online shopping platform"
)

# Generate code for the class diagram
response = openai.Completion.create(
    engine="text-davinci-002",
    prompt=prompt,
    max_tokens=2048,
    n = 1,
    stop=None,
    temperature=0.5
)

# Print the generated code
print(response["choices"][0]["text"])

Once you have the code for the class diagram, you can render it using MermaidJS. Here’s an example of how you can do this:

<div class="mermaid">
classDiagram
class ShoppingCart {
  +addItem(item: Item)
  +removeItem(item: Item)
  +getTotal() : int
}
class Item {
  -name : String
  -price : int
}
class User {
  +addToCart(cart: ShoppingCart)
  +removeFromCart(cart: ShoppingCart)
  +viewCart() : ShoppingCart
}
ShoppingCart --> Item
User --> ShoppingCart
</div>

You can see that the class diagram is rendered using MermaidJS.

Class diagram

State Diagrams

State diagrams are a type of diagram that show the states, transitions, and events in a system, and how they relate to one another. They are commonly used to design and document state machines, such as the states and transitions of a user interface or a network protocol.

To generate code for a state diagram using ChatGPT-3, you can provide it with a description of the states, transitions, and events in your system, as well as their relationships to one another. The model will then generate the code for the diagram in a format that can be rendered using MermaidJS.

Here’s an example of how you can use ChatGPT-3 to generate code for a state diagram:

import openai_secret_manager

# Let's setup the OpenAI API key
assert "openai" in openai_secret_manager.get_services()
secrets = openai_secret_manager.get_secrets("openai")

print(secrets)

import openai
openai.api_key = secrets["api_key"]

# Define the prompt for the model
prompt = (
    "generate state diagram for a payment gateway"
)

# Generate code for the state diagram
response = openai.Completion.create(
    engine="text-davinci-002",
    prompt=prompt,
    max_tokens=2048,
    n = 1,
    stop=None,
    temperature=0.5
)

# Print the generated code
print(response["choices"][

Once you have the code for the state diagram, you can render it using MermaidJS. Here’s an example of how you can do this:

<div class="mermaid">
stateDiagram
    [*] --> NotInitialized
    NotInitialized --> AuthorizationPending : start
    AuthorizationPending --> Initialized : authorize
    Initialized --> PaymentPending : payment
    PaymentPending --> PaymentSuccessful : confirm
    PaymentPending --> PaymentFailed : decline
    PaymentFailed --> PaymentPending : retry
</div>

You can see that the state diagram is rendered using MermaidJS.

State Diagrams

Flowcharts

Flowcharts are a type of diagram that show the flow of control in a system, and how different elements of the system interact with one another. They are commonly used to design and document algorithms, workflows, and business processes.

To generate code for a flowchart using ChatGPT-3, you can provide it with a description of the flow of control in your system, as well as the different elements and their interactions. The model will then generate the code for the diagram in a format that can be rendered using MermaidJS.

Here’s an example of how you can use ChatGPT-3 to generate code for a flowchart:

import openai_secret_manager

# Let's setup the OpenAI API key
assert "openai" in openai_secret_manager.get_services()
secrets = openai_secret_manager.get_secrets("openai")

print(secrets)

import openai
openai.api_key = secrets["api_key"]

# Define the prompt for the model
prompt = (
    "generate flowchart for an image classification pipeline"
)

# Generate code for the flowchart
response = openai.Completion.create(
    engine="text-davinci-002",
    prompt=prompt,
    max_tokens=2048,
    n = 1,
    stop=None,
    temperature=0.5
)

# Print the generated code
print(response["choices"][0]["text"])

Once you have the code for the flowchart, you can render it using MermaidJS. Here’s an example of how you can do this:

<div class="mermaid">
graph LR
A[Load image] --> B[Preprocess]
B --> C[Split dataset]
C --> D[Train model]
D --> E[Evaluate model]
E --> F[Deploy model]
</div>

You can see that the flowchart is rendered using MermaidJS.

Flowchart

Benefits and Limitations

Using ChatGPT-3 and MermaidJS to create diagrams has several benefits:

• Automation: By using ChatGPT-3 to generate the code for the diagrams, you can automate the process of creating diagrams and reduce the time and effort required to create them.
• Efficiency: ChatGPT-3 can generate code for diagrams quickly and efficiently, allowing you to create diagrams faster and with less effort.
• Flexibility: By providing ChatGPT-3 with different prompts and contexts, you can generate code for different types of diagrams, such as class diagrams, state diagrams, and flowcharts.

However, there are also some limitations to using this approach:

• Accuracy: The accuracy of the generated code depends on the quality of the input provided to ChatGPT-3 and the context of the prompt. The model is not always going to produce perfect output.
• Cost: Using the OpenAI’s GPT-3 API may be costly, especially for large-scale projects.
• Learning Curve: There may be a learning curve to using ChatGPT-3 and MermaidJS, especially if you are not familiar with the concepts of machine learning and language models.

Overall, using ChatGPT-3 and MermaidJS to create diagrams has the potential to significantly speed up and simplify the process of creating diagrams. However, it’s important to understand the limitations of this approach and to approach it with realistic expectations.

You can also test your diagrams by using the following template:

<!DOCTYPE html>
<html>
  <head>
    <title>Diagram Example</title>
    <script src="https://unpkg.com/mermaid@8.4.8/dist/mermaid.min.js"></script>
  </head>
  <body>
    <div class="mermaid">
    </div>
    <script>
      mermaid.initialize({
        startOnLoad: true
      });
    </script>
  </body>
</html>

Conclusion

In this post, we’ve discussed how to use ChatGPT-3 and MermaidJS to create diagrams for software development. We’ve demonstrated how to use ChatGPT-3 to generate code for different types of diagrams, such as class diagrams, state diagrams, and flowcharts, and how to render the diagrams using MermaidJS.

We’ve also discussed the benefits of using this approach, such as automation and efficiency, as well as the limitations, such as accuracy and cost.

By the end of this post, you should have a better understanding of how to use ChatGPT-3 and MermaidJS to create diagrams for software development. We hope that this post has inspired you to try using ChatGPT-3 and MermaidJS for your own projects and that it helps you to create diagrams quickly and efficiently.

Please keep in mind that this approach should be used with realistic expectations and that the actual output may vary based on the prompt and context you provide to the GPT-3 model. Also, using OpenAI’s GPT-3 API may be costly, especially for large-scale projects.

We hope you found this post informative and useful.