# 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. {% hint style="info" %} #### **Why Use Mermaid in Paradime?** * **AI-Powered Creation:** Use [DinoAI](https://docs.paradime.io/app-help/documentation/dino-ai) 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. {% endhint %} 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](https://docs.paradime.io/app-help/documentation/dino-ai): 1. **Launch DinoAI:** From Paradime's Code IDE, access DinoAI to start creating diagrams. 2. **Use a Simple Prompt:** Tell DinoAI what kind of diagram you want to create. For example: {% code overflow="wrap" %} ``` - "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" ``` {% 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. {% hint style="info" %} **Quick Testing:** This method is perfect for testing and exploring Mermaid capabilities. For consistent, detailed work with Mermaid diagrams, we recommend using [.dinoprompts](https://docs.paradime.io/app-help/documentation/dino-ai/dino-prompts) for more structured and reusable mermaid prompts. {% endhint %} {% @arcade/embed flowId="EmaMjThVIRtvnr0jMixR" url="" %} *** ### **Creating Mermaid Diagrams with .dinoprompts** You can create your own structured, reusable Mermaid prompts in [.dinoprompts](https://docs.paradime.io/app-help/documentation/dino-ai/dino-prompts) 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** 1. **Add prompts to your .dinoprompts file** - Create custom Mermaid prompts.

Example Mermaid Diagram .dinoprompts

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

2. **Customize for your needs** - Modify prompts to match your team's specific diagram requirements **Using Your Custom Mermaid Prompts** 1. **Open DinoAI** by clicking the DinoAI icon (🪄) in the right panel 2. **Access .dinoprompts** by clicking the `Prompt` icon in the chat input * **Alternative**: Use the bracket symbol shortcut "\[" to quickly find prompts 3. **Select your custom prompt** from the dropdown (ex. mermaid\_erd) 4. **Choose the diagram type** based on the prompt selected 5. *Optional:* **Add additional** [**context**](https://docs.paradime.io/app-help/documentation/dino-ai/context) to your prompt like Files, Directories, etc. 6. *Optional:* **Edit/update prompt** based on your specific needs {% @arcade/embed flowId="WGIK14wrUGGtqpxSAypk" url="" %} *** ### 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.


Architecture Diagrams	Visualize your data infrastructure, including cloud deployments, ETL services, and database organization.	act.png	architecture-diagrams
Entity Relationship Diagrams (ERDs)	Map database schemas and relationships between tables to document data models.	image.png	entity-relationship-diagrams
Class Diagrams	Model data structures and transformations	image.png	class-diagrams
Block Diagrams	Create structured layouts of system components and data flows.	block.png	block-diagrams
Sequence Diagrams	Document ETL processes, API interactions, and data validation workflows.	image.png	sequence-diagrams
State Diagrams	Track job executions, pipeline statuses, and system states over time.	state 1.webp	state-diagrams
User Journey Diagrams	Map system interactions and user access patterns for improved workflows.	image.png	user-journey-diagrams
ZenUML	Model complex workflows with simplified syntax for sequential processes.	zen.png	zenuml
Gantt Diagrams	Plan project timelines, manage task dependencies, and track milestones.	image.png	gantt-diagrams
GitGraph Diagrams	Document version control strategies, feature development workflows, and release processes.	image.png	gitgraph-diagrams
Timeline Diagrams	Visualize project roadmaps, historical trends, and key milestones.	image.png	timeline-diagrams
Requirement Diagrams	Specify and track feature requirements and dependencies visually.	image.png	requirement-diagrams
Pie Charts	Show distributions, allocations, and proportional data in your projects.	image.png	pie-chart-diagrams
XY Charts	Display trends, metrics, and relationships using bar and line charts.	xy.png	xy-chart
Sankey Diagrams	Visualize data flow volumes, resource usage, and energy transfers.	image.png	sankey-diagrams
Quadrant Charts	Analyze impact and priority for features or projects.	image.png	quadrant-charts
Mind Maps	Organize ideas, project requirements, or data models hierarchically.	image.png	mindmaps

Each diagram type includes detailed documentation with syntax examples and best practices for data teams.