# How to Configure Cloud Architecture Diagram Templates (AWS, GCP, Azure) in Next AI Draw.io

> Learn to configure AWS, GCP, and Azure cloud architecture diagram templates in Next AI Draw.io. Utilize built-in libraries and XML templates for efficient diagramming.

- Repository: [Dayuan Jiang/next-ai-draw-io](https://github.com/DayuanJiang/next-ai-draw-io)
- Tags: how-to-guide
- Published: 2026-07-13

---

**Next AI Draw.io uses pre-built draw.io (mxGraph) shape libraries stored in `public/img/lib/` to render AWS, GCP, and Azure diagrams, which you can reference via XML templates stored in IndexedDB through [`lib/template-storage.ts`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/lib/template-storage.ts).**

Next AI Draw.io is an open-source diagramming application that leverages the draw.io (mxGraph) rendering engine to generate cloud architecture diagrams. Configuring cloud architecture diagram templates requires understanding how the application bundles SVG shape libraries and how to construct valid mxGraph XML that references these AWS, GCP, or Azure assets.

## Understanding Cloud Shape Libraries in Next AI Draw.io

Next AI Draw.io ships with official cloud provider shape libraries as static SVG assets. You do not need to install these separately—they are already bundled under the `public/img/lib/` directory.

### Asset Locations and Naming Conventions

Each cloud provider follows a specific folder structure and uses distinct mxGraph prefixes when referenced in diagram XML:

| Provider | Asset Folder | mxGraph Prefix | Example SVG Path |
|----------|--------------|----------------|------------------|
| **AWS 4** | `public/img/lib/aws4/` | `mxgraph.aws4` | `img/lib/aws4/compute/EC2.svg` |
| **GCP 2** | `public/img/lib/gcp2/` | `mxgraph.gcp2` | `img/lib/gcp2/compute/Compute_Engine.svg` |
| **Azure 2** | `public/img/lib/azure2/` | `mxgraph.azure2` | `img/lib/azure2/compute/Virtual_Machine.svg` |

## Referencing Cloud Shapes in Diagram XML

When building templates, you must reference these shapes using the correct style syntax. The method differs between AWS (which uses native mxGraph definitions) and Azure/GCP (which use SVG image references).

### Using Native mxGraph Definitions (AWS 4)

AWS shapes use the `mxgraph.aws4` prefix with the `resourceIcon` shape type. Specify the specific resource using the `resIcon` property.

```xml
<mxCell value="ELB"
        style="shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.elb;fillColor=#ED7100;strokeColor=#ffffff;verticalLabelPosition=bottom;verticalAlign=top;align=center;"
        vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="60" height="60" as="geometry"/>
</mxCell>

```

### Using SVG Image Styles (Azure 2 and GCP 2)

Azure and GCP shapes reference the actual SVG files using the `image` style property with an absolute path from the `public` directory.

```xml
<!-- Azure Virtual Machine -->
<mxCell value="VM"
        style="image;aspect=fixed;image=img/lib/azure2/compute/Virtual_Machine.svg;verticalLabelPosition=bottom;verticalAlign=top;align=center;"
        vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="60" height="60" as="geometry"/>
</mxCell>

```

## Creating and Storing Cloud Architecture Templates

Templates in Next AI Draw.io are stored as JSON objects in the browser's IndexedDB via the **[`lib/template-storage.ts`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/lib/template-storage.ts)** module. Each template contains a `prompt` field holding the draw.io XML string.

### Template Structure in IndexedDB

A complete cloud architecture template includes the full mxGraph XML document. Here is an example AWS VPC template:

```json
{
  "title": "Simple AWS VPC",
  "prompt": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<mxfile host=\"app.diagrams.net\">\n  <diagram name=\"Page-1\" id=\"a1b2c3\">\n    <mxGraphModel dx=\"1178\" dy=\"761\" grid=\"1\" gridSize=\"10\" guides=\"1\" tooltips=\"1\" connect=\"1\" arrows=\"1\" fold=\"1\" page=\"1\" pageScale=\"1\" pageWidth=\"827\" pageHeight=\"1169\" background=\"#ffffff\" math=\"0\" shadow=\"0\">\n      <root>\n        <mxCell id=\"0\" />\n        <mxCell id=\"1\" parent=\"0\" />\n        <mxCell value=\"VPC\" style=\"shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.vpc;fillColor=#232F3D;strokeColor=#ffffff;\" vertex=\"1\" parent=\"1\">\n          <mxGeometry x=\"100\" y=\"80\" width=\"120\" height=\"80\" as=\"geometry\" />\n        </mxCell>\n        <mxCell value=\"EC2\" style=\"shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.ec2;fillColor=#232F3D;strokeColor=#ffffff;\" vertex=\"1\" parent=\"1\">\n          <mxGeometry x=\"240\" y=\"80\" width=\"60\" height=\"60\" as=\"geometry\" />\n        </mxCell>\n        <mxCell style=\"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;\" edge=\"1\" source=\"VPC\" target=\"EC2\" parent=\"1\" />\n      </root>\n    </mxGraphModel>\n  </diagram>\n</mxfile>"
}

```

For Azure templates using SVG assets:

```json
{
  "title": "Azure Compute Cluster",
  "prompt": "<mxCell value=\"Virtual Machine\" style=\"image;aspect=fixed;image=img/lib/azure2/compute/Virtual_Machine.svg;verticalLabelPosition=bottom;verticalAlign=top;align=center;\" vertex=\"1\" parent=\"1\"><mxGeometry x=\"0\" y=\"0\" width=\"60\" height=\"60\" as=\"geometry\"/></mxCell>"
}

```

### Storage API Functions

The **[`lib/template-storage.ts`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/lib/template-storage.ts)** file exports functions to manage these templates programmatically:

- **`createTemplate(template)`**: Saves a new template to IndexedDB
- **`getTemplate(id)`**: Retrieves a specific template by ID
- **`updateTemplate(id, updates)`**: Modifies an existing template
- **`duplicateTemplate(id)`**: Creates a copy with a "(copy)" suffix

Example usage:

```typescript
import { createTemplate, getTemplate } from "@/lib/template-storage";

// Create a new AWS architecture template
await createTemplate({
  title: "Three-Tier AWS",
  prompt: `<mxCell value="Load Balancer" style="shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.elb;fillColor=#232F3D;" vertex="1" parent="1"><mxGeometry x="100" y="80" width="80" height="80" as="geometry"/></mxCell>`
});

// Retrieve and use a template
const template = await getTemplate("template-id-123");
console.log(template.prompt); // Contains the XML

```

## Loading Templates into the Editor

When a user selects a template from the UI, the application retrieves the stored XML and injects it into the draw.io editor via the `postMessage` API:

```typescript
import { getTemplate } from "@/lib/template-storage";

async function loadTemplate(id: string) {
  const template = await getTemplate(id);
  if (template?.prompt) {
    window.parent.postMessage(
      { action: "loadDiagram", xml: template.prompt },
      "*"
    );
  }
}

```

Ensure your `prompt` field contains a complete `<mxfile>` document, as the draw.io engine expects the full XML structure when loading.

## Adding Custom Cloud Providers

You can extend Next AI Draw.io to support additional cloud providers beyond AWS, GCP, and Azure.

1. **Create the asset directory**: Add a new folder under `public/img/lib/` (e.g., `alibaba_cloud/`).
2. **Add SVG files**: Place your provider's SVG icons in the appropriate subdirectories.
3. **Choose a prefix**: Define a unique mxGraph prefix (e.g., `mxgraph.alibaba_cloud`).
4. **Reference in XML**: Use either the `image` style for direct SVG references or create a custom shape library JSON if defining native mxGraph shapes.

Note that template creation requires a browser environment with IndexedDB available. The UI checks `isIndexedDBAvailable()` and disables template management on server-side renders.

## Summary

- **Cloud shapes** are pre-bundled SVG assets located in `public/img/lib/aws4/`, `gcp2/`, and `azure2/`.
- **AWS 4** uses native mxGraph definitions with the `mxgraph.aws4` prefix, while **Azure 2** and **GCP 2** use `image` styles pointing to SVG paths.
- **Templates** are stored as JSON objects in IndexedDB via [`lib/template-storage.ts`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/lib/template-storage.ts), with the diagram XML contained in the `prompt` field.
- Use **`createTemplate()`**, **`getTemplate()`**, and **`duplicateTemplate()`** to manage cloud architecture templates programmatically.
- Load diagrams into the editor using the `postMessage` API with `action: "loadDiagram"` and the stored XML string.

## Frequently Asked Questions

### Where are the cloud shape libraries stored in Next AI Draw.io?

The cloud shape libraries are stored as static SVG files in the `public/img/lib/` directory, with subfolders for each provider: `aws4/`, `gcp2/`, and `azure2/`. These assets are served directly and referenced in diagram XML either through mxGraph prefixes or image paths.

### What is the difference between mxgraph prefix and image style references?

**mxgraph prefix** (e.g., `mxgraph.aws4`) is used for native draw.io shape definitions that are compiled into the application's shape libraries, primarily used by AWS 4. **Image style** references (e.g., `image=img/lib/azure2/...`) directly load SVG files from the public directory and are used by Azure 2 and GCP 2 for their icon sets.

### How do I create a reusable AWS architecture template?

Create a JSON object with a `title` and `prompt` field containing valid mxGraph XML that uses `shape=mxgraph.aws4.resourceIcon` styles. Save it using `createTemplate()` from [`lib/template-storage.ts`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/lib/template-storage.ts). The XML must include the full `<mxfile>` structure with `<mxGraphModel>` to be compatible with the draw.io loader.

### Can I add custom cloud provider shapes that aren't AWS, GCP, or Azure?

Yes. Create a new folder under `public/img/lib/` for your provider (e.g., `oracle_cloud/`), add your SVG assets, and reference them using the `image` style with paths like `img/lib/oracle_cloud/service/icon.svg`. You can also define custom mxGraph prefixes by creating shape library definitions, though this requires additional configuration in the draw.io initialization code.