184 Components
Architecture Flowchart Node
CardsReactFlow and AWS Architecture diagrams inspired cloud infrastructure component card featuring interactive system nodes (Edge CDN, Serverless compute, Vector DB, Cache), downstream connection highlights, and real-time throughput metrics.
High-Throughput Global Microservices Architecture
Click any infrastructure node to inspect active pipeline topology & telemetry.
edge
Cloudflare Edge
Global CDN & WAF Filter
12ms4.8k req/s
compute
Next.js Edge Cluster
Serverless V8 Workers
28ms3.2k req/s
cache
Upstash Redis
In-Memory Session Store
4ms8.1k ops/s
database
Neon PostgreSQL
Serverless Vector DB
19ms1.4k qps
Next.js Edge Cluster(Downstream targets: db, cache)
RTT Latency: 28ms
Throughput: 3.2k req/s
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/architecture-flowchart-node.json"
Props
TypeScript props supported by <ArchitectureFlowchartNode />.
| Prop | Type | Default | Description |
|---|---|---|---|
| diagramTitle | string | "High-Throughput Global Microservices Architecture" | Architecture diagram card title. |
| nodes | SystemNode[] | — | Array of connected infrastructure nodes with telemetry. |
Key Features
- Interactive cloud nodes for Edge CDN, Compute Workers, Vector Database, and Redis Cache.
- Click-to-highlight downstream connection topology pathways.
- Real-time RTT latency and request throughput telemetry banner.
- Responsive card layout with distinct subsystem color palettes.
Keyboard & Accessibility
- High-contrast color badges for different infrastructure tiers.
- Keyboard accessible interactive nodes.