SkyArch AI: Universal Multi-Cloud Diagram Generator

An AI-powered architecture diagramming tool that converts natural language prompts into professional cloud diagrams for AWS, Azure, Google Cloud (GCP), and common DevOps tooling.

Key Features

• Multi-Cloud Native — deep support for AWS, Azure, GCP, and DevOps icons (Terraform, GitHub, Jenkins)
• NVIDIA AI Engine — powered by meta/llama-3.3-70b-instruct via NVIDIA's free API; no cloud account required
• Dual Output Pipeline — PNG preview rendered by Python + native Draw.io XML for full editability
• Terraform IaC — one-click generation of production-ready HCL from any diagram
• Interactive Canvas — drag, edit, and re-sync nodes via React Flow
• Rate-Limited API — 20 req/min per IP; CORS locked to configured origin

Tech Stack

Layer	Technology
Frontend	React 18, TypeScript, Vite, Tailwind CSS, Framer Motion
Backend	Node.js, Express, TSX
AI Engine	NVIDIA API (OpenAI-compatible) — meta/llama-3.3-70b-instruct
Diagram Engine	Python diagrams library + Graphviz
Export	Draw.io XML (dagre layout), PNG (base64)
Infrastructure	Docker & Docker Compose

Getting Started

Prerequisites (Local)

• Node.js 18+
• Python 3.10+ with pip install diagrams
• Graphviz: brew install graphviz / apt-get install graphviz
• A free NVIDIA API key from build.nvidia.com

Local Setup

# 1. Clone and install
git clone <repo-url> && cd aws-diagram-ui
npm install

# 2. Configure environment
cp .env.example .env
# Edit .env and set NVIDIA_API_KEY=your_key_here

# 3. Start backend (terminal 1)
npm run server

# 4. Start frontend (terminal 2)
npm run dev

Open http://localhost:5173.

Docker (Recommended)

The Docker image bundles Python, Graphviz, and all dependencies.

docker run -p 3001:3000 \
  -e NVIDIA_API_KEY=your_key_here \
  -e NODE_ENV=production \
  ashishkasaudhan/aws-diagram-ui:latest

Or with Docker Compose for persistent diagram storage:

services:
  skyarch:
    image: ashishkasaudhan/aws-diagram-ui:latest
    ports:
      - "3001:3000"
    environment:
      - NVIDIA_API_KEY=your_key_here
      - NODE_ENV=production
    volumes:
      - ./generated-diagrams:/app/generated-diagrams

docker-compose up -d

Open http://localhost:3001.

Environment Variables

Variable	Description	Default
NVIDIA_API_KEY	Free API key from build.nvidia.com	(required)
NVIDIA_MODEL	Model to use	meta/llama-3.3-70b-instruct
CORS_ORIGIN	Allowed frontend origin	http://localhost:5173
PORT	Backend server port	3001
NODE_ENV	Set to production to serve built frontend	(unset)

Architecture Flow

1. Prompt — user describes architecture in plain English
2. AI (NVIDIA) — LLM returns a structured JSON (nodes, edges, clusters)
3. Python code gen — utils/pythonConvert.ts converts JSON to diagrams Python code
4. MCP render — universal_diagram_mcp.py injects imports and runs Graphviz → PNG
5. Draw.io gen — src/utils/drawioGenerator.ts converts same JSON to Draw.io XML (dagre layout)
6. Response — PNG (base64) + Draw.io XML + original JSON sent to frontend

How to Add More Icons

1. Register the class in universal_diagram_mcp.py

INSTALLED_IMPORTS = {
    # ...
    "MWAA": "diagrams.aws.analytics",  # add here
}

2. Add an alias if needed (in the inject_imports function)

BAD_ALIASES = {
    # ...
    "Airflow": "MWAA",
}

3. Update the AI prompt in server.ts

Add the new type to the NODE TYPES section of the generateDiagramCode system prompt so the AI knows it can use it.

Editing Diagrams

1. Generate a diagram.
2. Click Export DOT to download the .drawio file.
3. Open in draw.io — File > Open from > Device.
4. All shapes are native Draw.io vector icons — fully editable with connectors.

API Reference

See docs/INTEGRATION_GUIDE.md for full REST API documentation.

Documentation

Doc	Description
Integration Guide	REST API reference and integration patterns
Solution Architecture	Technical deep-dive into the MCP and AI pipeline
Docker Instructions	Containerized setup details
Troubleshooting	Common issues and fixes
Roadmap	Planned features

License

MIT