Azure Architecture Diagram Builder

<div align="center">

A professional AI-powered tool for designing, validating, and deploying Azure cloud architectures

Live Demo • Short Link • Documentation • Report Bug

</div>

---

👤 Author

Arturo Quiroga
Senior Partner Solutions Architect (PSA) - Microsoft

---

📖 Overview

Azure Architecture Diagram Builder is an enterprise-grade web application that empowers cloud architects to design, visualize, validate, and deploy Azure solutions. Leveraging 14 AI models across multiple providers — GPT-6.1 Sol, GPT-6 Sol, GPT-6 Luna, GPT-6 Astra, GPT-5.6 Sol, GPT-5.6 Terra, GPT-5.6 Luna, Claude Opus 5.5, Claude Sonnet 5.5, MAI-Thinking-1, DeepSeek V4 Pro, Grok 4.7, Mistral Large 3, and Kimi K2.6 (via Azure OpenAI, Anthropic, and Azure AI model deployments on Microsoft Foundry) — it transforms natural language descriptions into professional architecture diagrams while providing real-time cost estimates, Well-Architected Framework validation, multi-model comparison, and Infrastructure as Code generation.

Beyond editable topology diagrams, the app can also produce polished, whiteboard-style Blueprint diagrams (BETA) as shareable PNGs — ideal for presentations and design reviews.

Why This Tool?

• Speed: Go from idea to deployable architecture in minutes, not hours
• Accuracy: Official Azure icons, real-time pricing from Azure Retail Prices API
• Best Practices: Built-in WAF validation ensures your architecture follows Microsoft recommendations
• Actionable Output: Generate deployment guides with Bicep/ARM templates ready for production

🎯 Scope & Intended Use

This tool is designed for greenfield Azure architecture design — sketching, validating, and costing new solutions, and as an accelerator in architecture-design sessions and technical workshops. It supports Azure services only.

The WAF validation produces a diagram-only, design-time signal intended to guide new designs. It is not an audit of a deployed environment, and it is not intended for direct deployment into existing, complex customer environments without further validation and review by a qualified architect.

---

✨ Key Features

🤖 AI-Powered Architecture Generation

Describe your architecture in plain English and let any of 14 AI models (GPT-6.1 Sol, GPT-6 Sol, GPT-6 Luna, GPT-6 Astra, GPT-5.6 Sol, GPT-5.6 Terra, GPT-5.6 Luna, Claude Opus 5.5, Claude Sonnet 5.5, MAI-Thinking-1, DeepSeek V4 Pro, Grok 4.7, Mistral Large 3, or Kimi K2.6) automatically create a complete, professionally organized diagram with logical service groupings.

22 curated example prompts across 7 categories — each shown as a card with a short outcome summary, the app capabilities it demonstrates, and a size hint (Compact / Standard / Large) so you can pick by effort. Use View full prompt to read the brief before loading it:

• Start here — three-tier web app, serverless event processing
• Private connectivity & security — private endpoints, Front Door with a WAF policy, Zero Trust segmentation
• AI & agents — enterprise RAG, private Foundry assistant, document processing
• Apps & scale — microservices on AKS, multi-region active-active
• Data & analytics — lakehouse, streaming, and warehouse patterns
• Microsoft Fabric — Eventstream, Eventhouse, Lakehouse, and Real-Time Intelligence
• Industry scenarios — HIPAA healthcare, e-commerce, industrial IoT

🖼️ Architecture Image Import

Upload an existing architecture diagram image (screenshot, whiteboard photo, or exported PNG) and let AI analyze it to recreate the architecture as an editable, interactive diagram with proper Azure service mapping.

💬 Architecture Chat (Conversational Refinement)

Refine your diagram through a natural back-and-forth conversation instead of one-shot prompts. Click the Chat button in the toolbar to open a docked side panel where you can iterate in plain English:

• Type changes like "add Azure Front Door with WAF" → "now make it zone-redundant" → "add a Redis cache between the API and the database"
• Each turn reads the live canvas as the source of truth, so follow-up requests naturally build on previous ones
• The assistant replies with a concise summary of what changed (services added/removed)
• Every change is auto-saved to version history, so you can step back at any time
• Suggestion chips help you get started, and the panel shows which model is active

✏️ Blueprint Diagrams (BETA)

Generate a hand-drawn, whiteboard-style blueprint of your architecture — nested zones (Azure / VNet / On-prem) with numbered, labeled arrows that trace the end-to-end flow, just like an architect explaining a system at a whiteboard. Three generation modes are available in the AI Generator modal:

• Topology — the classic deployable, editable diagram on the canvas
• Blueprint (BETA) — a polished whiteboard-style PNG (the PNG is the deliverable; re-download any time via Export > Export Blueprint PNG)
• Both (BETA) — a deployable topology and a Blueprint PNG from the same prompt, optionally generated in parallel

Blueprint and Both modes require a general-purpose OpenAI model (GPT-5.x). The app auto-switches if a third-party model is selected. A configurable legend position keeps the output presentation-ready.

📋 ARM Template Import

Import existing ARM templates and automatically visualize your current infrastructure. The AI parses resource dependencies and creates meaningful diagrams. A glowing purple banner provides visual feedback during parsing.

🎯 Well-Architected Framework Validation

Validate your architecture against all five WAF pillars:

• Security — Identity, encryption, network isolation
• Reliability — High availability, disaster recovery
• Performance — Scaling, caching, optimization
• Cost Optimization — Right-sizing, reserved instances
• Operational Excellence — Monitoring, automation

Select specific recommendations and automatically regenerate an improved architecture. During analysis, a dismiss hint lets you close the panel and return later via the Validation Score button in the toolbar.

🔀 Multi-Model Comparison

Compare AI output side-by-side across all 15 supported models when their deployments are configured:

• Architecture Comparison — Run the same prompt through multiple models and compare service counts, connection counts, groups, workflow steps, token usage, and latency
• Validation Comparison — Run WAF validation across models and compare overall scores, pillar-level scores, severity breakdowns, finding counts, and quick wins. An inline WAF info box explains the five pillars being assessed
• Save All Diagrams — Download each model's architecture as a separate JSON file
• Save Comparison Report — Download a combined JSON report for offline analysis
• Present Critique — Click "Present" to have a talking avatar narrate the AI ranking with live word-by-word closed captions (requires VITE_SPEECH_REGION)
• Apply Winner — Pick the best result and apply it to the canvas with one click

🎙️ Avatar Presenter

After completing a model comparison, use Present Critique to have a photorealistic talking avatar narrate the AI ranking results aloud — or click Narrate in the Workflow Panel to have the avatar walk through every architecture step:

• A 3D avatar appears in a draggable, resizable floating panel — grab the header to reposition anywhere on screen, drag the bottom-right corner to resize
• Choose your narrator in Settings → Narrator: 13 full-body avatars (Lisa, Harry, Lori, Max, Meg in several styles), 15 photo avatars (including the preview Marcel, George and Leonie in supported Speech regions) and 12 neural voices, with a live Preview. Deployments can add their own custom avatar via VITE_AVATAR_CUSTOM_* (see .env.example)

🖼️ Draggable Reference Image Viewer

When a sketch or image is uploaded for AI generation, the reference image stays visible as a floating panel:

• Drag by the header bar to reposition anywhere on the canvas
• Resize by dragging the purple corner handle — scales from 160 × 110 px up to 700 × 700 px
• Expand to full-screen overlay for detail
• Collapse to a small pill to stay out of the way
• Live word-by-word closed captions highlight each spoken word in real time, synchronized via the Speech SDK wordBoundary event
• Keyless authentication — no API keys stored; a lightweight Express.js token server runs co-located with nginx inside the container, acquiring an AAD token via DefaultAzureCredential (Azure Managed Identity) and returning it as aad#{resourceId}#{aadToken} on each request
• The "Present" / "Narrate" buttons are only visible when VITE_SPEECH_REGION is configured at image build time; no UI impact when not set

🗂️ Collapse All Groups

Toggle button to collapse or expand all groups at once for a bird's-eye view of the architecture. Restores original group sizes on expand.

🔄 Workflow Animation & Data Flow

Visualize how data flows through your architecture step-by-step:

• Interactive step-by-step walkthrough of the architecture
• Service highlighting — each step highlights the involved services on the canvas
• Animated connections showing data flow direction
• AI-generated descriptions for each workflow step
• Narrate button (when Speech is configured) — avatar speaks all steps aloud with live closed captions in a draggable, resizable panel

📄 Deployment Guide Generation with Bicep

Generate comprehensive deployment documentation including:

• Prerequisites and Azure resource requirements
• Step-by-step deployment instructions
• Bicep templates for each service (Infrastructure as Code)
• Post-deployment verification steps
• Security configuration recommendations
• Grounded in Microsoft Learn — before generating, the app searches official Microsoft Learn documentation for your services (via a server-side proxy to the Microsoft Learn MCP endpoint) and feeds the results into the model so commands, API versions, and Bicep schemas reflect current docs. A “Grounded with Microsoft Learn” references section lists the cited pages, which are also included in the exported Markdown. Grounding is best-effort: if docs are unavailable the guide still generates.

💰 Real-Time Multi-Region Cost Estimation

Get instant cost estimates across 14 bundled Azure regions:

• 🇺🇸 East US 2 · 🇺🇸 Central US · 🇺🇸 West US 2
• 🇨🇦 Canada Central · 🇧🇷 Brazil South · 🇲🇽 Mexico Central
• 🇳🇱 West Europe · 🇮🇪 North Europe · 🇬🇧 UK South · 🇸🇪 Sweden Central
• 🇸🇬 Southeast Asia · 🇯🇵 Japan East · 🇮🇳 Central India · 🇦�