Mermaid

Mermaid is a powerful tool for visualizing complex workflows, data models, and system architectures using simple code. Seamlessly integrated into Paradime, it helps data teams document their dbt™ projects and collaborate more effectively by creating professional diagrams directly within their development environment.

Why Use Mermaid in Paradime?

AI-Powered Creation: Use DinoAI to generate diagrams from simple prompts, eliminating the need to write complex syntax manually.
Simplified Visualization: Transform abstract concepts like data models, ETL processes, and project timelines into clear, visual diagrams.
Built for Collaboration: Store .mmd diagram files alongside your dbt™ code, version control them, and share them seamlessly with your team.
Real-Time Feedback: Preview your diagrams in real-time while you edit, ensuring quick iterations and accuracy.

From documenting database schemas to mapping workflows and planning releases, Mermaid's visualizations enhance collaboration and understanding across your data projects.

Getting Started with Mermaid

Creating your first diagram in Paradime is simple using DinoAI:

Launch DinoAI: From Paradime's Code IDE, access DinoAI to start creating diagrams.
Use a Simple Prompt: Tell DinoAI what kind of diagram you want to create. For example:

- "Create a simple mermaid ERD diagram showing the relationships between my user, order, and product tables"

- "Generate a mermaid flowchart for my data pipeline process from raw data to analytics"

- "Build a mermaid sequence diagram showing the interaction between my API and database"

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

Quick Testing: This method is perfect for testing and exploring Mermaid capabilities. For consistent, detailed work with Mermaid diagrams, we recommend using .dinoprompts for more structured and reusable mermaid prompts.

Creating Mermaid Diagrams with .dinoprompts

You can create your own structured, reusable Mermaid prompts in .dinoprompts for consistent diagram generation. These custom prompts are perfect for teams that frequently create similar types of diagrams and want standardized templates.

Creating Custom Mermaid Prompts

Add prompts to your .dinoprompts file - Create custom Mermaid prompts.

Example Mermaid Diagram .dinoprompts

prompts:
  # ERD Diagrams
  - name: mermaid_erd
    prompt: >
      Create an ERD diagram for model @${model_path}:

      Choose one of these formats:

      1. Simple ERD
      ============
      Features:
      • Show just entities and their relationships
      • Use underscore_notation for relationship labels
      • Basic cardinality notation ||--o{

      Example:
      ```
      erDiagram
          Customer ||--o{ Order : places
          Order ||--|{ LineItem : contains
      ```

      2. Detailed ERD
      =============
      Features:
      • Show all columns with data types
      • Include PK/FK indicators
      • Show full relationships and cardinality
      • Include both upstream and downstream dependencies

      Example:
      ```
      erDiagram
          Customer {
              int customer_id PK
              string name
              string email
          }
          Order {
              int order_id PK
              int customer_id FK
              date order_date
              string status
          }
          Customer ||--o{ Order : places
      ```

      Which format would you like to use? I'll help you create it.

  # Flowcharts
  - name: mermaid_flowchart
    prompt: >
      Create a flowchart diagram for ${process_name}:

      Choose one of these formats:

      1. Simple Flowchart
      ================
      Features:
      • Basic left-to-right flow
      • Essential nodes and connections

      Example:
      ```
      flowchart LR
          A[Start] --> B[Process]
          B --> C[End]
      ```

      2. Detailed Flowchart
      =================
      Features:
      • Organized subgraphs
      • Multiple node shapes
      • Conditional flows
      • Clear labels

      Example:
      ```
      flowchart TD
          subgraph Input
              A[Start] --> B{Valid?}
          end
          subgraph Processing
              B -->|Yes| C[Process Data]
              B -->|No| D[Error Handler]
              C --> E[Save Result]
          end
          subgraph Output
              E --> F[End]
              D --> F
          end
      ```

      Which format would you like to use? I'll help you create it.

  # Sequence Diagrams
  - name: mermaid_sequence
    prompt: >
      Create a sequence diagram:

      Choose one of these formats:

      1. Simple Sequence
      ===============
      Features:
      • Basic participant interactions
      • Essential messages

      Example:
      ```
      sequenceDiagram
          participant U as User
          participant S as System
          U->>S: Request
          S-->>U: Response
      ```

      2. Detailed Sequence
      ================
      Features:
      • Multiple participants
      • Activation blocks
      • Alternative flows
      • Notes and loops

      Example:
      ```
      sequenceDiagram
          participant U as User
          participant A as API
          participant DB as Database
          
          U->>+A: Submit Request
          A->>+DB: Query Data
          
          alt Success
              DB-->>-A: Return Results
              A-->>-U: Show Success
          else Error
              DB-->>-A: Error
              A-->>-U: Show Error
          end
          
          note over U,DB: Complete Flow
      ```

      Which format would you like to use? I'll help you create it.

  # Gantt Diagrams
  - name: mermaid_gantt
    prompt: >
      Create a Gantt chart:

      Choose one of these formats:

      1. Simple Gantt
      ============
      Features:
      • Basic tasks and dates
      • Simple timeline view

      Example:
      ```
      gantt
          title Simple Project Schedule
          dateFormat YYYY-MM-DD
          section Tasks
              Task 1 :2025-01-01, 30d
              Task 2 :2025-02-01, 20d
      ```

      2. Detailed Gantt
      =============
      Features:
      • Multiple sections
      • Dependencies
      • Milestones
      • Status tracking

      Example:
      ```
      gantt
          title Detailed Project Schedule
          dateFormat YYYY-MM-DD
          excludes weekends
          
          section Planning
              Requirements  :done, req, 2025-01-01, 15d
              Design       :active, des, after req, 20d
              
          section Development
              Implementation :impl, after des, 30d
              Testing       :test, after impl, 15d
              
          section Deployment
              Training    :train, after test, 10d
              Go Live    :milestone, after train, 0d
      ```

      Which format would you like to use? I'll help you create it.

  # Pie Chart Diagrams
  - name: mermaid_pie
    prompt: >
      Create a pie chart:

      Choose one of these formats:

      1. Simple Pie Chart
      ===============
      Features:
      • Basic segments
      • Simple percentage distribution

      Example:
      ```
      pie
          title Simple Distribution
          "A" : 40
          "B" : 60
      ```

      2. Detailed Pie Chart
      ================
      Features:
      • Multiple segments
      • Specific values
      • Data labels

      Example:
      ```
      pie
          title Market Share Analysis
          showData
          "Product A" : 30.5
          "Product B" : 25.7
          "Product C" : 20.3
          "Others" : 23.5
      ```

      Which format would you like to use? I'll help you create it.

Customize for your needs - Modify prompts to match your team's specific diagram requirements

Using Your Custom Mermaid Prompts

Open DinoAI by clicking the DinoAI icon (🪄) in the right panel
Access .dinoprompts by clicking the Prompt icon in the chat input
- Alternative: Use the bracket symbol shortcut "[" to quickly find prompts
Select your custom prompt from the dropdown (ex. mermaid_erd)
Choose the diagram type based on the prompt selected
Optional: Add additional context to your prompt like Files, Directories, etc.
Optional: Edit/update prompt based on your specific needs

Common Mermaid Diagram

DinoAI can help you create any Mermaid diagram types. While these represent the most commonly used diagrams for data teams, you're not limited to only these options - DinoAI can generate any valid Mermaid diagram based on your specific needs.