Believe It or Not, You Still Need an Online UML Diagram Tool

A UML diagram tool helps developers and other professionals quickly create and share UML diagrams that communicate information about complex software systems. The right UML diagram tool allows users to enhance their code with visuals without majorly disrupting their workflow.

The unified modeling language (UML) was popularized by Martin Fowler in the late 1990s. Its initial purpose to was to reduce chaos and confusion by standardizing graphical models. Over time, many have (rightfully) argued that UML has become too complex.

Our CTO and co-founder, Knut Sveidqvist, even wrote about the limitations of UML limitations of UML on our blog recently. These diagrams became so comprehensive — with so much new terminology — that they were too difficult to interpret. The very diagrams that were supposed to help developers save time were actually bogging them down.

But that doesn’t mean that UML diagrams have gone out of style. A simple UML diagram — sequence, class, state, activity/flowchart — can effectively communicate the high-level qualities of a system. With the right diagramming tool, creating these diagrams is easy and fast.

That’s why Mermaid and Mermaid Chart , the text-to-diagramming platform built on top of Mermaid’s functionality, are focused on restoring the integrity of UML diagrams.

Mermaid Chart users can quickly and easily create several types of UML diagrams from simple code. The platform’s sample diagrams provide an easy starting point, and all diagrams can be easily exported and shared with team members.

It’s easy — almost like magic. And when diagrams are easy to make, they can actually become fun again. Put simply, it’s how making UML diagrams should be.

Let’s discuss some UML diagram examples, look into the different types of UML diagrams and learn why Mermaid Chart is the easiest online UML diagram tool for developers and beyond:

What is a UML diagram? #

A UML diagram is a visual that helps communicate the architecture, design and operations of a complex software system. It’s a broad term that can refer to various types of diagrams, including sequence, class, state and activity/flowchart.

Despite criticism about its complexity, UML provides a common language for developers and a shared set of diagrams for documenting code. When created in a crisp and simple fashion, UML diagrams can be helpful for increasing alignment within development teams and cross-functionally in an organization.

It’s important to remember that your code is the best source for comprehensive information, as Fowler says. UML diagrams are a complement to your code, not a replacement.

What should I use UML diagrams for? #

A UML diagram is best used as an informal sketching tool that provides a high-level overview of a complex software system. The key is finding the fine line between a diagram that’s too simple and one that’s needlessly complex.

Fowler initially identified three use cases for UML: sketching, blueprinting, and programming. Using these diagrams as blueprints or as actual elements of the code defeats their purpose; these methods force users to create overly-complex diagrams that are difficult to read.

That leaves sketching as the best method. Mermaid Chart founder Knut recalls using a type of UML diagram – an activity/flowchart — to streamline campaign logic management while working for an e-commerce company.

When returning to the code, it was hard for Knut or other team members to remember the entire flow, which spanned several subsystems. After a deep dive into the logic, he documented the flow using a flowchart.

The diagram came in handy many times after that: when describing to colleagues how the system worked, testing the functionality after updates and adjusting the logic.

Another helpful use of UML is when the state of a system stops being trivial: when suddenly it becomes important to keep the model manageable. This can happen quickly. In this case, the diagram can help identify areas where the model can be simplified. If you can’t simplify the model, it’s often helpful just to increase awareness of the model — and that is non-trivial.

Knut used UML in this context when he wrote a screen-sharing system where the internal client state took a leap in complexity. A state diagram helped clarify this complex state and gave Knut the ability to create a robust implementation.

Using Mermaid Chart as your online UML diagram tool #

Designing flowcharts and other visuals can be incredibly time-consuming, whether you’re working in PowerPoint, Canva or any other program. Mermaid Chart lets you remove this design layer and instead, use simple code to get your point across faster. It’s less clicking and more communicating!

Getting started is easy. Visit www.mermaidchart.com to create your free account. The Free tier is all you need to get started building your UML diagrams.

If you’re looking for more Mermaid Chart magic, upgrade to our Pro plan. The Pro Plan offers users unlimited diagrams, team editing capabilities and many other features coming soon.

Types of UML diagrams you can create with Mermaid Chart #

Mermaid Chart can help users create four main types of UML diagrams:

Sequence diagrams show the interactions between objects in a system in sequential order.
Class diagrams describe the static structure of a software system, the classes in a system and the relationships between them.
State diagrams display the different states within a system and how they transition from one state to another.
Activity/flowchart diagrams depict the flow of activities in a system.

Within Mermaid Chart, you can find various sample diagrams and templates for each of the four types of UML diagrams listed above.

Once you create your account, enter your project space and click “+New Diagram” on the top right of the screen to get started. You can find templates for each of the four diagram types under the “Sample diagrams” button in the top left corner of your new project. Click the buttons next to “Filter” to more easily find the diagram you’re looking for.

Sequence diagrams #

A sequence diagram communicates how processes operate with one another in a step-by-step fashion. This form of interaction diagram helps users easily map and visualize the dynamic flow of messages across a system.

The sequence diagram is Mermaid Chart’s most popular diagram. We’ve included eight different sample sequence diagrams to get you started.

We’ve written detailed instructions for building sequence diagrams in Mermaid — and these instructions will give you the foundation to get started in Mermaid Chart, as well.

Class Diagram #

A class diagram is a static structure diagram that communicates the structure of a system by showing its classes, attributes and operations, as well as the relationships between objects in the system.

It’s considered to be the main building block of object-oriented programming, helping coders model their object hierarchy. Take a deeper dive on class diagrams in Mermaid here.

State Diagram #

A state diagram describes the behavior of a system and how it flows between different states. This diagram was pioneered by Alan Turing, who is often considered the father of computer science and artificial intelligence.

State diagrams can become increasingly complex as you add multi-dimensional states, which can be seen in the diagram below:

There’s plenty to learn about how to render state diagrams in Mermaid and Mermaid Chart. Check out our class diagrams overview on the Mermaid site here to get started.

Activity/Flowchart Diagram #

An activity diagram, also known as a flowchart, is used to represent the workflow of a software system. These diagrams show the different activities within a system and how they are related to each other. An activity or flowchart diagram can be used to understand the flow of a software system and to identify areas where improvements can be made.

There are nine different sample flowcharts available in Mermaid Chart. We’ve compiled more information on how to create a flowchart in Mermaid, first, to send you on your way.

Get started with an online UML diagram tool #

Mark our words: when used properly, UML diagrams are still alive and well. Developers should focus on establishing the right level of complexity within their UML diagrams: communicating the most important information without overloading the details. Specificity is great, but only in moderation. It’s important not to lose sight of the bigger picture within your UML visuals.

Diagrams should contain enough information to be useful and still be easy to read. They should also be simple — and dare we say, fun — to create.

This is Mermaid Chart’s mission. Our easy-to-use online UML diagram tool can help you build an effective and efficient UML diagram from simple code, meaning you won’t spend hours on design. When you make changes to your code, your new diagram is rendered almost instantly. Mermaid Chart’s easy interface helps you focus on the most important aspects of your diagram, rather than getting lost in the details.

Give us a try for free and see the magic of Mermaid Chart — a smarter way to create diagrams.