User Guide

System Architecture

Create professional architecture diagrams with layered layout, explicit security/auth flows, CQRS read/write paths, CDC streams, and async messaging.

Create Architecture Diagram →← Help Home
0) Styles (Generic, AWS, Azure, Google Cloud)
  • Pick a style from the left stencil sidebar under Style.
  • Vendor styles load icons from local manifests served from:/icon-packs/aws/manifest.json/icon-packs/azure/manifest.json/icon-packs/gcp/manifest.json
  • You can override the icon per node: select a node → Properties → Icon Key (matches a key in the selected style manifest).
  • If a manifest is missing, the UI shows a warning and nodes fall back to generic icons.
Icon pack docs:GuideAWSAzureGoogle Cloud
1) Use layered structure (SaaS-grade)
  1. Client/Edge: Users, Web/Mobile, CDN.
  2. Security/Routing: WAF, API Gateway, Auth (OIDC).
  3. Compute/Logic: Microservices, K8s, Serverless.
  4. Async/Messaging: Event bus, queues/topics.
  5. Persistence: SQL/NoSQL/object store/search.
  6. Observability: metrics, logging, tracing.
Use Auto‑Layout to align nodes by layer.
2) Sync vs async flows (solid vs dashed)
  • Solid edges = synchronous request/response.
  • Dashed edges = async events/messages/CDC.
  • Select an edge → click Edit Edge to toggle dashed async style and set labels.
3) Enterprise patterns (CQRS + CDC + Saga)
  • CQRS: separate Command API (write) from Query API (read).
  • CDC: connect Write DB → CDC Stream → Read Model/Search (dashed).
  • Saga: use a saga/orchestrator node and dashed flows to coordinate distributed transactions.
4) High availability (multi‑region)
  • Use Region Boundary nodes to represent Region A/Region B.
  • Place replicated storage in the failover region to communicate DR posture.
5) Boundaries & nesting (regions, VPCs, groups)
  • Drag a boundary (Region/VPC/Group) from the stencil onto the canvas.
  • Drag components into a boundary to nest them so they move together.
  • To remove a component from a boundary, drag it outside the boundary box.
6) Export
  • Export SVG/PNG for documentation.
  • Export Mermaid to store the diagram textually in version control.
Troubleshooting
  • If edges look messy, add whitespace between layers and keep the happy path linear.
  • If vendor icons don’t appear, confirm the relevant manifest exists under public/icon-packs/.
  • If your diagram feels crowded, split into two diagrams: High‑level + Deep‑dive per domain.