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

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.

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.

<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.

<!-- 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 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:

{
  "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:

{
  "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 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:

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:

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, 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. 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}