Forget dragging boxes around. Here's how AI-powered devs are generating diagrams with a single prompt.
Every developer and product manager knows the drill. You finish a project sprint, and it’s time to document your system.
In the early days, developers used whiteboards to map out ideas with markers and sticky notes. But as systems grew more complex, teams needed more robust solutions. This led to BPM and UML, a structured approach to defining processes and architecture.
Today, AI-powered devs use Mermaid for their diagrams. Discover why they made the switch.
The Evolution of Diagramming: From Whiteboards to AI-Generated Tools
Diagramming on whiteboards in the '90s evolved into using dedicated tools in the 2000s. Developers and product teams adopted software like Rational Rose and Visio to bring some order to the chaos. These tools helped, but they were still time-consuming, requiring a lot of manual effort.
Then came Lucidchart—a significant step forward that allowed diagrams to be created digitally, shared, and edited collaboratively. Product managers and developers alike started using tools like PowerPoint, and Google Slides to map out everything from BPM flows to entity relationships. However, these tools still relied heavily on point-and-click interfaces and manual updates.
Today, tools like Mermaid and PlantUML have taken center stage, thanks to their ability to generate diagrams with text-based commands. Even better, AI-powered assistants like Claude, ChatGPT, and GitHub Copilot have made generating diagrams even easier. These tools work directly within a developer's environment, creating diagrams that are version-controlled and integrated seamlessly into workflows.
BPM Flowcharts: A Product Manager’s Start
Product managers typically begin by defining user stories and broader workflows using BPM diagrams. In the past, this involved manually aligning circles, diamonds, and rectangles on platforms like Lucidchart or PowerPoint—time-consuming and prone to errors. Today, using an AI assistant, you can simply ask:
"Create a BPM flowchart for adding an item to a shopping cart and deciding to proceed to checkout."
Mermaid can generate the entire diagram in seconds:
flowchart TD
Start((Browse Products)) --> AddToCart[Add to Cart]
AddToCart --> Decision{Proceed to Checkout?}
Decision -- Yes --> CheckStock[Check Stock]
Decision -- No --> Start
CheckStock -- In Stock --> Checkout[Proceed to Checkout]
CheckStock -- Out of Stock --> Notify[Notify User]
Notify --> Start
Checkout --> Payment[Process Payment]
Payment -- Success --> Complete((Order Complete))
Payment -- Failure --> Retry[Retry Payment]
Retry --> Payment
No more dragging shapes, no more alignment headaches. Just type and get a clear, version-controlled diagram ready for review.
Entity Relationship Diagrams: Defining the Data Model
Once the user flow is set, developers need to dive into the data. Entity Relationship Diagrams (ERDs) help define the structure—how different pieces of data relate to each other. Previously, this was another manual step involving Lucidchart or Google Slides, dragging tables and drawing relationships.
Now, you can point an AI tool at your models folder or schema definition and ask it to generate an ERD:
"Generate an entity relationship diagram for users, products, and orders."
And Mermaid will do the work for you:
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER }o--|| PRODUCT : contains
CUSTOMER {
int id
string email
string name
}
ORDER {
int id
int customer_id
date order_date
decimal total
}
PRODUCT {
int id
string name
decimal price
int inventory
}
With AI, your data model is always up-to-date, reflecting the latest changes in your system.
Sequence Diagrams: Documenting Real-Time Interactions
Once coding is complete and the API contracts or Swagger specs are finalized, it's time to document how the components interact in real-time. Sequence diagrams illustrate these interactions—showing the flow of requests and data between services, users, and databases.
In the past, creating these diagrams involved painstaking manual work in Lucidchart. Today, AI tools can generate them based on your existing API definitions:
"Show the sequence of a user placing an order."
Mermaid can then create a sequence diagram like this:
sequenceDiagram
actor Customer
participant CartService
participant PaymentGateway
participant InventoryService
Customer->>CartService: Add to Cart
CartService->>InventoryService: Check Stock
InventoryService-->>CartService: Stock Available
Customer->>PaymentGateway: Proceed to Payment
PaymentGateway-->>Customer: Payment Confirmation
CartService->>InventoryService: Update Stock
Instead of spending hours manually aligning elements, developers can use AI to create accurate, clear diagrams effortlessly.
Generate Your Diagrams with AI
Creating diagrams has never been easier. GitHub supports Mermaid directly in README.md
files, letting you add visuals right in your repository. GitLab and VS Code extensions also integrate Mermaid, making documentation seamless.
AI tools like Claude, ChatGPT, or GitHub Copilot can generate diagrams instantly—ideal for product managers needing BPM diagrams and developers using UML. Simply prompt your AI assistant:
"Show our authentication flow as a sequence diagram."
"Create an ERD for users and products."
"Generate a flowchart for order processing."
Try the Mermaid Editor
Ready to join everyone else? Try the Mermaid Live Editor or ask your AI assistant to help you visualize your next design.
The next time you need a system diagram, forget about manually dragging shapes. Talk to your AI assistant, point it at your codebase, and watch your documentation come to life—accurate, efficient, and easy.
I'm interested in your take. What's next for LLM and Mermaid? Leave a message in the comments.
Mike Vincent is an American software engineer and technology writer from Los Angeles, California. His work focuses on AI-powered development, platform architecture, and DevOps practices. Mike's technical articles appear in engineering publications covering cloud computing and solutions architecture.
Read more stories by Mike Vincent at LinkedIn | Medium | Hashnode | Dev.to
Disclaimer: This material has been prepared for informational purposes only, and is not intended to provide, and should not be relied on for business, tax, legal, or accounting advice.
Top comments (0)