LLM + Mermaid: How Modern Teams Create UML Diagrams Without Lucidchart

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.