Creating UML diagrams in @dsabyte markdown editor

The Unified Modeling Language is a general-purpose, developmental, modelling language in the field of software engineering that is intended to provide a standard way to visualize the design of a system.

Note @dsabyte is using plantuml and mermaid for UML

How to create plantuml UML diagram in @dsabyte markdown editor ?

Insert the below code in the markdown editor, not in the WYSIWYG editor.

$$uml
skinparam backgroundcolor transparent
Bob->Alice : Hello!
$$

The above code will generate the below UML diagram.

Use skinparam backgroundcolor transparent at the very beginning to make the background transparent, otherwise, the background will be white. The white background does not look and feel great in dark mode.

With white background
Insert the below code in the markdown editor, not in the WYSIWYG editor.

$$uml
Bob->Alice : Hello!
$$

The above code will generate the below UML diagram.

How to create mermaid UML diagram in @dsabyte markdown editor ?

Insert the below code in the markdown editor, not in the WYSIWYG editor.

$$mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
$$

The above code will generate the below UML diagram.

Plaint UML tutorial

References

1. UML-Diargam-tutorial

2. mermain uml diagram

Thank You ❤️