⚡ 100% Web-Based • No Installation

The Ultimate Architectural Diagramming Tool

Generate instant site context, perfectly accurate sun paths, and animated diagrams in seconds. The power of pro software, right in your browser.

✓ Free & PRO Plans✓ 14-Day Free PRO Trial✓ No Credit Card & No Auto-Billing

Express Mode Auto-Setup

⚡ NEW: 1-Click Express Mode

Total Automation in 1 Click

Say goodbye to manual configurations! Simply enter your project's address and let Express Mode instantly generate a fully optimized 3D solar and wind diagram in seconds. We automatically sync with SunCalc and NASA climate databases to provide highly accurate, location-based wind arrows and weather data, saving you 90% of setup time.

📱 Works Everywhere

Touch-Optimized for iPad & Tablets

Design on the go. Archi Diagram Web App is fully optimized for touch displays. Pan, zoom, and draw seamlessly on your iPad without installing any software.

3D Context Buildings

Terrain Contours

1

1-Click Context Map & Topography

Stop wasting hours modeling surroundings. Simply type an address, and ArchiDiagram instantly fetches perfectly scaled 1:1 satellite maps, 3D context buildings, automatic 3D trees, terrain elevation, and contour lines for your site.

Auto-Generate by Location

Customizable Styles

2

Automated Sun Path & Shadows

Get 100% physically accurate solar analysis anywhere on Earth. The sun path dynamically updates based on your coordinates and auto-adjusts for Timezones and Daylight Saving Time. Fully customize the look to match your presentation style.

Interactive 3D Objects

3

Lightning-Fast Diagram Symbols

Drag and drop from our expanding library of dynamic, architectural-grade symbols. Add wind arrows, compasses, and annotations instantly. Modify scale, shape, and color on the fly with buttery-smooth transitions.

Viewport & Visual Settings

4

Total Visual Control

Tailor the 3D viewport to your exact presentation needs. Instantly switch between Light & Dark themes, customize background colors, toggle grid lines, and manage on-screen HUD notes with absolute precision.

1-Click Graphic Themes & Cloud Styles

5
🎨 NEW IN V3.0: Diagram Styles

1-Click Graphic Themes & Personal Cloud Styles

Switch your entire diagram's aesthetic in a single click using curated System Presets. Craft your studio's custom graphic look once and click Save Style to sync it directly to your cloud account.

Automated Multi-Frame Presentation Boards

6
✨ NEW IN V3.0: Smart Export

Automated Multi-Frame Solar & Climate Boards

Skip hours of manual layout in Photoshop or InDesign. Open Smart Export to automatically compose complete architectural boards, comparing 3 hours of the day across seasonal months or overlaying multi-hour shadows from 07:00 to 18:00, exported as high-res JPG or PDF up to 5K Ultra HD.

Render Cinematic Videos & PDFs

7

One-Click Cinematic Export

Ready to present? With just a click, automate the final product. Render stunning high-res images, PDFs, or even cinematic 360° video fly-throughs with animated shadows directly from your browser, with no external rendering engines needed.

📚 STEP-BY-STEP GUIDES

Learn & Master

Follow our step-by-step tutorials to master site analysis, solar studies, and architectural diagrams in minutes.

3D Urban Context Site Analysis Diagram with Sun Path and Wind Arrows in ArchiDiagram Web App

Urban Context Diagram

Create site diagrams for flat urban areas with surrounding 3D buildings.

3D Mountain Terrain and Contour Lines Site Analysis Diagram in ArchiDiagram PRO

Complex Terrain Analysis

Generate site analysis diagrams for mountainous and complex topography.

Architectural Shadow and Daylight Study Diagram Across Solstices and Equinoxes

Shadow & Daylight Study

Architectural microclimate and shadow study. Inspect seasonal solstice shadows, daylight ingress, and solar exposure across building facades.

ArchiDiagram Web App Comprehensive Features Guide and Studio Mode Documentation

Comprehensive Features Guide

Master every tool, slider, and setting in the ArchiDiagram Web App.

Explore Knowledge Base →
🎨 INSPIRATION

Sample Projects Created with Archi Diagram App

Explore professional diagram examples created entirely within our web platform.

💡 OFFICIAL KNOWLEDGE BASE (47 Q&As)

Frequently Asked Questions

Complete technical answers on Sun Path, NASA Wind Data, True North, 3D/2D Imports, Smart Export Boards, and Account Tiers.

🤖 Need an instant answer? Ask the built-in AI Bot directly inside App.ArchiDiagram.com! All of our official documentation and workflow data have been fully trained into the AI, so you will always get accurate, reliable answers without worrying about random or incorrect responses. If you prefer to look up answers manually, please browse or search the FAQ section below.

⚡1. Getting Started, Modes & Navigation8

Do I need to install any software to use ArchiDiagram Web App?
No installation or plugins are required. ArchiDiagram Web App (app.archidiagram.com) runs directly in your web browser on Windows, Mac, iPad, and tablets, supporting 16 languages.
Is ArchiDiagram Web App free to use?
Yes! ArchiDiagram App comes in two versions: Free and PRO. The Free Plan is highly capable and provides all the essential utilities needed to complete a full diagram, including solar data, wind data, animations, and both image and presentation board exports. The PRO Plan unlocks more powerful customization, such as creating diagrams with complex 3D terrain (hills, mountains, and contour lines), a much richer Dynamic Symbols library (beyond the basic arrows in the Free tier), and powerful MP4 Video export. Best of all, newly registered users automatically receive a 14-Day Free PRO Trial with no credit card required, so you will never be charged automatically when the 14-day trial ends (your account simply returns to the Free Plan).
What is the difference between Express Mode and Studio Mode, and how do I switch?
  • Express Mode: Enter your project's address to auto-generate a 3D solar and NASA wind diagram in 1 click.
  • Studio Mode: Unlocks the full Top Toolbar and all 8 Left Panel customization sections.
  • How to Switch: Click the Express | Studio toggle at the top of the Left Panel (below your User Avatar). Your current project stays intact.
How does the Web App differ from your SketchUp plugins?
Our SketchUp plugins are designed for projects where you need to keep heavy, detailed 3D models that cannot be exported. In contrast, the web-based ArchiDiagram App is optimized for convenience, updated frequently, and offers a cleaner interface with many more built-in utilities because it is not limited by the SketchUp environment.
How do I get a True North Top View (Plan View)?
Switch to Studio Mode and click VIEWS → Top on the Top Toolbar to snap the camera straight down from above with North (N) positioned at the top.
How do I zoom back if my diagram disappeared off-screen?
In Studio Mode, click VIEWS on the Top Toolbar and select any view (Top, Front, Isometric, or Perspective) to automatically re-center and zoom the camera back to your diagram.
How do I change the app language?
Click the Globe icon dropdown on the bottom-right of the Footer (next to the Light/Dark theme toggle) to choose from 16 supported languages.
Where can I get instant help while using the Web App?
We recommend using the built-in AI Bot directly inside app.archidiagram.com for instant answers. All of our official feature data and workflows have been thoroughly trained into the AI, so you can rely on it to give accurate, step-by-step guidance without making up random or incorrect answers.

🧭2. Location, True North, Map & 3D Site Context10

How do I change my project's location, address, or coordinates?
In Studio Mode, open Location & Context → Change Location (or click CHANGE next to Location in Express Mode). Enter a city/address or paste Lat, Lng coordinates, drag the red center pin onto your site, and click Confirm Location.
How do I pinpoint a specific campus, school, or building with 100% accuracy?
  1. Method 1 (Search City + Drag Map): Type your City name in Map Location Search, press Enter, zoom in and drag the map pin onto your exact lot, and click Confirm Location.
  2. Method 2 (Paste Google Maps Coordinates): Right-click your site on Google Maps to copy its Latitude, Longitude (e.g., 15.4895, 120.9734), paste it into Map Location Search, press Enter, and click Confirm Location.
How do I align the satellite map with my 3D model or adjust True North?
Switch to Studio Mode, open Location & Context in the Left Panel, and drag the True North (Offset North) slider (-180° to 180°). This rotates the Compass, 3D Sunpath, and 1:1 Satellite Map together around your fixed 3D model.
How do I add a North symbol or Compass to my diagram?
Your diagram already includes a built-in Compass at the base of the 3D Sunpath (toggle via Studio Mode → Sun Diagram → Style → Compass). If you want an extra standalone compass, select one from Dynamic Symbols → Location & Compass → Compass and rotate it manually with ROTATE.
How do I move the map, shift the diagram center (3D Sunpath), or adjust height?
In Studio Mode, click the 3D Sunpath in the viewport, click MOVE on the Top Toolbar, and drag the X, Y, Z arrows (for example, drag the Pivot up to shift the map down, or drag the vertical Y arrow to adjust elevation). The map updates 3 seconds after releasing the mouse.
How do I draw site limits (site boundaries)?
Switch to Studio Mode, click DRAW on the Top Toolbar, and click point-by-point on the map to trace your site boundary (click the green start point to close a polygon, or click DONE for an open line).
Why is the Diagram Radius limited to R = 1500m?
You can adjust Diagram Radius up to R = 1500m in Location & Context. This maximum scale is optimized so 3D context buildings do not appear too tiny, shadows retain high precision, and the satellite map stays sharp.
How do I make the center site map sharper on large diagrams (R = 1500m)?
Open Global Settings → Viewport Display and click + Background Image to place a high-res close-up map image at the center [0, 0, 0] with an automatic circular feathered blend.
How do I generate and customize 3D Context Buildings & 3D Trees (or hide specific buildings/trees)?
In Studio Mode → Location & Context (or SETTINGS ▼ in Express Mode), check 3D Context Building & Trees and click Update 3D Context (or Fetch 3D Context). You can independently toggle Show 3D Buildings (customizing Building Color, Height Scale, Building Opacity, Foundation Depth, and Show Edges) and Show 3D Trees (automatically placing 3D trees across parks and satellite vegetation with customizable Tree Color, Tree Scale, Tree Density, and Tree Opacity). To hide specific buildings or trees on your project site, right-click any building or tree in the 3D viewport and select Hide, or click Select Hide (and restore anytime with Unhide Last or Unhide All).
How do I enable 3D Terrain and Contour Lines?
In Studio Mode → Location & Context, check Enable Context Map, then check Enable 3D Terrain (PRO) and Show Contour Lines.

☀️3. Sun Path, Solar Accuracy, Shadows & NASA Wind Data8

How accurate is the Sunpath, and does it account for Daylight Saving Time (DST)?
Solar data is powered by SunCalc (www.suncalc.org), and our DST algorithm automatically checks whether your location uses Daylight Saving Time to display the exact UTC offset for your selected date (shown directly on the diagram and in the Notes block). You can also override it manually in Sun Diagram → Parameters if a country or region has recently stopped using DST before the database is updated.
How do I inspect solar positions at the solstices and equinoxes (Altitude & Azimuth)?
ArchiDiagram focuses on visual 3D solar trajectories and real-time shadow casting rather than numeric degree readouts. Simply open Sun Diagram → Shadow in Studio Mode (or use the Date and Time of Day sliders in Express Mode) and select June 21, December 21, or March 21 / September 21.
How do I increase or decrease (scale) the Sun path size or Auto wind arrows?
Open Global Settings → Global Scale in the Left Panel (in Studio Mode, or SETTINGS ▼ → Global Scale in Express Mode) and drag the Global Scale slider.
How do I display automatic Wind Arrows (NASA Wind Data) on my diagram?
In Studio Mode, open Global Settings in the Left Panel and check Auto wind arrows (or type wind in the Left Panel search box). In Express Mode, check Import auto wind arrows into 3D model in the Left Panel.
How do I create Shadow Diagrams?
In Studio Mode, open Sun Diagram → Shadow to select your desired Month(s), Day, and Time for real-time 3D shadows, or open SMART EXPORT to generate multi-hour or seasonal shadow comparison boards automatically.
How do I customize wind directions if local site winds differ from automatic NASA data?
Automatic wind data is fetched from NASA satellites based on your coordinates, so first verify that your exact location is set in Location & Context → Change Location. To place custom wind directions manually, switch to Studio Mode, uncheck Auto wind arrows in Global Settings, and place movable/rotatable wind arrows from Dynamic Symbols.
Why does a month on the Sunpath still display in Red after I change its Month Color?
The month currently selected for viewing shadows in Sun Diagram → Shadow always highlights using the Sun Color (default: Red). Switch to another shadow month to see its custom Month Color, or change Sun Diagram → Style → Sun Path Colors → Sun Color.
How do I animate the Sun Diagram or Wind Diagram and export an MP4 video?
Click ANIMATION on the Top Toolbar (Studio Mode) or in the Left Panel (Express Mode) to play animations. To download as an MP4 video, switch to Studio Mode, open Export, select VIDEO under Export Format, and click Export VIDEO.

📦4. Importing 3D/2D Models, SketchUp (.glb) & Writing 3D Text6

Can I import my own custom 3D models?
Yes! PRO users can upload .glb or .gltf models (in Meters, max 10MB) via Studio Mode → Import → + Choose 3D File (.glb, .gltf). Free users can build massing using the built-in BASIC SHAPES.
Do I need a converter to export .glb files from SketchUp?
No converter is needed. SketchUp exports directly to *.glb by default via File → Export → 3D Model... and selecting *.glb.
How do I import 2D images (JPG, PNG, SVG) or CAD drawings?
In Studio Mode → Import, click + Choose 2D File (.jpg, .png, .svg). For CAD .dwg/.dxf plans, export them from CAD as .svg, .png, or .jpg first before uploading.
Why does my imported transparent PNG have a black rectangular shadow underneath?
That dark rectangle is the 3D shadow cast by the image plane. Select the image in Studio Mode, open Object Properties on the left, and uncheck Cast Shadow.
Can I write text, street names, or annotations directly onto the 3D diagram?
Yes! In Studio Mode → Dynamic Symbols → Location & Compass, select Text or Pin, click on the diagram to place it, and type your text in Object Properties → TEXT NOTE. Uncheck Always Face Camera to lay text flat on the map and rotate it along streets with ROTATE, or set OPACITY to 0 for borderless text.
Can I add context elements like trees, cars, or people?
Yes! You can place individual 3D Trees (Tree 01, Tree 02, Tree 03), Cars (Car 01), and People (People 01, People 02) directly from Studio Mode → Dynamic Symbols → Others, or automatically generate surrounding 3D Context Trees in 1 click via Location & Context → 3D Context Building & Trees → Show 3D Trees. PRO users can also import custom .glb models via the Import panel.

🎨5. Background Color, Diagram Styles, Smart Export & Video6

How do I change the background color of my diagram (e.g., from dark navy blue to white)?
Switch to Studio Mode, open Global Settings → Viewport Display at the top of the Left Panel, and click the Background: color picker to choose white or any custom color. If you want to change both the background color and the entire graphic palette in 1 click, you can also select a preset inside Diagram Styles.
How do I change the graphic theme in 1 click or save my own custom Cloud Style?
In Studio Mode → Diagram Styles, click any preset card (System Light/Dark themes, Community styles, or My Cloud Styles) to transform your diagram's look in 1 click. Click Save Style at the bottom to save your own preset to the cloud (up to 3 on Free, 10 on PRO), or click Reset Settings to restore defaults.
How do I generate automated A3 / Tabloid / Letter presentation boards (or export for Canva)?
Click the blue SMART EXPORT button in Express Mode (or Open Smart Export → at the bottom of the Export panel in Studio Mode):
  • Style 1: 3-Frame Sequence: Compares 3 hours across 1 to 3 months (3, 6, or 9 frames) with synced sunpaths, shadows, and seasonal wind arrows.
  • Style 2: Composite Multi-Shadow: Overlays multi-hour shadows (07:00 to 18:00) onto 1 large frame.
  • Exports print-ready A3, Tabloid, or Letter sheets (JPG / PDF) with a full ARCHI DIAGRAM / NOTES title block and climate table, ready to print or drop into Canva/PowerPoint.
Which resolution is best when exporting JPG or PDF (2K-3K vs. 5K)?
We recommend 2K - 3K for both digital presentations and printing, as it delivers crisp quality and renders quickly on all devices. 5K Ultra HD (Paid PRO) is best reserved for high-end desktop computers.
Where are exported MP4 videos saved on iPad and iPhone?
On iPhone and iPad (iOS/iPadOS), exported MP4 videos save to your Downloads folder. Tap the ↓ icon next to the browser Address Bar and open the video inside the native Files app (Downloads folder).
Why did my Video or PDF export freeze or stop halfway?
Modern browsers pause 3D rendering when a tab is minimized or hidden. Please keep the ArchiDiagram browser tab open and visible on screen until your export finishes.

📂6. Saving/Opening .archi Files, Layers & Cloud Storage4

How do I save my project to the Cloud or my computer?
Click FILE ▼ at the top-left of the Left Panel and select Save to Cloud or Save Local (downloads a .archi file to your device).
How do I open a local .archi project file?
Click the Home icon (top-left, right below FILE ▼) to go to the Home screen, then click Open Local Project on the left sidebar and select your .archi file.
Why can't I select or move objects on a layer?
Open LAYERS on the Top Toolbar (in Studio Mode) and click the Padlock icon to unlock/lock layers, or right-click a layer and select Isolate. Note that Free accounts can view, but cannot move or edit, PRO objects inside shared files.
How do I free up my Cloud Storage quota?
Open Studio Mode → Import → My Library (Uploads) and click Clean up unused files, or delete old projects in Home → My Cloud Projects.

💎7. Free & PRO Plans, 14-Day Free PRO Trial & Billing5

What is the difference between the Free Plan, the 14-Day Free PRO Trial, and the Paid PRO Plan?
  • Free Plan: Includes solar data, NASA wind data, animations, 30MB Cloud Storage, up to 15 objects/project, 3 Cloud Styles, 3 Sunpath months (Jun, Sep, Dec), and 2K JPG/PDF & presentation board exports with watermark.
  • 14-Day Free PRO Trial (Automatic on Sign-Up, No Credit Card & No Auto-Billing): Unlocks all Studio PRO tools (complex 3D terrain & contour lines, all 12 Sunpath months, custom .glb 3D & 2D imports, full Dynamic Symbols library, 10 Cloud Styles, Smart Export PDF, and MP4 Video) up to 3K resolution. Because no credit card is required, there is zero automatic charge when the 14-day trial ends.
  • Paid PRO Plan ($5/mo, $29/yr, or $79 Founder's Edition (Lifetime)): Unlocks 4K & 5K Ultra HD exports, removes the watermark, and expands Cloud Storage to 300MB.
Do I need to cancel my 14-Day Free PRO Trial to prevent automatic billing?
No, you will never be charged automatically when your 14-day PRO trial ends because the 14-day trial requires no credit card. You do not need to cancel anything or even open the app. After 14 days, your account simply returns to the Free Plan automatically.
How do I cancel my Paid PRO subscription or download invoices?
Click Manage Billing in the bottom-left Profile section on the Home screen (or click your User Avatar → Manage Billing inside the workspace) to open your Lemon Squeezy Customer Portal in 1 click. When you cancel, your status shows PRO (Cancelled) with your expiration date, and you keep full PRO access until the end of your billing period.
How do I reset my forgotten password?
Click Forgot password? in the Sign In window to receive a reset link via email (or click Continue with Google if you registered with Google).
Does ArchiDiagram have a Creator or Affiliate Partner Program?
Yes! Content creators, architectural educators, and studio partners can apply to join our official Affiliate Partner Program (archidiagram.com/affiliates) to receive custom referral links for both the ArchiDiagram Web App and our SketchUp plugins.
🚀 FREE PLAN + 14-DAY FREE PRO TRIAL

Ready to elevate your presentations?Start with our Free Plan, or sign up in seconds to receive an automatic 14-Day Free PRO Trial (unlocking 3D terrain, contour lines, custom 3D imports, and MP4 video export). No credit card is required, so you will never be charged automatically when your 14-day PRO trial ends.

START CREATING FOR FREE