DEV Community

Cover image for Introducing UMLAI: Generate UML Diagrams from Natural Language Descriptions
Hamidul Islam
Hamidul Islam

Posted on

Introducing UMLAI: Generate UML Diagrams from Natural Language Descriptions

Hey dev community! 👋

I'm excited to share a new open-source tool I've built that might save you countless hours of diagram work: UMLAI, an AI-powered UML diagram generator that creates diagrams from natural language descriptions.

The Problem UMLAI Solves

As developers, we've all been there - spending hours in diagram tools trying to create the perfect UML representation of our system. It's time-consuming, tedious, and often pulls us away from what we really want to do: writing code.

I built UMLAI to simplify this process. Just describe what you want, and let AI handle the rest.

How UMLAI Works

The workflow is beautifully simple:

  1. Visit https://umlai.vercel.app/
  2. Describe the diagram you need in plain English
  3. The AI generates the UML diagram based on your description
  4. Export the diagram or copy the code for use in your documentation

UMLAI supports all standard UML diagram types:

  • Class diagrams
  • Sequence diagrams
  • Activity diagrams
  • Use case diagrams
  • State diagrams
  • And more!

Tech Stack

I built UMLAI using modern technologies that ensure it's fast, reliable, and scalable:

  • Next.js for the frontend and API routes, providing a smooth, responsive user experience
  • Google Gemini AI (formerly Google Generative AI) to power the natural language understanding and diagram generation
  • Mermaid.js for rendering the diagrams
  • Deployed on Vercel for global availability and performance

This stack allows UMLAI to process your descriptions quickly and generate accurate diagrams while maintaining a clean, intuitive interface.

Real-world Example

Let's say you need a class diagram for an e-commerce system. Instead of manually creating each class and relationship, you simply write:

Create a class diagram for an e-commerce system with Customer, Product, Order, and Payment classes. 
Customers can place many orders, and each order can contain multiple products. 
Orders are associated with exactly one payment.
Enter fullscreen mode Exit fullscreen mode

UMLAI will generate the complete diagram with all classes, attributes, methods, and relationships properly defined!

Why I Built This

As a developer, I found that diagramming often broke my flow state. I wanted a tool that could quickly translate my mental model into visual documentation without requiring me to learn yet another tool's quirks and shortcuts.

By leveraging AI, UMLAI bridges the gap between conceptual thinking and visual documentation. It's particularly useful for:

  • Quickly documenting existing systems
  • Prototyping system designs
  • Creating diagrams for technical documentation
  • Teaching and learning software architecture concepts

Open Source and Ready for Contributions

UMLAI is completely open source! You can find the code at https://github.com/Hamid-ul-Islam/AI-uml-diagram-generator.

I welcome contributions of all kinds - whether you want to improve the AI's understanding of UML concepts, enhance the UI, add new export options, or fix bugs.

Try It Out

The tool is deployed and ready to use at https://umlai.vercel.app/

I'd love to hear how UMLAI works for you. What diagrams are you creating? How has it helped your workflow? Are there features you'd like to see added?

Feel free to share your feedback in the comments or open issues on GitHub for feature requests and bug reports.

Let's make diagramming painless together!


P.S. If you find UMLAI useful, consider giving the repo a star on GitHub to help others discover it!

Top comments (0)