A worked example, rendered from real sample data. Sign in to run the tool on your own input.
three-tier
Client
API Gateway
Database{
"diagram": "graph TB\n Client[\"🖥️ Client<br/>React/Next.js\"]\n API[\"📡 API Gateway<br/>Express/Node.js\"]\n Auth[\"🔐 Auth Service<br/>JWT/OAuth\"]\n DB[\"💾 Database<br/>PostgreSQL\"]\n Cache[\"⚡ Cache<br/>Redis\"]\n Queue[\"📦 Message Queue<br/>RabbitMQ\"]\n\n Client -->|HTTP/REST| API\n API -->|Validate| Auth\n API -->|Query| DB\n API -->|Cache| Cache\n API -->|Publish| Queue\n Queue -->|Process| Worker[\"👷 Worker<br/>Background Jobs\"]\n\n style Client fill:#e1f5ff\n style API fill:#f3e5f5\n style Auth fill:#fce4ec\n style DB fill:#e8f5e9\n style Cache fill:#fff3e0\n style Queue fill:#f1f8e9",
"format": "mermaid",
"title": "System Architecture",
"components": [
"Client",
"API Gateway",
"Auth Service",
"Database",
"Cache",
"Message Queue",
"Worker"
],
"description": "Three-tier architecture with external services"
}
Generate system architecture diagrams with components, services, and data flows. Part of the DevTools Surf developer suite. Browse more tools in the Diagrams & Workflows collection.