# AI use cases for Architecture Canvas (weike-zhang/architecture-canvas)

Repo: [weike-zhang/architecture-canvas](https://github.com/weike-zhang/architecture-canvas) | Use cases: 3 | Page: https://dedupedai.com/use-cases/weike-zhang-architecture-canvas/

Architecture Canvas is a local Python and Node app that lets you chat with your documents to create and refine editable architecture diagrams on an Excalidraw canvas.

This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL.

- Turn a requirements document into an editable architecture diagram: https://dedupedai.com/use-cases/weike-zhang-architecture-canvas/requirements-doc-to-editable-architecture-diagram/
- Edit and export a sample architecture diagram with no API key: https://dedupedai.com/use-cases/weike-zhang-architecture-canvas/try-diagram-editor-offline-without-api-key/
- Let an AI agent render diagrams through the MCP server: https://dedupedai.com/use-cases/weike-zhang-architecture-canvas/agent-renders-diagrams-from-authorized-folder/

## How to turn a requirements document into an editable architecture diagram with Architecture Canvas

Repo: [weike-zhang/architecture-canvas](https://github.com/weike-zhang/architecture-canvas) | Difficulty: Intermediate | Time: 60 minutes | Basis: From the README

Upload a spec, let the assistant draft a diagram, then refine it by chat and export SVG or PNG.

**Who it is for:** A tech lead or architect who has a requirements document, spreadsheet, or PDF and needs a first architecture diagram to discuss with the team.

**The problem:** Drawing the first architecture diagram from a long spec by hand is slow, and each change request means redrawing parts of it.

**The outcome:** An editable architecture diagram generated from your uploaded materials, with later changes proposed, confirmed, and kept in the same canvas, exported as SVG or PNG.

### Steps

1. Run `git clone https://github.com/weike-zhang/architecture-canvas.git` and then `cd architecture-canvas`.
2. Run `python3 start.py` and open http://127.0.0.1:5093 in your browser.
3. Click 模型设置 in the lower left corner and enter a tool-calling model URL, model name, and API key.
4. Upload your requirements file (TXT, Markdown, DOCX, XLSX, PPTX, or PDF) and ask the assistant to draft the architecture.
5. Review the proposed changes, click 应用修改 to apply them, drag or edit nodes on the canvas, then export SVG or PNG.

### Prompt to paste into your agent

```text
Using the architecture-canvas repo at https://github.com/weike-zhang/architecture-canvas, start the local workspace with python3 start.py, upload the document at <path-to-requirements-doc>, and ask the assistant to generate a layered architecture diagram. Expected output: an exported SVG or PNG of the diagram. Verify that the component count is 22 or fewer and that the component list matches the document.
```

### Caveat

Generation is limited to layered architecture, business module, and simple deployment overviews, usually 22 components or fewer, and the README says model output needs manual review.

Risk, credentials: The API key you enter is kept only in server memory, but uploaded files, read file snippets, and the architecture structure are sent to the model service you configure, so do not upload confidential material to a service you have not approved.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/weike-zhang-architecture-canvas/requirements-doc-to-editable-architecture-diagram/

## How to edit and export a sample architecture diagram with no API key with Architecture Canvas

Repo: [weike-zhang/architecture-canvas](https://github.com/weike-zhang/architecture-canvas) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

Load the bundled demo session and drag, relabel, and export a diagram without any model settings.

**Who it is for:** A developer or architect who wants to evaluate the canvas editor and export quality before paying for or configuring a model service.

**The problem:** You want to judge the diagram editor and its exports before wiring up a model provider or uploading any company material.

**The outcome:** An edited sample diagram exported as SVG or PNG, produced entirely on your machine with no model call.

### Steps

1. Run `git clone https://github.com/weike-zhang/architecture-canvas.git` and then `cd architecture-canvas`.
2. Run `python3 start.py` to set up the environment and build the page, then open http://127.0.0.1:5093.
3. Run `python3 demo.py --output demo-session.json` to create the sample session file.
4. In the page, open 上下文 and choose 导入会话备份, then select demo-session.json.
5. Drag the modules, edit the text, and export the result as SVG or PNG.

### Prompt to paste into your agent

```text
Using the architecture-canvas repo at https://github.com/weike-zhang/architecture-canvas, run python3 demo.py --output demo-session.json, import that file into the local page, and export the diagram as SVG. Expected output: an SVG file of the sample knowledge assistant diagram. Verify that the file opens offline and that no model or search request was made.
```

### Caveat

The demo structure is hand-written as a knowledge assistant example and the README states it does not call a model or search, so it only shows editing and export.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/weike-zhang-architecture-canvas/try-diagram-editor-offline-without-api-key/

## How to let an AI agent render diagrams through the MCP server with Architecture Canvas

Repo: [weike-zhang/architecture-canvas](https://github.com/weike-zhang/architecture-canvas) | Difficulty: Advanced | Time: 60 minutes | Basis: From the README

Connect an agent over MCP stdio so it can read documents in one approved folder and render diagrams.

**Who it is for:** A platform engineer building an agent workflow that must produce architecture diagrams from a fixed, approved set of documents.

**The problem:** An agent needs to read design documents and return diagrams, but you want it limited to one folder and separate from any open editing session.

**The outcome:** An MCP stdio connection that exposes diagram rendering and document reading only within the folder you authorized.

### Steps

1. Run `git clone https://github.com/weike-zhang/architecture-canvas.git` and then `cd architecture-canvas`.
2. Choose a folder that you have approved for the agent and make sure it holds only the documents the agent may read.
3. Start the server with `python3 mcp_server.py --root <authorized-docs-dir>`, replacing the placeholder with your approved folder. (inferred, check the README)
4. Point your MCP client at the stdio command above and confirm that the rendering and reading tools are listed.
5. Read the integration notes in INTEGRATION.md before connecting a production agent.

### Prompt to paste into your agent

```text
Using the architecture-canvas repo at https://github.com/weike-zhang/architecture-canvas, start python3 mcp_server.py with --root set to <authorized-docs-dir> and call the document reading tool on <document-name>. Expected output: a rendered diagram or document text limited to that folder. Verify that a path outside the --root folder is refused.
```

### Caveat

The README says without --root the server only provides rendering tools and does not read files, and MCP runs apart from workspace sessions and does not modify the diagram you are editing.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/weike-zhang-architecture-canvas/agent-renders-diagrams-from-authorized-folder/