User Guide

Data Architecture

Create professional data architecture diagrams that look like reference architectures: sources → ingestion → processing → storage → analytics, with governance and security overlays.

Create Data Architecture Diagram →← Help Home
0) Quick start (recommended for beginners)
  1. In the left sidebar, use Quick start → pick a template (AWS/Azure/GCP) → click Load.
  2. Use the + Source / + Ingestion / + Processing / + Storage / + Analytics buttons (or the + Add button on any stencil item). You don’t need to drag.
  3. Click Auto-Layout to tidy the diagram if it feels messy.
  4. Export via Export SVG or Export PNG (HD) when you’re ready to share.
1) Styles (Generic, AWS, Azure, Google Cloud)
  • Pick a style from the left stencil sidebar under Style.
  • Cloud styles use local icon files under public/icon-packs/.
  • If you export SVG/PNG, icons are inlined so the exported files work when opened from disk.
Icon pack docs:Icon Packs Guide
2) Use layers (the diagram “story”)
  1. Sources: files, OLTP databases, APIs, telemetry/streams.
  2. Ingestion: event streams, queues, collectors.
  3. Processing: ETL/orchestration, transforms.
  4. Storage: object store/lake, warehouse, SQL/NoSQL.
  5. Analytics: BI dashboards, ML/feature use cases.
  6. Governance/Security: catalog, quality checks, RBAC/policies (often connect with dashed edges).
3) Containers (boundaries) + nesting
  • Use a Container to represent a Lakehouse / Workspace / Resource Group / Domain.
  • Drag nodes into a container to nest them so they move together.
  • To remove a node from a container, drag it outside the boundary.
4) Edges (sync vs async)
  • Solid edges = synchronous / direct dependency.
  • Dashed edges = async/event/CDC style flow (recommended for streaming and governance hooks).
  • Select an edge → click Edit Edge to set a label and toggle dashed async style.
5) Import / Export
  • Import JSON: upload a .json file (other formats are rejected).
  • Export JSON: useful for version control and re-importing.
  • Export SVG / Export PNG (HD): for docs and presentations.
Sample JSON: public/samples/data-architecture.aws.sample.json
Troubleshooting
  • If the diagram feels crowded, click Auto-Layout and keep the happy path linear (left → right).
  • If you’re new to diagramming, start with a template and only change labels first. Add details later in the Properties panel.