ChatGPT and Mermaid.JS – A Diagramming Duo

19 / 06 / 2023

Read Time 10 minutes

In today’s fast-paced world, communication has taken on new dimensions, and technology has provided us with tools that help us articulate more efficiently. The integration of ChatGPT with Mermaid.JS has made it possible to combine the power of natural language understanding with the ability to convert to diagrams.

In this blog post, we’ll explore the value of this integration, what Mermaid.JS is, and some examples of diagrams. We’ll even run through a few examples, so continue below as we do a deep dive into what makes ChatGPT and Mermaid.JS the diagramming duo we’ve been waiting for.

What is Mermaid.JS?

Mermaid.JS is an open-source JavaScript library that enables users to create, edit, and render diagrams by using simple text-based syntax. It can create the following diagrams, however not limited to:

  1. Flowcharts: Visual representations of processes or workflows. 
  2. Sequence diagrams: Depictions of interactions between objects or components in a system, illustrating the sequence of messages exchanged over time. 
  3. Class diagrams: Showcases the structure of a system by depicting classes, their attributes, methods, and relationships, among objects. 
  4. State diagrams: This represents the different states of an object or system and the transitions between them. 
  5. Entity-relationship diagrams (ERD): Displays the relationships between entities in a database, including tables, columns, and their connections. 
  6. Gantt charts: Visual representations of project schedules, illustrating tasks, durations, and dependencies over time. 
  7. Pie charts: Circular charts are divided into segments to display numerical proportions or percentages. 

For additional information about capabilities, visit their site 

Why use ChatGPT and Mermaid.JS? 

The integration between ChatGPT and Mermaid.JS is valuable because it allows you to create diagrams that can help explain complex ideas and flows more easily. Diagrams can help students understand a difficult concept, or professionals explain a process to a client. With ChatGPT and Mermaid.JS, you can create diagrams in a matter of seconds, which can save you a lot of time and effort. 

Steps

  1. To request ChatGPT to output the relevant Mermaid.JS syntax, simply input which diagram you want and provide your own scenario. e.g “Create syntax for a Mermaid.JS sequence diagram” for the following scenario (Enter scenario). 

1

2. ChatGPT will then output the relevant syntax. 

2 e1680089922988

3. Copy the syntax over to Mermaid.JS live editor, and voila.  

3

Flowchart

Managing warehouse inventory 

  1. Monitor inventory levels: Continuously track the inventory levels using a warehouse management system (WMS) or inventory management software. 
  2. Set reordering points: Determine the minimum stock levels at which inventory needs to be replenished, based on historical demand and lead times. 
  3. If inventory levels are below the reordering point, proceed to step 4. If not, return to step 1. 
  4. Evaluate supplier options: Compare suppliers based on factors like pricing, lead times, quality, and reliability. 
  5. Make a purchase decision: Choose the best supplier based on the evaluation and place an order for replenishment. 
  6. Communicate with the supplier: Share the purchase order details with the chosen supplier and confirm lead times and delivery schedules. 
  7. Track the order: Monitor the progress of the order and communicate any changes or delays to relevant stakeholders. 
  8. Prepare the warehouse: Ensure that there is sufficient space and resources for the incoming shipment, including proper storage and handling equipment. 
  9. Receive the shipment: Inspect the delivered goods for accuracy and quality, verifying the shipment against the purchase order. 
  10. Update inventory records: Record the new inventory in the warehouse management system or inventory management software. 
  11. Store the inventory: Organise and store the replenished goods in the appropriate locations within the warehouse. 
  12. Perform cycle counting: Periodically count inventory to ensure accuracy and identify discrepancies between physical stock and inventory records. 
  13. Analyse inventory data: Review inventory turnover, stock levels, and other relevant data to improve replenishment decisions and optimise stock levels. 
  14. Return to step 1 and repeat the process to ensure ongoing inventory replenishment and warehouse optimisation. 

Output

pako:eNplkk1P4zAQQP K5XOo0rQlH4ddlbZAoVkhCoddh4PXmRKLxI5spyVb9b vxBWw0t4mfm88nskcqdAl0Iy Gt5WZPNYqDnLtZJOGyLVHhQGPalhD7V9IRcX38gV24IjBrQpwUj1SlotlbMvhbryfHFcf b9hlof nO nwq1QJf8BOtTlmy153XHHRDbtW0twRDdOqnVcK1Xf2hvzgu19MGK5fwNCCdtZ0TFLZAShLSYghkrr1yzhW6aTkkxXHyQriKu qqA3rX3btiT4eLNQ 9QJDee3LIHAy034NkBg0p3FpDfer5mjyBA7s cVrJtsHHEa4 v2HNbDrW BmlAYImhqzuv3LMtnp zPy2k955u2AOYnTYNEb2ogQjdKYdjRGHjhZzNFa97 28JrMhRyD mRQPagGm4LPE3HwtFSEGxXAMFzTAsYce72hW0UCdUeef0tleCZs50ENDOd7CUHBekodmO1xZPW65 ad18SPhJsyN9p9n0chQncZrEyThK0ssoDWhPs2iajqJ4kkZpFIdpGKWTU0D AvCURpOZrNZOI2nySwej8cBhXJYv y8mH4 T38By8TgYw?type=png

Sequence Diagrams

Replenishing coffee beans for a coffee shop  

Billy is an owner of a coffee shop (Billy’s Cofveve). The shop uses a POS system to capture relevant sale transactions, inventory management, and reporting. The Cashier uses the POS daily for sale transactions, and weekly for inventory management. Billy uses the POS system for its reporting capabilities but only does so on the last Saturday of each month. Billy buys fresh beans from their supplier (Beans R Us) every week and he personally does a quality check on delivery.  

In the scenario where the quality is not of a high standard, the delivery will be rejected and Beans R Us will deliver a new batch the following day, which will go to a quality check again. Adding another layer to ensure Customers receive fresh coffee, the Barista roasts the beans every Monday, Wednesday, and Friday. 

Output 

pako:eNqFU8GOmzAQ ZWRzzQKgQDhsIfdbaVKXW2bqFqp4jKLJ8FdsKkx2dIo 94BQg5Jqt5mxs9vnp9nDiI3kkQqGvrVks7pUeHOYpVpgBqtU7mqUTu4V2XZXRYfsCkU2cvy1 fN1XVC3ay N1d1tKpxmOn oDSmho97sh1IHJrB1OLD3R2zprDBksBZJsPcKaMHQtLyiuCd6O0mw2e9J 0MQyrUuKOKs2uSL9g4buZay0rAbIEwL6Ay2hUj6 DHxLmm2vCb9O7 aqZ7kyEpPFtJFl77 AQ5HfWoHp3CI5VqfwGaeEbEtxZL5TrIC8rfxvYAWJ6MB21c 4hC7Qpgu7VEK0fMLUVr km5Azl27c7Af rS9A6v6PLiivOmuh4xuHRp1pNhZZ0HLyQ1NUPIWuGTVed5OA1Mzz1GLNf0n3X2ZqAUnqjIVqgkj ahL2fCFfzZmUg5lLTFtnSZyPSRodg6s l0LlJnW JEW0t00yaIdItlw1Ue2B GVBOIU5EexG R kk0i5fLwI

Class Diagrams

Online Marketplace for Buying and Selling Products  

Your company is building an online marketplace for buying and selling products. The platform will allow buyers to browse products, add items to their cart, and make payments. Sellers can create product listings, manage their inventory, and receive payments for their sales. The platform will also have an administrator role to manage users and resolve disputes. 

  • Users should be able to register and create accounts on the platform.  
  • Buyers should be able to search and browse products, add items to their cart, and make payments.  
  • Sellers should be able to create product listings, manage their inventory, and receive payments for their sales.  
  • The platform should be able to process payments securely and handle refunds and disputes.  
  • An administrator should be able to manage users, resolve disputes, and perform other administrative tasks. 
  • User: Represents a registered user on the platform. This class will have attributes like name, email, password, and a unique identifier. It will also have methods like register, login, and updateProfile. 
  • Buyer: Represents a user who is browsing and purchasing products. This class will inherit from the User class and will have additional attributes like cart, payment method, and purchase history. It will also have methods like searchProducts, addtoCart, checkout, and viewOrderHistory. 
  • Seller: Represents a user who is selling products on the platform. This class will also be inherited from the User class and will have additional attributes like inventory, product listings, and payment details. It will also have methods like createProductListing, updateInventory, and viewSalesHistory. 
  • Product: Represents a product being sold on the platform. This class will have attributes like name, description, price, category, and a unique identifier. It will also have methods like viewDetails and updateDetails. 
  • Payment: Represents a payment made on the platform. This class will have attributes like amount, payment method, and transaction ID. It will also have methods like processPayment and handleRefund. 
  • Administrator: Represents an administrator of the platform. This class will have attributes like name, email, password, and a unique identifier. It will also have methods like manageUsers, resolveDisputes, and performOtherTasks. 

Output 

mermaid diagram 2023 03 29 145023

State Diagram 

ATM Transaction Processing System 

Your company is building an ATM transaction processing system. The system should allow users to perform various transactions such as cash withdrawal, balance inquiry, and funds transfer. The ATM machine can be in different states, such as idle, processing, error, and shutdown. The system should respond to user inputs and events and transition between different states based on those events. 

  • The ATM machine should be able to accept user cards and authenticate them. 
  • The ATM machine should be able to display different screens and menus to the user based on their transaction choice. 
  • The ATM machine should be able to dispense cash and update the user’s account balance. 
  • The system should be able to handle errors such as incorrect PIN, insufficient funds, or technical errors. 
  • The ATM machine should be able to shut down gracefully and securely. 

States 

  • Idle: The initial state of the ATM machine when it is ready to accept user inputs. 
  • Processing: The state when the ATM machine is processing a user’s transaction request. 
  • Error: The state when the ATM machine encounters an error while processing a user’s transaction request. 
  • Shutdown: The state when the ATM machine is shutting down. 

Events 

  • Card Inserted: The event that occurs when the user inserts their ATM card into the machine. 
  • PIN Entered: The event that occurs when the user enters their PIN code. 
  • Transaction Selected: The event that occurs when the user selects a transaction from the menu. 
  • Amount Entered: The event that occurs when the user enters the amount of cash they want to withdraw or transfer. 
  • Dispense Cash: The event that occurs when the ATM machine dispenses cash to the user. 
  • Error Occurred: The event that occurs when an error is encountered while processing the transaction. 
  • Cancel Transaction: The event that occurs when the user cancels the transaction and ejects their card. 

 Output 

mermaid diagram 2023 03 29 144344

Pie Chart 

Smartphone usage  

In a recent study on smartphone usage, 60% of users were found to be addicted to their devices, while 30% used them moderately, and the remaining 10% barely interacted with them, thus highlighting the varying degrees of dependency within the population. 

Output

pako:eNpFkEFrwzAMhf KEQwyyIId10nsW6HXnsouwxcTq60hdoLrwLKQ z6vJUwnSd jSbwV tEiKJgc6kByJZcGJBdvYpruY0Dy TA3JCecMFgM fKSaTha6 qElhQNfXvXQBRp6A7P2TWahKTgO T 0AXnzUAKtjOWGZTgMXrjbH5n dNqSHf0qEHl1uLVzEPSoMOWpWZO42UJPagUZyxhnmw d3LmFo0HdTXDI28nE77G0e iPIJa4RvUR83aruKs45QxKQ700JawgOpkVXMupGStFG3X8q2En6cDr1rRHUTdUCka2dVUlIDWpTGeXwk g9x AZQ7YoU?type=png

Conclusion

Throughout the experimentation, it was observed that ChatGPT generates fairly accurate outputs that align well with the scenarios. This again just demonstrates the AI’s impressive capabilities in understanding natural language and translating it into Mermaid.js syntax.  

However, as with any AI system, it’s important to keep in mind that there may be instances where manual intervention is required to fine-tune the results.  

In these cases, users should not hesitate to step in and adjust the output as needed, ensuring the final visual representation accurately reflects their goals and requirements. 

View
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website.

These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.

Necessary

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-Necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.