> ## 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.

# 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](/products/dino-ai/index) to start creating diagrams.
2. **Use a Simple Prompt:** Tell DinoAI what kind of ERD you want to create. For example:

```text theme={"system"}
- "Build a mermaid architecture diagram showing my dbt™ data pipeline from raw sources to final dashboards"
```

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 theme={"system"}
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
```

<Info>
  **Reusable Architecture Diagram prompts for you and your team**

  You can create custom, standardized [.dinoprompts](/products/dino-ai/copilot/dino-prompts) for Mermaid's Architecture Diagrams that ensure consistency across your data team. See [step-by-step guide.](/integrations/mermaid-js/index#creating-mermaid-diagrams-with-.dinoprompts)
</Info>

***

### Diagram Syntax Guide

#### Basic Components

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

```mermaid theme={"system"}
group data_warehouse(cloud)[Data Warehouse]
```

2. **Services**: Individual components

```mermaid theme={"system"}
service analytics_db(database)[Analytics DB]
```

3. **Edges**: Connections between services

```mermaid theme={"system"}
db:R -- L:server  # Right of db to Left of server
```

#### Building Blocks

**Groups**

Create a group with:

```mermaid theme={"system"}
group {group_id}({icon})[{label}]
```

Add services to a group using `in`:

```text theme={"system"}
service my_service(database)[My Service] in my_group
```

**Services**

Define services with:

```mermaid theme={"system"}
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 theme={"system"}
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 theme={"system"}
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

<Info>
  **Additional Resources**

  For more syntax options and advanced features, visit the [official Mermaid documentation](https://mermaid.js.org/syntax/architecture.html)
</Info>


## Related topics

- [Mermaid](/integrations/mermaid-js/index.md)
- [Class Diagrams](/integrations/mermaid-js/class-diagrams.md)
- [Block Diagrams](/integrations/mermaid-js/block-diagrams.md)
- [Timeline Diagrams](/integrations/mermaid-js/timeline-diagrams.md)
- [Gantt Diagrams](/integrations/mermaid-js/gantt-diagrams.md)