# 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. **Launch DinoAI:** From Code IDE, access [DinoAI](https://docs.paradime.io/app-help/documentation/dino-ai) to start creating diagrams.
2. **Use a Simple Prompt:** Tell DinoAI what kind of ZenUML Diagram you want to create. For example:

{% code overflow="wrap" %}

```
- "Create a Mermaid ZenUML diagram showing data processing sequence between services"

- "Generate a Mermaid ZenUML for API interactions in my data platform"

- "Build a Mermaid ZenUML showing the flow of data validation and error handling"
```

{% endcode %}

3. **Get Your Diagram:** DinoAI will generate a complete `.mmd` file with proper Mermaid syntax.
4. **Preview Your Work:** Click the eye icon (👁️) to preview your diagram in real-time as you edit.
5. **Iterate and Refine:** Modify the generated `.mmd` file directly, or ask DinoAI to make specific changes.

#### Example: 

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

{% hint style="info" %}

#### Reusable ZenUML Diagrams prompts for you and your team

You can create custom, standardized [.dinoprompts](https://docs.paradime.io/app-help/documentation/dino-ai/dino-prompts) for Mermaid's ZenUML Diagram that ensure consistency across your data team. See [step-by-step guide.](https://docs.paradime.io/app-help/documentation/integrations/code-ide/mermaid-js/..#creating-mermaid-diagrams-with-.dinoprompts)
{% endhint %}

***

### 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.

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

**Explicit Declaration**

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

```mermaid
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.

```mermaid
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.

```mermaid
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**

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

**Conditions**

```mermaid
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.

```html
<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>
```

***

{% hint style="info" %}

### Additional Resources

For more syntax options and advanced features, visit the [official Mermaid documentation](https://mermaid.js.org/syntax/zenuml.html).
{% endhint %}