Generating Mermaid Syntax Diagrams with AI-powered Amazon Bedrock 🧜🏼♀️
Dynamically generate Mermaid Syntax Diagrams with AI-Powered Amazon Bedrock for varying scenarios to support cross-functional agile engineering teams.
Preface
✔️ We utilise Amazon Bedrock to generate different types of diagrams. 🔩
✔️ We look at differing use cases for cross-functional engineering teams. 🧑🏽💻
Introduction
In today’s fast-paced development environment, efficient communication and collaboration are key to successful projects. In this article, we’ll explore how the power of generative AI, particularly with Amazon Bedrock, can revolutionise the way cross-functional engineering teams work together.
From deciphering existing code to transforming Solution Architects notes into actionable sequence flows, and even facilitating agile project management, AI-driven Mermaid syntax diagrams have the potential to redefine how teams visualise and execute their work.
For more information on Amazon Bedrock please look at my previous article here:
What are Mermaid Diagrams? 🧜🏼♀️
Before we start looking at examples, lets first quickly cover what Mermaid diagrams are.
It is described on their own website as:
“JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.”
There are many different styles of diagram we can produce through simple code based syntax, and in this article we will cover how we can produce the code dynamically through Generative AI and Amazon Bedrock with text based prompts.
We can access the Mermaid website using the following page to learn more: https://mermaid.js.org/
Exploring our use cases 🧜🏼♀️
Let’s have a look at the differing use cases of generating Mermaid diagrams for different team members in a cross-functional engineering team.
👇 Before we go any further — please connect with me on LinkedIn for future blog posts and Serverless news https://www.linkedin.com/in/lee-james-gilmore/
Understanding and documenting existing code 🧑🏽💻
Our first basic example is an engineering manager needing to understand and document the existing code logic in the form of a state diagram, supporting the QA team in testing the functionality, and engineers and business analysts seeing at a glance what the existing logic is.
Let’s take the existing basic code for a .NET C# API Controller as shown below:
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
namespace YourNamespace.Controllers
{
[Route("api/orders")]
[ApiController]
public class OrderController : ControllerBase
{
[HttpPost]
public IActionResult CreateOrder([FromBody] OrderDto order)
{
if (order.OrderLines.Sum(ol => ol.Quantity) <= 0 || order.OrderLines.Sum(ol => ol.Quantity) > 1000)
{
return BadRequest("Total order quantity must be between 1 and 1000.");
}
if (order.OrderAddress.Country != "UK")
{
return BadRequest("Order address must be in the UK.");
}
if (order.Customer.Status == "Hold")
{
return BadRequest("Customer is on 'Hold' status and cannot place orders.");
}
foreach (var orderLine in order.OrderLines)
{
if (orderLine.Quantity <= 0 || orderLine.Quantity > 10)
{
return BadRequest("Order line quantity must be between 1 and 10.");
}
if (!orderLine.ProductId.StartsWith("PROD-"))
{
return BadRequest("Product ID must start with 'PROD-'.");
}
if (string.IsNullOrEmpty(orderLine.Description) || orderLine.Description.Length <= 50)
{
return BadRequest("Description must have a length greater than 50.");
}
}
return Ok("Order created successfully.");
}
}
public class OrderDto
{
public List<OrderLineDto> OrderLines { get; set; }
public AddressDto OrderAddress { get; set; }
public CustomerDto Customer { get; set; }
}
public class OrderLineDto
{
public int Quantity { get; set; }
public string ProductId { get; set; }
public string Description { get; set; }
}
public class AddressDto
{
public string Country { get; set; }
}
public class CustomerDto
{
public string Status { get; set; }
}
}We can use a prompt like the following:
“Human: What would be the summary of this code please in the form of a mermaid state diagram? <Code Here>”
Which dynamically generates the following Mermaid Syntax for a state diagram using generative AI through Amazon Bedrock:
stateDiagram-v2
[*]-->ValidateOrderQuantity
ValidateOrderQuantity-->ValidQuantity: Total quantity <= 1000
ValidateOrderQuantity-->InvalidQuantity: Total quantity > 1000
ValidQuantity-->ValidateAddress: Order address
ValidateAddress-->UKAddress: Address country = UK
ValidateAddress-->NonUKAddress: Address country != UK
UKAddress-->ValidateCustomerStatus: Customer status
NonUKAddress-->BadRequest: Return 400
ValidateCustomerStatus-->ValidStatus: Status != Hold
ValidateCustomerStatus-->InvalidStatus: Status = Hold
ValidStatus-->ValidateOrderLines: Each order line
InvalidStatus-->BadRequest: Return 400
ValidateOrderLines-->ValidLine: Quantity, ID and Description valid
ValidateOrderLines-->InvalidLine: Quantity, ID or Description invalid
ValidLine-->CreateOrder: Return 200 OK
InvalidLine-->BadRequest: Return 400
CreateOrder-->[*]: Order created
BadRequest-->[*]: Bad request errorIf we use the Mermaid playground to view this diagram we can see that it accurately documents the business logic from the code:
OK, so this is a very basic code example, but we can see the value of the team now understanding the business logic of the existing code based on a state diagram at a glance (without actually needing to understand the actual code itself).
Gant charts for Project Leads 🧑🏽💻
Now let’s take an example where a Project Lead is trying to visually demonstrate the work done across three teams and their dependencies through the use of an AI generated gant chart. We can give the following example prompt:
Human: Please create me a mermaid syntax gant chart which shows the following:
The Order Domain team are working on Feature X between the 1st October 2023 and 28th November 2023. They are then starting Feature Y between 31st November 2023 and 10th February 2024.
The Customer Domain team are working on Feature Z between 1st September 2023 and 1st October 2023.
The Platform team are working on Feature A between 1st November 2023 and 1st December 2023.
The date format should be month/year
This generates the following Mermaid syntax diagram code:
gantt
title Project Timeline
dateFormat MM/YYYY
axisFormat %m/%Y
section Order Domain
Feature X :10/2023, 11/2023
Feature Y :11/2023, 02/2024
section Customer Domain
Feature Z :09/2023, 10/2023
section Platform
Feature A :11/2023, 12/2023Which when viewed in the Mermaid Playground gives us the following:
This shows how generative AI through Amazon Bedrock can dynamically support Project Leads when trying to visualise the dependencies between teams in getting a project through to production.
Supporting Solution Architects generate User Flows 🧑🏽💻
Let’s look at one more basic example, where off the back of event storming and requirements gathering the Solution Architect generates a sequence diagram to better illustrate the flows.
We can use the following example prompt with this fictitious example:
Human: Please create me a mermaid syntax sequence type diagram which shows the following:
A customer walks into the branch and selects products.
The branch manager scans the products at the till and gives the user the total.
The branch manager then asks the customer for their email address.
The customer pays for the products using cash or card.
The customer receives an email receipt to their email address.
The customer also receives 10% off their next order from the branch manager.
Using generative AI we get the following Mermaid syntax output dynamically generated:
sequenceDiagram
participant C as Customer
participant BM as Branch Manager
participant E as Email System
C->>BM: Selects products
BM->>BM: Scans products at till
BM-->>C: Gives total cost
BM->>C: Asks for email address
C->>BM: Provides email address
C->>BM: Pays with cash/card
BM->>E: Sends receipt to email
E-->>C: Emails receipt
BM->>C: Gives 10% off next orderIf we then view this in the Mermaid Playground we can see the following basic diagram:
This now allows the Solution Architect to demonstrate to stakeholders visually the interactions between the Customer, the Branch Manager and the Email System.
Conclusion
We can use the power of generative AI and Amazon Bedrock to support cross-functional engineering teams in many ways, where we have just demonstrated three basic examples. What other examples do you think would be useful to cover?
Wrapping up
I hope you enjoyed this article, and if you did then please feel free to share and feedback!
Please go and subscribe on my YouTube channel for similar content!
I would love to connect with you also on any of the following:
https://www.linkedin.com/in/lee-james-gilmore/
https://twitter.com/LeeJamesGilmore
If you enjoyed the posts please follow my profile Lee James Gilmore for further posts/series, and don’t forget to connect and say Hi 👋
Please also use the ‘clap’ feature at the bottom of the post if you enjoyed it! (You can clap more than once!!)
About me
“Hi, I’m Lee, an AWS Community Builder, Blogger, AWS certified cloud architect and Global Head of Technology & Architecture based in the UK; currently working for City Electrical Factors (UK) & City Electric Supply (US), having worked primarily in full-stack JavaScript on AWS for the past 6 years.
I consider myself a serverless advocate with a love of all things AWS, innovation, software architecture and technology.”
*** The information provided are my own personal views and I accept no responsibility on the use of the information. ***
You may also be interested in the following:
