Building an AI Architecture Generator with Ollama and draw.io MCP

Visualizing system architecture is a critical part of software engineering, yet the tooling often feels manual and slow. In this post, I'll walk through how I built SketchStack, a tool that uses a local Large Language Model (LLM) to automate diagram generation.

We leverage Ollama for running Llama 3.2 locally and the draw.io Model Context Protocol (MCP) to interact with the diagramming engine.

The Problem

LLMs are great at text, but poor at spatial reasoning. Asking ChatGPT to "draw a diagram" usually results in:

1. ASCII art (hard to edit)
2. Mermaid.js code (good, but visually limited)
3. Hallucinated image files

We wanted the standard: Editable draw.io XML.

Architecture Overview

The system is a Node.js web app composed of three main agents:

1. Extraction Agent: Parses user prompts into structured JSON (Components & Relationships).
2. Layout Engine: Calculates logical positions based on "layers" (e.g., Load Balancers → App Servers → Databases).
3. XML Builder: Converts the structured data into mxGraph XML format.

Step 1: Intelligent Extraction (The Prompt)

We use Llama 3.2 via Ollama. The challenge is getting deterministic JSON. We use a few-shot prompt strategy:

// strict extraction prompt
const  systemPrompt  =  `
You are an expert software architect.
Extract system components and relationships from the description.
Output strictly in this JSON format:
{
 "components": [{ "id": "c1", "name": "API Gateway", "type": "gateway" }],
 "relationships": [{ "from": "c1", "to": "c2", "label": "routes to" }]
}
`;

Step 2: The Layout Engine

Instead of using complex force-directed graph algorithms, we used a Layer-Based Approach which mirrors how humans draw systems:

• Layer 1 (Ingress): CDNs, DNS, WAF
• Layer 2 (Gateway): API Gateways, Load Balancers
• Layer 3 (Compute): Web Servers, Workers, Lambda
• Layer 4 (Data): Databases, Cache, Object Storage

We assign each extracted component to a layer and calculate

(x, y) coordinates dynamically.

Step 3: Generating draw.io XML

This is where the magic happens. We construct the MXFile XML directly.

// simplified XML generation
const  nodeXml  =  `
<mxCell id="${id}" value="${name}" style="${getStyle(type)}" vertex="1" parent="1">
 <mxGeometry x="${x}" y="${y}" width="120" height="60" as="geometry"/>
</mxCell>
`;

To make it look professional, we implemented a Clean SaaS Theme using custom fill colors, stroke widths, and the specific sketch=0 style for a crisp look.

The Result

A tool where you can type "Twitter clone architecture" and get a fully editable, layered diagram in seconds.

Combining the reasoning capabilities of local LLMs with structured protocols like MCP allows us to build powerful developer tools that were previously impossible. SketchStack is just the beginning of AI-assisted engineering.

Check out the code on GitHub: https://github.com/harishkotra/SketchStack/