ZenUML

Overview

Marmaid's ZenUML is a specialized feature within Mermaid that allows users to create sequence diagrams efficiently. It provides an intuitive syntax for representing interactions between processes or entities over time. This documentation serves as a comprehensive guide to understanding and using ZenUML within the Mermaid framework.

---

Creating Your First ZenUML

To get started with ZenUML in Paradime, follow these steps:

1. Open the Code IDE and navigate to the Apps and Agents section.

2. Select Mermaid. Paradime will automatically create a new Mermaid project.

3. In the terminal that appears, use the arrow keys to select "ZenUML."

4. A new file named zenuml.mmd will be created in your editor with the following starter template:

   zenuml
       title Aliases
       A as Alice
       J as John
       A->J: Hello John, how are you?
       J->A: Great!

5. Click the eye icon (👁️) to preview your diagram.

6. Modify the .mmd file as needed to create your custom ZenUML diagram.

---

Syntax and Features

Participants

Participants in ZenUML are the entities or actors involved in the diagram. They can be defined implicitly or explicitly.

Implicit Declaration

Participants are automatically defined based on their appearance in the diagram.

zenuml
    Alice->John: Hello John, how are you?
    John->Alice: Great!

Explicit Declaration

You can explicitly declare participants to define their order of appearance.

zenuml
    title Declare participant (optional)
    Bob
    Alice
    Alice->Bob: Hi Bob
    Bob->Alice: Hi Alice

Annotators

Annotators allow you to specify the type of participant using predefined symbols.

zenuml
    title Annotators
    @Actor Alice
    @Database Bob
    Alice->Bob: Hi Bob
    Bob->Alice: Hi Alice

Available annotators include:

• @Actor

• @Database

• @Entity

Aliases

Use aliases to assign a convenient identifier to participants.

zenuml
    title Aliases
    A as Alice
    J as John
    A->J: Hello John, how are you?
    J->A: Great!

---

Advanced Features

Messages

ZenUML supports various message types:

• Sync Message: Represents a blocking call.

• Async Message: Represents a non-blocking call.

• Creation Message: Creates a new entity.

• Reply Message: Returns a result from a call.

Loops and Conditions

ZenUML enables you to represent loops, conditions, and alternative paths with intuitive syntax.

Loops

zenuml
    while(true) {
      Alice->John: Check status
    }

Conditions

zenuml
    if(condition) {
      Alice->John: Proceed
    } else {
      Alice->John: Halt
    }

---

Styling and Customization

You can style ZenUML diagrams using Mermaid's class definitions and themes. Define and apply classes to enhance the visual appeal of your diagrams.

---

Integration

ZenUML can be integrated into web pages using Mermaid's experimental lazy loading and async rendering features.

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  import zenuml from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml@0.1.0/dist/mermaid-zenuml.esm.min.mjs';
  await mermaid.registerExternalDiagrams([zenuml]);
</script>

---

Additional Resources

For more syntax options and advanced features, visit the official Mermaid documentation.