Architecture Diagrams

Visualize cloud deployments, data pipelines, and system integrations with Mermaid's architecture diagrams. Ideal for documenting services, resources, and interactions.

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 to start creating diagrams.

2. Use a Simple Prompt: Tell DinoAI what kind of ERD you want to create. For example:

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

1. Get Your Diagram: DinoAI will generate a complete .mmd file with proper Mermaid syntax.

2. Preview Your Work: Click the eye icon (👁️) to preview your diagram in real-time as you edit.

3. Iterate and Refine: Modify the generated .mmd file directly, or ask DinoAI to make specific changes.

Reusable Architecture Diagram prompts for you and your team

You can create custom, standardized .dinoprompts for Mermaid's Architecture Diagrams that ensure consistency across your data team. See step-by-step guide.

---

Diagram Syntax Guide

Basic Components

1. Groups: Container for related services

1. Services: Individual components

1. Edges: Connections between services

Building Blocks

Groups

Create a group with:

Add services to a group using in:

service my_service(database)[My Service] in my_group

Services

Define services with:

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

ETL Pipeline

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

Additional Resources

For more syntax options and advanced features, visit the official Mermaid documentation