Skip to content
New: present in 16:9 and 9:16

Turn complex ideas into visual stories

Describe a system in a sentence. Diagram Studio draws an editable Excalidraw diagram, then presents it scene by scene for YouTube, courses and Shorts.

Try it with
Online storeDrawing
diagram types
10
presentation formats
2
ways to export
6
shared API keys
0

From a sentence to a presentation

Three steps, and you stay in control of every one.

  1. ServicesHTTPSHTTPSVerifyBrowseCheckoutOrderCreatedWeb appMobile appAPI gatewayAuth serviceCatalog serviceOrder serviceCatalog DBOrders DBEvent bus

    1Describe it

    Write a sentence or a paragraph. The AI writes a validated diagram spec and a layout engine places every component.

    “Create a microservices architecture for an online store”

  2. ServicesHTTPSHTTPSVerifyBrowseCheckoutOrderCreatedLookupOn missWeb appMobile appAPI gatewayAuth serviceCatalog serviceOrder serviceCatalog DBOrders DBEvent busRedis cache

    2Shape it

    Drag things on a real Excalidraw canvas, or ask for a change. You see a preview before anything moves.

    “Put a cache in front of the catalog database”

  3. ServicesHTTPSHTTPSVerifyBrowseCheckoutWeb appMobile appAPI gatewayAuth serviceCatalog serviceOrder service2 / 4Small services, one job eachAuth, catalog and orders deploy and scale independently.

    3Present it

    Scenes reveal one idea at a time, with highlights and a camera that follows the story.

    “4 scenes, 16:9 and 9:16”

One diagram, two stages

Portrait gets its own layout and camera, not a crop. Your scenes stay in sync across both.

ServicesHTTPSHTTPSVerifyBrowseCheckoutWeb appMobile appAPI gatewayAuth serviceCatalog serviceOrder service2 / 4Small services, one job eachAuth, catalog and orders deploy and scale independently.
16:9 for YouTube, courses and slides
ServicesHTTPSHTTPSVerifyBrowseCheckoutWeb appMobile appAPI gatewayAuth serviceCatalog serviceOrder service2 / 4Small services, one job eachAuth, catalog and orders deploy and scaleindependently.
9:16 for Shorts, Reels and TikTok

2 of 4Small services, one job each

Leave with files, not screenshots

Everything here is rendered from the diagram you picked, exactly like your exports.

1 / 4One front doorEvery client talks to a single API gateway.
0:00 / 0:12
online-store-architecture.mp4MP4, 1920 × 1080, for YouTube and courses
ServicesHTTPSHTTPSVerifyBrowseCheckoutLookupOn missWeb appMobile appAPI gatewayAuth serviceCatalog serviceOrder serviceCatalog DBOrders DBRedis cache3 / 4Hot reads stay fastCatalog lookups hit the cache first; each serviceowns its data.
online-store-architecture-shorts.mp4MP4, 1080 × 1920, for Shorts, Reels and TikTok
  1. HTTPSHTTPSWeb appMobile appAPI gateway1 / 4One front doorEvery client talks to a single API gateway.
    scene-1.png
  2. ServicesHTTPSHTTPSVerifyBrowseCheckoutWeb appMobile appAPI gatewayAuth serviceCatalog serviceOrder service2 / 4Small services, one job eachAuth, catalog and orders deploy and scale independently.
    scene-2.png
  3. ServicesHTTPSHTTPSVerifyBrowseCheckoutLookupOn missWeb appMobile appAPI gatewayAuth serviceCatalog serviceOrder serviceCatalog DBOrders DBRedis cache3 / 4Hot reads stay fastCatalog lookups hit the cache first; each service owns its data.
    scene-3.png
  4. ServicesHTTPSHTTPSVerifyBrowseCheckoutOrderCreatedLookupOn missWeb appMobile appAPI gatewayAuth serviceCatalog serviceOrder serviceCatalog DBOrders DBEvent busRedis cache4 / 4Events tie it togetherServices react to each other through the bus, not direct calls.
    scene-4.png
online-store-architecture-scenes.zipEvery scene as PNG and SVG, for slides and thumbnails
ServicesHTTPSHTTPSVerifyBrowseCheckoutOrderCreatedLookupOn missWeb appMobile appAPI gatewayAuth serviceCatalog serviceOrder serviceCatalog DBOrders DBEvent busRedis cache
online-store-architecture.png, .svg and .excalidrawThe diagram itself, for docs, READMEs and further editing

Why Diagram Studio

Built for people who explain systems for a living.

Structure first

The AI writes a validated diagram spec and a layout engine places everything, so diagrams come out tidy instead of tangled.

Real Excalidraw

Every diagram is a native, hand-drawn Excalidraw canvas. Move it, restyle it, extend it.

Edits you approve

Ask for a change in plain words. It arrives as a preview, and parts it doesn’t touch stay put.

Version history

Every AI change is saved as a version you can restore in one click.

Scene builder

Reveal, highlight and dim step by step. Drag scenes to reorder.

Camera per format

Landscape and portrait each get their own layout and framing.

Your key, your model

Your own Gemini key, encrypted, or local models through Ollama.

Questions

Still curious? Here’s the short version.

Do I need an AI key?

You need one of two: your own Gemini API key from Google AI Studio, or Ollama running on your computer. You choose in Settings and can switch at any time.

Can I edit the diagram myself?

Yes. Diagrams are native Excalidraw drawings. Move things, restyle them, add shapes and arrows. Labelled shapes you draw become part of the diagram the AI understands.

Will the AI overwrite my changes?

No. Changes arrive as a preview you apply or discard. Components it doesn’t touch keep their position and style, and every AI change is saved as a version you can restore.

Is the portrait version just a crop?

No. Portrait gets its own vertical layout and camera. You can drag components to fine-tune each format separately, and scenes stay in sync across both.

What can I export?

PNG, SVG and .excalidraw files of the diagram, an image of every scene, project data as JSON, and MP4 video in 16:9 or 9:16.

Where is my data stored?

Projects are stored with per-user access rules, so nobody else can read your diagrams. Gemini keys are encrypted and never shown again. With Ollama, prompts go from your browser straight to your own computer.

What do you want to explain?

Write it here, sign in with Google, and your prompt will be waiting.