---
sidebar_position: 5
version: 1
---

import InteractiveSVG from '../../../src/components/InteractiveERDSVG';
import Mermaid from '@theme/Mermaid';

# Resources

## High Level Architecture
<div style={{ maxWidth: "600px", margin: "0 auto",  marginLeft: 0, marginRight: "auto" }}>
```mermaid
flowchart TD

  %% Top Level
  LB["<b>Load Balancer(s)</b><br/>(optional)"]
  LB -.-> WebServers

  %% Web Servers
  subgraph WebServers ["<b>Web Server(s)</b>"]
    WS1["<b>Frontend</b><br/>(React, AntD, ECharts, AGGrid)"]
    WS2["<b>Backend</b><br/>(Python, Flask, SQLAlchemy, Pandas, ...)"]
  end

  %% Infra
  subgraph InfraServices ["<b>Infra</b>"]
    DB[("<b>Metadata Database</b><br/>(Postgres / MySQL)")]

    subgraph Caching ["<b>Caching Subservices<br/></b>(Redis, memcache, S3, ...)"]
      direction LR
      DummySpace[" "]:::invisible
      QueryCache["<b>Query Results Cache</b><br/>(Accelerated Dashboards)"]
      CsvCache["<b>CSV Exports Cache</b>"]
      ThumbnailCache["<b>Thumbnails Cache</b>"]
      AlertImageCache["<b>Alert/Report Images Cache</b>"]
	  QueryCache -- " " --> CsvCache
	  linkStyle 1 stroke:transparent;
      ThumbnailCache -- " " --> AlertImageCache
	  linkStyle 2 stroke:transparent;
    end

    Broker(("<b>Message Queue</b><br/>(Redis / RabbitMQ / SQS)"))
  end

  AsyncBackend["<b>Async Workers (Celery)</b><br>required for Alerts & Reports, thumbnails, CSV exports, long-running workloads, ..."]

  %% External DBs
  subgraph ExternalDatabases ["<b>Analytics Databases</b>"]
    direction LR
    BigQuery[(BigQuery)]
    Snowflake[(Snowflake)]
    Redshift[(Redshift)]
    Postgres[(Postgres)]
    Postgres[(... any ...)]
  end

  %% Connections
  LB -.-> WebServers
  WebServers --> DB
  WebServers -.-> Caching
  WebServers -.-> Broker
  WebServers -.-> ExternalDatabases

  Broker -.-> AsyncBackend

  AsyncBackend -.-> ExternalDatabases
  AsyncBackend -.-> Caching



  %% Legend styling
  classDef requiredNode stroke-width:2px,stroke:black;
  class Required requiredNode;
  class Optional optionalNode;

  %% Hide real arrow
  linkStyle 0 stroke:transparent;

  %% Styling
  classDef optionalNode stroke-dasharray: 5 5, opacity:0.9;
  class LB optionalNode;
  class Caching optionalNode;
  class AsyncBackend optionalNode;
  class Broker optionalNode;
  class QueryCache optionalNode;
  class CsvCache optionalNode;
  class ThumbnailCache optionalNode;
  class AlertImageCache optionalNode;
  class Celery optionalNode;

  classDef invisible fill:transparent,stroke:transparent;
```
</div>

## Entity-Relationship Diagram

Here is our interactive ERD:

<InteractiveSVG />

<br />

[Download the .svg](https://github.com/apache/superset/tree/master/docs/static/img/erd.svg)