Generative AI on Architecture Diagram Creation

In the contemporary digital landscape, this process involves creating a comprehensive solution that processes images from a specified webpage, converts the visual content into interpretable text or code using advanced large language models, and then transforms the generated text or code into an editable diagram by leveraging a diagram creation platform. The process involves web scraping, image processing, AI-powered text conversion, and diagram generation to provide a seamless workflow from raw web content to structured, editable diagrams.

Downloading all the Diagrams from a Google website link through Python code:

Web Scraping and Image Processing

The first stage involves scraping web pages to collect images. Here’s an example of how to set up a web scraping service using Python:

app.py

from fastapi import FastAPI
import uvicorn
from base import extract_image_urls_from_webpage, download_imagesapp = FastAPI()
@app.get("/download_images")
def download_images_api(webpage_url: str):    
    try:        
        if not webpage_url:            
            return {"error": "Please provide a webpage URL"}
        image_urls = extract_image_urls_from_webpage(webpage_url)
        download_images(image_urls)
        return {"message": "Images downloaded successfully"}
    except Exception as e:
        return {"error": str(e)}
if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=5999)

base.py

import os
import requests
from bs4 import BeautifulSoup
from urllib.parse import urlparse, urljoin
def extract_image_urls_from_webpage(url):
    try:
        response = requests.get(url)
        soup = BeautifulSoup(response.content,"html.parser")
        base_url = response.url
        image_urls = [urljoin(base_url, img.get("src")) for img in soup.find_all("img")]
        print(image_urls)
        return image_urls
    except Exception as e:
        return {"error": f"extract_image_urls_from_webpage API failed due to {repr(e)}"}
def download_images(image_urls, download_dir = os.path.join(os.path.join(os.environ['USERPROFILE']), 'Downloads', 'Images')):
    if not os.path.exists(download_dir):
        os.makedirs(download_dir)
   for url in image_urls:
        try:
            response = requests.get(url)
            filename = os.path.basename(urlparse(url).path)
            file_path = os.path.join(download_dir, filename)
            with open(file_path, "wb") as file:
                file.write(response.content)
       except Exception as e:
            return {"error": f"download_images API failed due to {repr(e)}"}

Converting Diagram as a Text or Code based on instruction using LLM GPT-4 model: 

1. Configuring Azure OpenAI API Client with Endpoint and Deployment Details

from openai import AzureOpenAI

api_base = '<your_azure_openai_endpoint>' # your endpoint should look like the following https://YOUR_RESOURCE_NAME.openai.azure.com/

api_key="<your_azure_openai_key>"
deployment_name = '<your_deployment_name>'
api_version = '2023-12-01-preview' # this might change in the future
client = AzureOpenAI(
    api_key=api_key,
    api_version=api_version,
    base_url=f"{api_base}openai/deployments/{deployment_name}/extensions",
)

Provide the Instruction:

instruction = """Provide the instruction"""

Diagram to Text or Code conversion based on the instruction using GPT model

response = client.chat.completions.create(
    model=deployment_name,
    messages=[
        { "role": "system", "content": "You are a helpful assistant." },
        { "role": "user", "content": [
              {
                "type": "text",
               "text": instruction
            },
            {
                "type": "image_url",
               "image_url": {
                    "url": "https://diagrams.mingrammer.com/img/web_service_diagram.png"
                }
            }
          ]
        }
    ],
    max_tokens=2000,
    temperature=0,
    top_p=1,
    n=1)print(response.choices[0].message.content, "\n")

Tools for Converting Text or Code into Diagrams

Introduce the primary tools that facilitate the conversion of text or code into diagrams:

Tool  Free/Paid  Editing Method  Link 
DiagramGPT Free & Paid Edit through Code DiagramGPT
Diagrams Free Not able to Edit Diagrams
Graphviz Free Edit through Code Graphviz
Drawio Free Edit Drawio
Lucid Free & Paid Edit Lucid
PlantUML Free Edit through Code PlantUML
Mermaid Free Edit through Code Mermaid
Ilograph Free Edit through Code Ilograph
Terrastruct Free & Paid Edit through Code Terrastruct
Structurizr Paid Edit through Code Structurizr
DiagrammingAI Free & Paid Edit through Code & text DiagrammingAI
ChatUML Free & Paid Edit with code ChatUML
Creately Paid Edit Creately
Miro Free & Paid Edit Miro

The described workflow integrates advanced technologies to transform web-scraped images into editable diagrams. It employs Python for web scraping, GPT-4 for text and code conversion, and various tools like DiagramGPT, Graphviz, and Miro for diagram creation. These tools vary in cost and editing capabilities, catering to diverse needs.

Click the button below to continue to Part 2 and discover the secrets that top coders use for diagram creation.

Continue to Part 2 →

In that we will discuss a detailed exploration of their features and integration to help users select the most suitable option for their requirements.