# Architecture Diagrams

### What are Architecture Diagrams?

Architecture diagrams help you visualize relationships between services and resources in your data infrastructure. They're particularly useful for documenting cloud deployments, data pipelines, and system integrations. You can group related services together and show how different components connect and interact.

### Creating Your First Architecture Diagram

1. **Launch DinoAI:** From Code IDE, access [DinoAI](https://docs.paradime.io/app-help/documentation/dino-ai) to start creating diagrams.
2. **Use a Simple Prompt:** Tell DinoAI what kind of ERD you want to create. For example:

{% code overflow="wrap" %}

```
- "Build a mermaid architecture diagram showing my dbt™ data pipeline from raw sources to final dashboards"
```

{% 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.

```mermaid
architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db
```

{% hint style="info" %}

#### Reusable Architecture Diagram prompts for you and your team

You can create custom, standardized [.dinoprompts](https://docs.paradime.io/app-help/documentation/dino-ai/dino-prompts) for Mermaid's Architecture Diagrams that ensure consistency across your data team. See [step-by-step guide.](https://docs.paradime.io/app-help/documentation/integrations/code-ide/mermaid-js/..#creating-mermaid-diagrams-with-.dinoprompts)
{% endhint %}

***

### Diagram Syntax Guide

#### Basic Components

1. **Groups**: Container for related services

```mermaid
group data_warehouse(cloud)[Data Warehouse]
```

2. **Services**: Individual components

```mermaid
service analytics_db(database)[Analytics DB]
```

3. **Edges**: Connections between services

```mermaid
db:R -- L:server  # Right of db to Left of server
```

#### Building Blocks

**Groups**

Create a group with:

```mermaid
group {group_id}({icon})[{label}]
```

Add services to a group using `in`:

```
service my_service(database)[My Service] in my_group
```

**Services**

Define services with:

```mermaid
service {service_id}({icon})[{label}]
```

Available icons:

* cloud
* database
* disk
* internet
* server

**Connections**

Connect services using edges:

* Direction options: T(top), B(bottom), L(left), R(right)
* Arrow types: -->, --, <--

### Data Team Examples

#### Data Warehouse Architecture

```mermaid
architecture-beta
    group warehouse(cloud)[Data Warehouse]
    service raw(database)[Raw Data] in warehouse
    service processed(database)[Processed Data] in warehouse
    
    group analytics(cloud)[Analytics]
    service bi(server)[BI Tool] in analytics
    
    raw:R --> L:processed
    processed:R --> L:bi
```

#### ETL Pipeline

```mermaid
architecture-beta
    service source(database)[Source DB]
    group transform(cloud)[Transform]
    service etl(server)[ETL Service] in transform
    service target(database)[Target DB]
    
    source:R --> L:etl
    etl:R --> L:target
```

### Best Practices

1. Group related services logically
2. Use clear, descriptive labels
3. Keep connections simple and readable
4. Use consistent naming conventions
5. Add appropriate icons for services

{% hint style="info" %}

### Additional Resources

For more syntax options and advanced features, visit the [official Mermaid documentation](https://mermaid.js.org/syntax/architecture.html)
{% endhint %}