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 to start creating diagrams.

2. Use a Simple Prompt: Tell DinoAI what kind of ZenUML Diagram you want to create. For example:

- "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"

1. Get Your Diagram: DinoAI will generate a complete .mmd file with proper Mermaid syntax.

2. Preview Your Work: Click the eye icon (👁️) to preview your diagram in real-time as you edit.

3. Iterate and Refine: Modify the generated .mmd file directly, or ask DinoAI to make specific changes.

Example:

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

Reusable ZenUML Diagrams prompts for you and your team

You can create custom, standardized .dinoprompts for Mermaid's ZenUML Diagram that ensure consistency across your data team. See step-by-step guide.

---

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/[email protected]/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.