Mermaid Diagram Editor

Create and validate Mermaid diagrams

flowchart • 8 LINES

Mermaid SDL Editor

Diagram Code & Embeds

```mermaid
flowchart TD
  Client[Web / Mobile Client] -->|HTTPS| CDN[Cloudflare CDN]
  CDN -->|Proxy| ALB[Application Load Balancer]
  ALB --> API[Next.js API Gateway]
  API -->|Read / Write| Postgres[(PostgreSQL DB)]
  API -->|Cache| Redis[(Redis Cluster)]
  API -->|Async Job| Queue[SQS Event Queue]
  Queue --> Worker[Background Worker]
```

<div class="mermaid">
flowchart TD
  Client[Web / Mobile Client] -->|HTTPS| CDN[Cloudflare CDN]
  CDN -->|Proxy| ALB[Application Load Balancer]
  ALB --> API[Next.js API Gateway]
  API -->|Read / Write| Postgres[(PostgreSQL DB)]
  API -->|Cache| Redis[(Redis Cluster)]
  API -->|Async Job| Queue[SQS Event Queue]
  Queue --> Worker[Background Worker]
</div>
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>