Architecture Designer for OCI & Hybrid

Turn a quick Paint sketch (typed or hand-written), an SVG, a draw.io file, a YAML file or a plain-text description into a clean, professional architecture diagram with icons. You get ready-to-use SVG, PNG and PDF files without leaving VS Code.

Everything runs locally and offline: there is no cloud service, no AI API and no account. Mermaid (bundled) is the rendering engine, and OCR runs locally with tesseract.js (WebAssembly).

Paint PNG/JPG · SVG · draw.io · YAML · Text
                 │
                 ▼
         Architecture Model  ◄── you correct it here (form or YAML)
                 │
                 ▼
           Beautification
                 │
                 ▼
         Mermaid + icons  ──►  SVG · PNG · PDF  (written automatically)

Features

• Paint → professional diagram.
  • Boxes and zones are detected from the drawing itself.
  • Labels are read locally, whether typed with the Text tool or hand-written, and corrected against the component vocabulary (e.g. "pfSens" becomes "pfSense").
  • Arrow heads give the direction. Open, filled, separately drawn, double-headed, elbow and fork connectors are all supported.
• Lines without a head are oriented by role (Internet → security → network → application → data) and marked guessed, so that you can check them.
• Correction form. It opens after an image analysis. You can edit names, types, providers and zones, add or remove components and connections, swap a direction, then click Apply. You don't have to touch the YAML.
• Original layout kept: a diagram imported from draw.io, SVG or a Paint image is drawn at the same positions as the source: zones, components and connector routes. Beautify switches to an automatic layout (setting archDesigner.layout).
• draw.io and SVG import:
  • Supported files: .drawio, compressed or multi-page, .drawio.svg and .drawio.png.
  • The embedded diagram is read exactly, and containers become zones.
  • Plain SVGs are read from their texts, rectangles and connectors.
• YAML model. A simple format that you can version.
• Text description in English or French, for example Internet connects to pfSense., HAProxy distribue le trafic vers Kubernetes. or A -> B <-> C.
• Beautify. Groups components into zones (Internet, DMZ, On-Prem, OCI, AWS, Azure), orders the flows, fixes names (haproxy → HAProxy) and removes duplicate connections.
• Icons for every component (OCI, AWS, Azure, Kubernetes, databases…). You can also use the official vendor icons (see below).
• OCI first. The catalog covers:
  • Networking: VCN, subnets, gateways, DRG, LB/NLB, API Gateway, WAF.
  • Compute: OKE, Functions, Bastion.
  • Databases: Autonomous DB, Base DB, MySQL HeatWave.
  • Storage: Object, Block and File Storage.
  • Messaging and operations: Queue, Streaming, Logging, Monitoring, Vault.
  • On-Prem, AWS and Azure are covered as well.
• Unknown components never fail. An unrecognised name is shown as a Generic Component with its original name.
• Ready-to-use exports. These are written automatically next to the model after each Generate, Beautify, Analyze or Apply:
  • SVG: standalone, with styles inlined and no foreignObject, so it looks the same in Word, PowerPoint, Inkscape and browsers. The model is embedded, so the file can be re-imported without loss.
  • PNG: 2× resolution.
  • PDF: vector, so the text stays selectable.
• Styles: Professional (default), Dark and Cloud. Renderers: Mermaid flowchart (default) or architecture-beta.
• Validation.
  • Errors: duplicate IDs, unknown source or target, invalid zone, invalid YAML, invalid Mermaid.
  • Simple warnings: no database backup, single load balancer, no monitoring…

Installation

From the Marketplace: search for Architecture Designer for OCI & Hybrid, or run code --install-extension useful-ext.architecture-designer.

Usage

Click the Architecture Designer icon in the Activity Bar on the left. The side view lists every action in workflow order (Start → Work on the model → Export), the *.arch.yaml models of your workspace (click one to open it and generate its diagram) and the settings. You can also use the Command Palette (Ctrl+Shift+P, type Architecture Designer) or the buttons of the diagram panel.

From Paint

1. Draw boxes and arrows and write the names. Typed text (Text tool A) gives the best results. Hand-written names in clear capitals also work.
2. Save the drawing as PNG or JPG.
3. Run Import Image, then Analyze. The diagram appears, the model is saved as drawing.arch.yaml, and the correction form opens next to it with your drawing as a reference.
4. Fix what needs fixing, especially connections marked direction guessed, then click Apply.
5. drawing.svg, drawing.png and drawing.pdf are written next to your drawing, ready to use. Run Beautify to reorganise the layout.

Your own files are never overwritten: if drawing.png already exists and was not produced by the extension, the export is named drawing.diagram.png.

YAML format

name: Hybrid Banking Platform

zones:
  - name: Internet
    components:
      - name: Internet
        type: internet

  - name: On-Prem
    components:
      - name: pfSense
        type: firewall
      - name: HAProxy
        type: load-balancer
      - name: RKE2
        type: kubernetes

  - name: OCI
    components:
      - name: OKE
        type: oci-oke
      - name: Autonomous Database
        type: oci-autonomous-db

  - name: Private Subnet      # nested zone
    parent: OCI
    components: []

connections:
  - from: Internet
    to: pfSense
  - from: pfSense
    to: HAProxy
  - from: HAProxy
    to: RKE2
  - from: RKE2
    to: OKE
    label: VPN / DRG
  - from: OKE
    to: Autonomous Database
  - OKE <-> HAProxy           # bidirectional (or: direction: both)

type accepts a catalog id (oci-oke, load-balancer, …) or a common name (OKE, HAProxy, Autonomous Database). Components may also be listed at the top level under components:, with an optional zone:.

Text format

Internet connects to OCI WAF.
OCI WAF connects to OCI Load Balancer.
OCI Load Balancer routes traffic to OKE.
OKE hosts WSO2 API Manager.
WSO2 connects to Autonomous Database.
OCI: OCI WAF, OCI Load Balancer, OKE

French also works (se connecte à, distribue le trafic vers, héberge…), and so do arrows (A -> B -> C, A <-> B) and zone lines (On-Prem: pfSense, HAProxy).

Official OCI / AWS / Azure icons

The bundled icons come from sets that may be redistributed (Tabler Icons MIT, Simple Icons and SVG Logos CC0) and use each vendor's colours. The official AWS, Azure and Oracle icon sets may be used to draw diagrams, but they may not be redistributed inside an extension. To use them:

1. Download them from the vendor:
   • AWS Architecture Icons
   • Azure icons
   • OCI icons
2. Put the SVG or PNG files you want in a folder.
3. Set archDesigner.customIconsFolder to that folder. It can be absolute, relative to the workspace, or use ${workspaceFolder}.

Name the files after a component type (oci-oke.svg, aws-ec2.svg, azure-aks.svg) or keep the vendor names (Arch_Amazon-EC2_64.svg is recognised as aws-ec2). They replace the bundled icons.

Settings

Current limitations

• Hand-written labels. They are read by OCR, then corrected against the vocabulary of component names. Unusual hand-written names may still need a fix in the form, and every correction is listed so that you can check it.
• Arrows without a visible head are oriented by role and marked guessed. Check them in the form, where one click on ⇄ swaps the direction.
• Exported PDF text uses the standard Helvetica font. Characters outside Latin-1 (e.g. CJK, emoji) are not rendered in the PDF; the SVG and PNG are not affected.

Contact

Questions, signalements et suggestions : extensionuseful@gmail.com.