> ## Documentation Index
> Fetch the complete documentation index at: https://docs.paradime.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Mermaid
> Learn how to use Mermaid in Paradime to create diagrams that document your dbt projects. Create ERDs, workflows, and architecture diagrams using code.
export const Arcade = ({src, title}) =>
;
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](/products/dino-ai/index) 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](/products/dino-ai/index):
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:
```
- "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"
```
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.
**Quick Testing:** This method is perfect for testing and exploring Mermaid capabilities. For consistent, detailed work with Mermaid diagrams, we recommend using [.dinoprompts](/products/dino-ai/copilot/dino-prompts) for more structured and reusable mermaid prompts.
***
### **Creating Mermaid Diagrams with .dinoprompts**
You can create your own structured, reusable Mermaid prompts in [.dinoprompts](/products/dino-ai/copilot/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.
````yaml theme={"system"}
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**](/products/dino-ai/copilot/context/index) to your prompt like Files, Directories, etc.
6. *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.
Visualize your data infrastructure, including cloud deployments, ETL services, and database organization.
Map database schemas and relationships between tables to document data models.
Model data structures and transformations
Create structured layouts of system components and data flows.
Document ETL processes, API interactions, and data validation workflows.
Track job executions, pipeline statuses, and system states over time.
Map system interactions and user access patterns for improved workflows.
Model complex workflows with simplified syntax for sequential processes.
Plan project timelines, manage task dependencies, and track milestones.
Document version control strategies, feature development workflows, and release processes.
Visualize project roadmaps, historical trends, and key milestones.
Specify and track feature requirements and dependencies visually.
Show distributions, allocations, and proportional data in your projects.
Display trends, metrics, and relationships using bar and line charts.
Visualize data flow volumes, resource usage, and energy transfers.
Analyze impact and priority for features or projects.
Organize ideas, project requirements, or data models hierarchically.
Each diagram type includes detailed documentation with syntax examples and best practices for data teams.
## Related topics
- [Pie Chart](/integrations/mermaid-js/pie-chart-diagrams.md)
- [Accelerating Data Governance](/guides/paradime-101/getting-started-with-the-paradime-ide/dinoai-accelerating-your-analytics-engineering-workflow/accelerating-data-governance.md)
- [Zenuml](/integrations/mermaid-js/zenuml.md)
- [Mindmaps](/integrations/mermaid-js/mindmaps.md)
- [User Journey Diagrams](/integrations/mermaid-js/user-journey-diagrams.md)