GUI for editing Mermaid Class Diagrams

17 January 2025 • 5 mins

Editing Mermaid Class Diagrams with the Visual Editor

Mermaid charts are widely used for their ability to represent complex diagrams quickly, and now, thanks to a new update, editing Mermaid Class Diagrams has become even easier and more intuitive. The latest feature extends the Visual Editor to support direct interaction with class diagrams, offering users a variety of tools to enhance their diagramming experience.

In this blog post, we’ll walk you through the new features in the Mermaid Visual Editor, how to use them, and what changes have been made to streamline editing class diagrams. Let’s dive in!

What Are Class Diagrams?

Class diagrams are a type of UML (Unified Modeling Language) diagram used to model the structure of a system by showing its classes, attributes, methods, and the relationships between objects. They are a fundamental tool in object-oriented design and help visualize how different parts of a system interact with each other.

In a class diagram:

• Classes represent entities, such as objects or concepts.
• Attributes are the properties or characteristics of classes.
• Methods are the actions or operations that a class can perform.
• Relationships (e.g., associations, inheritance) show how classes are connected or interact.

Here’s an example of a basic Mermaid class diagram when rendered by Mermaid:

This is the code that generated the diagram:

classDiagram
    ClassA <|-- ClassB
    ClassB : +String name
    ClassB : +int age
    ClassB : +void displayDetails()
    ClassC o-- ClassB
    ClassC : +String description

Looking at the code, you can see how it represents the diagram:

• ClassA is a parent of ClassB, indicated by <|--.
• ClassB has two attributes (name and age) and one method (displayDetails()).
• ClassC has an association (denoted by o--) with ClassB and an attribute description.

Previously, creating or editing such diagrams would require manually writing or modifying the Mermaid syntax. Now, with the new Visual Editor, you can easily create and update these diagrams with just a few clicks.

New Visual Editor Tools for Class Diagrams

The Visual Editor Toolbar introduces several new tools for class diagrams:

• Change Diagram Rendering Direction: Adjust the diagram’s layout, whether it’s top-down, left-right, etc.
• Add New Classes: Easily add new classes to the diagram.
• Add Titles and Notes: Add a title to the diagram or insert notes not linked to specific classes.
• Add Empty Namespaces: Define a placeholder for classes that belong to a specific namespace.
• Update Diagram Configuration: Toggle options like the visibility of the “empty members box” for a cleaner look.
• Change Theme and Layout: Select from various themes and adjust the look and feel of the diagram for better presentation.

With these tools, you can interact with your diagrams dynamically, significantly reducing the effort required to manage complex relationships and attributes.

Creating New Classes and Relationships

One of the most powerful features of the new editor is its intuitive way of adding new classes and establishing relationships between them. Here’s how it works:

• Create a New Class with an Existing Relationship: Click on an existing class in your diagram, then drag to an empty space. A new class will appear with a direct relationship to the original class.
• Create Relationships Between Existing Classes: Quickly establish relationships between existing classes by dragging from one class and dropping the relationship line onto another class. This eliminates the need for manual code input.

When working with relationships, you can click on any existing connection to bring up a toolbar. This toolbar allows you to:

• Change the type of relationship (e.g., inheritance, association).
• Set the cardinalities (e.g., one-to-many, many-to-many).
• Add labels to relationships by double-clicking on the connection.

These controls make it easy to iterate on your diagram as your design evolves.

Editing Class Details

The Visual Editor provides a powerful dialog interface for modifying class properties without touching any code. When you double-click on a class in your diagram, a comprehensive editing panel appears that lets you fine-tune every aspect of the class definition.

At the top of the dialog, you can specify the class’s annotation (such as “Abstract”) and modify its name. Below that, the interface is divided into clear sections for attributes and methods. Each class property can be precisely configured:

Attributes:

• Define visibility modifiers (like public/private using + or -).
• Set the data type (such as int, String).
• Specify the attribute name.
• Add additional modifiers as needed.

Methods:

• Set the method visibility.
• Define return types.
• Specify method names and parameters.
• Add or remove methods with intuitive controls.

The editor maintains proper UML syntax automatically, handling details like the abstract class notation (shown as «Abstract» in the diagram) and proper formatting of attributes and methods. Changes are previewed in real-time, and you can either save your modifications or cancel to revert to the previous state.

This visual approach to class editing makes it significantly easier to maintain complex class diagrams, especially for team members who might be less familiar with Mermaid’s syntax.

Additional Tips for Optimizing Your Diagrams

• Experiment with Different Layouts: Play with layout and theme options to find the best look for your diagram.
• Add Context with Notes: Use the note feature to explain parts of your diagram, helping to clarify complex relationships.

Get Started Today

The new Mermaid Visual Editor tools make diagramming more efficient and accessible. Whether you’re building a new class diagram from scratch or refining an existing one, these updates save you time and effort, letting you focus on what truly matters: the design and structure of your system.

Start exploring these features today and take your class diagrams to the next level! Here’s how to get started:

1. Create your free account: Sign up with your email to join our Free tier.
2. Start a new diagram: Open up a new diagram and click on “ER Diagram” from the Templates menu in the editor.
3. Edit, tweak, and automate: Use our simple code editor (or message Mermaid AI) to fine-tune your diagram to fit your needs.

We wish you luck in creating effective class diagrams!

---