# 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](/app-help/documentation/dino-ai.md) 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](/app-help/documentation/dino-ai/dino-prompts.md) 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/pages/ljlILu3iM7h23T4Pomrb#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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.paradime.io/app-help/documentation/integrations/code-ide/mermaid-js/zenuml.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.