Draw.io Architecture Generator

Automatic architecture diagrams from source code - powered by GitHub Copilot

Free • Open Source • No API keys required

What is it?

Draw.io Architecture Generator is a VS Code extension that reads your currently active source file and produces a native draw.io .drawio XML diagram using the GitHub Copilot Language Model API - with zero configuration required to get started.

It works with any language: Apex / Salesforce, TypeScript, JavaScript, Python, and more.

Requirements

Note: No additional API keys, authentication tokens, or external services are required. Your source code is shared only with GitHub Copilot.

How to Use

Generate a diagram

1. Open any source file (.cls, .py, .ts, .js, etc.)

2. Press Ctrl+Shift+P (Windows / Linux) or Cmd+Shift+P (macOS)

3. Type and select:

   Draw.io: Generate Architecture from Current File

   Alternatively, right-click anywhere in the editor → select the same command from the context menu.

4. A progress notification appears while Copilot analyses the file and streams the diagram XML.

5. The resulting .drawio file is saved next to your source file and opens automatically.

Output filename format:

MyClass_architecture.drawio    ← saved alongside MyClass.cls / MyClass.py / etc.

Customise the diagram with an instructions file

1. Press Ctrl+Shift+P → run:

   Draw.io: Open / Create Instructions File

   This creates instructions.md at your workspace root (pre-filled with a template) and opens it for editing.

2. Edit the file - add layout rules, colour preferences, language-specific conventions, or domain context.

3. Save the file. No reload is required. The next time you run Generate Architecture, the instructions are automatically included in the Copilot prompt.

The progress notification will confirm the file was picked up:

Using instructions: instructions.md

And the success toast will show:

Diagram saved → MyClass_architecture.drawio (instructions: instructions.md)

How it Works

1. Context Capture - The extension reads the text content and file extension of the currently active editor window.
2. Instructions Resolution - If an instructions file is configured, it is read fresh on every run (no restart needed).
3. Prompt Building - A structured prompt is assembled: system rules + project instructions + source code. The model is instructed to output only raw mxGraph XML - no markdown fences, no prose.
4. LLM Request - The prompt is sent to GitHub Copilot via the VS Code Language Model API. The response is streamed in real time.
5. Sanitisation & Validation - The response is stripped of any accidental markdown fences, and the extracted XML is validated as genuine draw.io format before being written to disk.
6. File Output - The .drawio file is written next to the source file and opened in the editor.

Source code is only shared with GitHub Copilot - no other external APIs or providers are involved.

Extension Settings

Open Ctrl+, and search drawio-architect to find all settings.

Model options

If the configured model is not available on your Copilot subscription, a warning is shown and generation continues using auto-selection - it never hard-fails.

Instructions File

The instructions file is a plain Markdown file that tells Copilot how to draw the diagram for your specific project. It is fully customisable and read at runtime, so you can change it at any time without reinstalling or reloading the extension.

Example instructions.md

# Draw.io Architecture Diagram Instructions

## Diagram Style
- Use swimlane layout grouping components by layer: UI / Service / Data.
- Colour palette: primary #1e88e5, secondary #43a047, warning #fb8c00.

## Component Rules
- Highlight any class that calls an external HTTP endpoint with a red border.
- Add a note cell summarising the purpose of each top-level class.

## Language-Specific
- Apex: show Salesforce object names inside SOQL node labels.
- TypeScript: group React components separately from utility modules.

## Extra Context
- This project follows a Domain-Driven Design (DDD) layered architecture.
- All service classes end with the suffix "Service".

Instructions file resolution order

1. Absolute path in the setting → used directly
2. Relative path → checked in each workspace folder root
3. Relative path → checked in the same directory as the source file being analysed

If the file is not found, a warning toast shows the exact paths that were searched, with an "Open Settings" button to fix the path immediately.

Diagram Content Rules (defaults)

When no instructions file is present, the default rules apply:

• Every class, interface, enum, and module becomes a labelled box
• Public methods and key fields are shown inside class boxes (UML-style)
• Directed arrows represent: extends, implements, composition, association, imports, async data flows
• Apex/Salesforce: SOQL queries shown as data-source nodes; trigger → handler flows visualised
• TypeScript/JavaScript: component hierarchy, hook dependencies, async chains
• Python: decorators, metaclasses, module-level imports

Default colour scheme:

Error Handling

Troubleshooting

The command doesn't appear in the Command Palette → Ensure github.copilot-chat is installed and you are signed in to GitHub in VS Code (bottom-left Accounts menu).

"No GitHub Copilot model is available" → Sign in via the Accounts icon (bottom-left of VS Code) and verify your Copilot subscription is active at github.com/settings/copilot.

Instructions file not being picked up → Run Draw.io: Open / Create Instructions File to see the expected path, or open Settings → drawio-architect.instructionsFile and verify the path. The warning toast when the file is missing shows every path that was searched.

License

MIT