<h1 align="center">CanvasAnvil</h1>
<p align="center">
<strong>AI-powered multi-canvas creation for diagrams, interior design, presentations and images.</strong>
</p>
<p align="center">
<img alt="version" src="https://img.shields.io/badge/version-v2.2.0-blue" />
<img alt="license" src="https://img.shields.io/badge/license-MIT-green" />
<img alt="React" src="https://img.shields.io/badge/React-18.3-61dafb?logo=react&logoColor=white" />
<img alt="TypeScript" src="https://img.shields.io/badge/TypeScript-5.8-3178c6?logo=typescript&logoColor=white" />
<img alt="Vite" src="https://img.shields.io/badge/Vite-6.3-646cff?logo=vite&logoColor=white" />
<img alt="workspaces" src="https://img.shields.io/badge/workspaces-4-orange" />
<img alt="PRs welcome" src="https://img.shields.io/badge/PRs-welcome-brightgreen" />
</p>
<p align="center">
<a href="#creative-canvases">Canvases</a> |
<a href="#ppt-canvas">PPT Showcase</a> |
<a href="#video-tutorial">Video Tutorial</a> |
<a href="#skills">Skills</a> |
<a href="#quick-start">Quick Start</a> |
<a href="#recent-updates">Recent Updates</a> |
<a href="README.zh-CN.md">Chinese</a>
</p>
<p align="center">
<strong>⭐ If CanvasAnvil helps your workflow, please star the repo and fork it for your own canvas experiments.</strong>
</p>
> CanvasAnvil brings diagramming, interior design, presentation production and free-form image work into one workspace, in Chinese or English.
## 🔷 Diagram Canvas
Turn structured prompts into clear diagrams for research, systems, delivery plans, and teaching maps, then keep refining layout, labels, and node relationships in one place.
### Showcase
<table>
<tr>
<td width="50%" align="center"><img src="public/examples/readme-previews/diagram/01.png" alt="Diagram example: academic research framework" width="100%" /><br/><strong>Academic Research Framework</strong></td>
<td width="50%" align="center"><img src="public/examples/readme-previews/diagram/02.png" alt="Diagram example: intelligent Q&A system architecture" width="100%" /><br/><strong>Intelligent Q&A System Architecture</strong></td>
</tr>
<tr>
<td width="50%" align="center"><img src="public/examples/readme-previews/diagram/03.png" alt="Diagram example: project implementation roadmap" width="100%" /><br/><strong>Project Implementation Roadmap</strong></td>
<td width="50%" align="center"><img src="public/examples/readme-previews/diagram/04.png" alt="Diagram example: course design mind map" width="100%" /><br/><strong>Course Design Mind Map</strong></td>
</tr>
</table>
## 🏠 Interior Design Canvas
Describe the home you want, settle the plan with clickable decisions, and get an editable floorplan in a full house designer (2D, 3D, furniture, MEP, ceilings), checked and audited, with the quote, drawing set, DXF, colour plan and renders exported from it. You can also start from your own floorplan.
### Showcase
<table>
<tr>
<td width="33.33%" align="center"><img src="public/examples/cad/01.png" alt="CAD renovation plan layout" width="100%" /><br/><strong>Renovation Plan Layout</strong></td>
<td width="33.33%" align="center"><img src="public/examples/cad/02.png" alt="CAD floor finish plan" width="100%" /><br/><strong>Floor Finish Plan</strong></td>
<td width="33.33%" align="center"><img src="public/examples/cad/03.png" alt="CAD reflected ceiling plan" width="100%" /><br/><strong>Reflected Ceiling Plan</strong></td>
</tr>
<tr>
<td width="33.33%" align="center"><img src="public/examples/cad/04.png" alt="CAD wall setting out plan" width="100%" /><br/><strong>Wall Setting-Out Plan</strong></td>
<td width="33.33%" align="center"><img src="public/examples/cad/05.png" alt="CAD MEP plan" width="100%" /><br/><strong>MEP Coordination Plan</strong></td>
<td width="33.33%" align="center"><img src="public/examples/cad/06.png" alt="CAD elevation index and interior elevations" width="100%" /><br/><strong>Elevation Index + Interior Elevations</strong></td>
</tr>
<tr>
<td width="33.33%" align="center"><img src="public/examples/cad/07.png" alt="CAD detail drawings" width="100%" /><br/><strong>Detail Drawings</strong></td>
<td width="33.33%" align="center"></td>
<td width="33.33%" align="center"></td>
</tr>
</table>
## 📑 PPT Canvas
Generate full presentations through a controlled pipeline: outline first, visual production second, then export as PDF or image-based PPT. The deck template sets the style and colour palette; each slide gets a layout of its own.
### Showcase
<table>
<tr>
<td width="50%" align="center" valign="top">
<img src="public/examples/readme-previews/ppt/ppt1.png" alt="AI content creation workflow deck preview" width="100%" />
<strong>AI Content Creation Workflow</strong>
</td>
<td width="50%" align="center" valign="top">
<img src="public/examples/readme-previews/ppt/ppt2.png" alt="Intelligent collaboration growth deck preview" width="100%" />
<strong>Intelligent Collaboration Growth</strong>
</td>
</tr>
<tr>
<td width="50%" align="center" valign="top">
<img src="public/examples/readme-previews/ppt/ppt3.png" alt="AI-driven business innovation deck preview" width="100%" />
<strong>AI-Driven Business Innovation</strong>
</td>
<td width="50%" align="center" valign="top">
<img src="public/examples/readme-previews/ppt/ppt4.png" alt="Low-carbon smart campus transformation deck preview" width="100%" />
<strong>Low-Carbon Smart Campus Transformation</strong>
</td>
</tr>
</table>
## 🖌️ Free Canvas
A whiteboard for images: describe a picture in one sentence and it lands on the board. Circle what to change, write a note beside it, press the wand, and a new version appears next to the original. Every version is kept, and the version strip shows what each one changed and when.
### Showcase
<table>
<tr>
<td width="50%" align="center"><img src="public/examples/canvas/01.svg" alt="Free Canvas: an image from one sentence" width="100%" /><br/><strong>An Image from One Sentence</strong></td>
<td width="50%" align="center"><img src="public/examples/canvas/02.svg" alt="Free Canvas: marking up the image" width="100%" /><br/><strong>Mark It Up on the Board</strong></td>
</tr>
<tr>
<td width="50%" align="center"><img src="public/examples/canvas/03.svg" alt="Free Canvas: a new version from the marks" width="100%" /><br/><strong>A New Version from the Marks</strong></td>
<td width="50%" align="center"><img src="public/examples/canvas/04.svg" alt="Free Canvas: comparing versions" width="100%" /><br/><strong>Compare the Versions</strong></td>
</tr>
</table>
## 🎨 Creative Canvases
| Workspace | Focus | Typical output |
| --- | --- | --- |
| `Diagram` | structured diagram generation and partial editing | flowcharts, architecture diagrams, logic diagrams |
| `Interior Design` | interior planning, drawing coordination, and delivery packaging | concept boards, 2D drawings, render briefs, material lists |
| `PPT` | structured presentation generation and export | presentations, pitch decks, report slides |
| `Free Canvas` | text-to-image and edit-by-annotation on a whiteboard | posters, illustrations, revised versions of an image |
## 🌐 Online Access
Current online access URL:
- 🔗 CanvasAnvil: [https://canvasanvil.codingfgd.asia](https://canvasanvil.codingfgd.asia)
## Video Tutorial
One walkthrough per canvas on Bilibili (narrated in Chinese). In the app, the **Tutorials** button at the top of the home page plays them in place.
<table>
<tr>
<td width="50%" align="center"><a href="https://www.bilibili.com/video/BV1wyxs66EEd"><img src="public/tutorials/diagram.jpg" alt="A whole architecture diagram from one sentence, and edits that touch only what you name" width="100%" /></a><br/><strong>🔷 Diagram</strong> · <a href="https://www.bilibili.com/video/BV1wyxs66EEd">A whole architecture diagram from one sentence, and edits that touch only what you name</a></td>
<td width="50%" align="center"><a href="https://www.bilibili.com/video/BV1ryxs6zEtN"><img src="public/tutorials/cad.jpg" alt="A full set of renovation drawings from one request, plus a 3D walkthrough" width="100%" /></a><br/><strong>🏠 Interior Design</strong> · <a href="https://www.bilibili.com/video/BV1ryxs6zEtN">A full set of renovation drawings from one request, plus a 3D walkthrough</a></td>
</tr>
<tr>
<td width="50%" align="center"><a href="https://www.bilibili.com/video/BV1oGxs6hEf6"><img src="public/tutorials/ppt.jpg" alt="An 8-slide deck from one sentence, with 200+ templates to choose from" width="100%" /></a><br/><strong>📑 PPT</strong> · <a href="https://www.bilibili.com/video/BV1oGxs6hEf6">An 8-slide deck from one sentence, with 200+ templates to choose from</a></td>
<td width="50%" align="center"><a href="https://www.bilibili.com/video/BV17Gxs6aETm"><img src="public/tutorials/canvas.jpg" alt="Circle a spot and only that changes; the rest of the image stays put" width="100%" /></a><br/><strong>🖌️ Free Canvas</strong> · <a href="https://www.bilibili.com/video/BV17Gxs6aETm">Circle a spot and only that changes; the rest of the image stays put</a></td>
</tr>
</table>
## 🧰 Skills
CanvasAnvil includes dedicated local skills for each canvas so workflows stay opinionated, repeatable, and easier to maintain.
- `diagram-skill` · Diagram generation and packaging
Opens the existing draw.io editor inside Codex. Chat-driven XML updates, manual edits and drawio/SVG/PNG exports synchronize through MCP. State lives under the project’s `diagram/` directory. The online draw.io editor requires network access.
- `cad-skill` · Interior-delivery workflow
Opens the existing house designer inside Codex, with chat-driven designs, operations and spec patches, synchronized manual edits, checks and exports. State lives under `cad/`. The existing offline reconstruction and delivery scripts remain available.
- `ppt-skill` · Full presentation production
The website's flow: a bundled template library, idea / outline / beautify modes, outline review with the user before anything is drawn, all slides drawn concurrently with retries, single-slide edits, and PDF, image PPTX or editable PPTX export. Prompts and templates are synced from the website with `node scripts/sync-ppt-skill.mjs`.
- `canvas-skill` · Image creation on a local whiteboard
A native Codex canvas plugin reusing the website's Excalidraw board, annotation compositor, image placement and version strip. Give instructions directly in the Codex conversation. Codex captures selected images and annotations through MCP, then uses the host image tool and inserts results. Data lives in the project's `canvas/` directory.
From the repository root, run `codex plugin marketplace add .` and `codex plugin add canvasanvil-canvas@canvasanvil-local`, then restart Codex and invoke `$canvas-skill`, `$diagram-skill` or `$cad-skill`. Node 20+ is required. The release includes the MCP and widget bundles with no runtime npm installation.
All skills use the host text model by default. Only image generation requires explicit provider configuration.
Editable PPTX export uses the host model too: the agent rebuilds the slides step by step following `skill/ppt-skill/references/editable-pptx-workflow.md`, with the scripts in the skill's `editable/` folder; its previews use PowerPoint on Windows and LibreOffice elsewhere, plus the Python packages in `editable/requirements.txt`.
## 🚀 Quick Start
1. Install dependencies
```bash
npm install
```
2. Start local development
```bash
npm run dev
```
Default URL: `http://127.0.0.1:8001`
CanvasAnvil deploys as a single service. See [deploy/README.md](deploy/README.md) for detailed deployment configuration.
3. Run type checks
```bash
npm run check
```
4. Build for production
```bash
npm run build
```
## 🧪 Common Commands
- `npm run dev`: start the app on `8001`
- `npm run check`: run TypeScript checks
- `npm run lint`: run ESLint
- `npm test`: run the test suite
- `npm run build`: build the production bundle
## 📝 Development Notes
- Every model call uses the OpenAI HTTP protocol. To use another vendor, point the base URL in Settings at their OpenAI-compatible endpoint — there is no provider list to pick from.
- AI configuration is read from local app settings; the text and image channels are configured separately.
- Local development depends on the API service for `/api/chat` and `/api/ppt-ai`.
- After changing local API route wiring in `vite.config.ts`, restart the dev server.
- `server/**` uses relative imports: `vite.config.ts` imports the dev middleware so `npm run dev` serves the API in-process, and Vite loads its own config through plain Node, which does not know the `@/` alias.
- Set `PROMPT_LOG_DIR` to write assembled prompts to disk; it is off by default because the log contains the user's content.
## 📚 Docs
- Architecture overview: [docs/architecture.md](docs/architecture.md)
- Deployment guide: [deploy/README.md](deploy/README.md)
## 🗓️ Recent updates
### 2026-11-08
**✨ New**
- **The Interior Design canvas is rebuilt around an editable house designer**
- The canvas now holds a full interactive house designer: 2D plan, 3D bird's-eye view and walk-through, furniture, MEP, ceilings, floor finishes, demolition layers, quote and drawing set, in the site's own theme. Every floorplan the AI makes opens there, and you can drag, edit and keep designing by hand.
- **Plan first**: describe what you need and the AI writes a design plan (rooms, areas, orientation, zoning, entry). It streams readably in the chat as a chain of steps, and the floorplan is drawn only after you confirm the plan.
- **Decisions as clickable options**: the plan lists everything there is to decide, grouped as layout / finishes / equipment / appliances / smart home / wiring: kitchen type and counter shape, floors per room, wall colours, skirting, ceilings, doors and windows, air conditioning, fresh air, heating, hot water, smart toilet, smart lighting and curtains, socket count, network points, where the panel and network box go, bedside USB, floor sockets. Each comes with a recommendation already picked; click to change any of them and confirm at the bottom of the plan, with nothing to type again.
- **The model describes, the program draws**: the AI only writes the layout (a grid, rooms, doors, windows, furniture by intent, finishes) and a program computes walls, openings and furniture positions. Furniture that does not fit is shrunk or swapped for a smaller model, and every adjustment is listed.
- **Finished for you**: furniture pushed slightly into walls or curtains is moved clear, MEP points are laid out in one go, then your wiring choices are applied (more sockets, network points, boxes by the entry door, floor sockets under the dining or coffee table, bedside USB).
- **Room-by-room MEP audit**: lights, switches, sockets, which switch controls which light, mounting heights, switches on the handle side of doors, double control in bedrooms, the hood socket and gas alarm in the kitchen, splash-proof sockets in bathrooms, both boxes present. Problems are listed in the chat and in a collapsible list under it.
- **Start from your own floorplan**: upload a photo, screenshot, PDF or DXF; walls and openings are recognized, the original is kept as an underlay, and the AI names the rooms and furnishes them.
- **Change it by chat**: "make the master bedroom bigger", "add a window to the balcony". The AI reads the recent conversation and says what it changed, or why it changed nothing.
- **Version history**: the history button under the chat shows every floorplan version as a thumbnail (AI, manual edit, recognized); restore any of them, and the restore can be undone the same way.
- **Delivery from the designer itself**: quote, A3 drawing-set PDF, DXF (layout, MEP, demolition), colour plan and 3D renders.
- **`cad-skill` follows the same flow and runs on its own**
- Copy the folder into any project. From an existing floor plan it builds the designer page; from a brief it settles the plan and decisions with you first (with the host's option picker when it has one), then lays out and draws the floorplan.
- It then finishes the design without help: furniture nudged clear, MEP laid out, wiring choices applied, checks and the MEP audit run, and the quote CSV, drawing-set PDF, DXF, colour plan and 3D render exported.
- It hands over `<name>-装修设计器.html`: the whole designer as one offline file with your design inside, opened in your browser. Double-click it to open again; edits made there are kept in that browser.
- Before delivery it runs a full-feature acceptance pass over the page.
- It uses the Chrome or Edge already on your machine, so no browser is downloaded: run `npm run setup` once in the skill folder. No API key or image model is needed.
**⚡ Improved**
- The floorplan is generated as a stream; output the model cut off midway is continued instead of failing, slipped JSON brackets are repaired, a failed step retries from where it stopped, and failures are shown in that step.
- Streamed AI calls log the time to the first token and the total time.
**🐛 Fixed**
- Switching away from the designer no longer crashes the workspace.
- A design survives a runtime error in the designer.
- Renaming a room replaces its label instead of stacking a second one on top.
**📌 Notes**
- Removed: the analysis boards, the AI material list, AI-drawn renders and the old SVG drawing flow. Every drawing now comes from the designer.
- Floorplan upload runs the designer's recognition scripts on the server (`server/recognizer/recognize.py`, using `skill/cad-skill/designer/scripts`); it needs Python with `pip install -r server/recognizer/requirements.txt` (or `PYTHON` pointing at one). Without it the upload button stays hidden. The Docker image includes it.
- The CAD "Delivery check" button runs the designer's acceptance (`skill/cad-skill/designer/scripts/qa.mjs --lite --quick`, then `qa_files.py`) on the server; it needs Chrome / Edge / Chromium there (or `CHROME_PATH`) and Python with the recognizer's requirements, and stays hidden without a browser. The Docker image includes Chromium.
- The MEP audit reports problems but does not move points; adjust them under MEP in the designer.
- In `cad-skill`, starting from an existing floor plan needs Python with `numpy pillow opencv-python pymupdf ezdxf pypdf`; designing from a brief needs only Node 18+.
### 2026-11-06
**✨ New**
- **Editable PPTX export for the PPT canvas**
- The export menu has a new "Export Editable PPTX", next to "Export PDF" and "Export Image PPT".
- Exported decks used to be one picture per slide. Now every slide comes back as layers you can edit, from bottom to top:
- **Clean base**: the background with text, cards and icons removed; gradients, waves, buildings and other background art stay in this layer;
- **Native shapes**: card frames, dividers, dots, rings, bars and arrows are PowerPoint's own shapes, so their colour, size and corner radius can be changed directly;
- **Icons and illustrations**: redrawn by the image model after the original, on transparent backgrounds, to move, resize or replace one by one;
- **Editable text**: titles, body text and lists sit in text boxes, keeping their position, size, colour and weight.
- Slides in one style share a single base, and icons and cards repeated across slides are drawn once, so the whole deck stays consistent.
- **Export settings**
- **Pages**: lists every slide by number and title; select all, none or page by page to export only what you need.
- **Rework rounds**: up to 3–10 per page, default 3. Each finished page is checked against the original (overall similarity, local differences, text position and size, green fringes left from cut-outs); a page that fails is fixed and checked again, and a page that passes stops early instead of using up its rounds.
- A count out of range snaps to the nearest allowed value.
- **Export run panel**
- Once started, a fixed-height panel opens under the export button and scrolls through the whole run as it happens, like an agent at work.
- Seven steps in order: read text → plan backgrounds → draw clean backgrounds → analyse elements → draw icons and illustrations → rebuild pages → write the PPTX, each with its state (waiting, running, done or failed) and time taken.
- Under each step, timestamped details such as "page 1: 12 text blocks read", "base g1 shared by pages 1 and 2", "page 2: round 1 failed (similarity 78.5, 6 problems), fixing".
- "Rebuild pages" is grouped by page, so pages built side by side keep their progress apart.
- The step and page in progress open by themselves and fold away when done; anything you opened or closed yourself stays as you left it. When the panel is full it scrolls, following the newest line unless you have scrolled up to read.
- **Intermediate results open with a click**: the clean bases, icon sheets, every sliced icon and illustration, every page's preview after each round and the check images with problem areas marked all show as thumbnails that open full size.
- **`editable_pptx` export mode in `ppt-skill`**
- Coding agents such as Claude Code and Codex can export a deck as editable PPTX, with the same steps and checks as the app.
- The host agent makes the judgments itself: planning the base groups, analysing each page's elements, writing each page's compose spec and fixing what the checks find. No separate chat model to configure.
- `editable/editable_run.py` does the mechanical steps (OCR, image calls with retries, aspect checks, slicing by drawings, composition, PowerPoint previews, checks, merge), run in order `init → base → analysis → assets → page / check → merge`; the full workflow is in `references/editable-pptx-workflow.md`.
- It reads the same slide manifest as the image PPT, converting JPG, WebP and other formats; the run folder keeps the bases, asset sheets and every round's previews and checks.
- The skill carries every script and rule doc it needs, independent of the app's code, so it works on its own.
- The image model comes from the skill's `config/image-provider.json`, the same file the other export modes use.
- `SKILL.md` and `references/export-modes.md` describe when to use the mode, its steps, settings and requirements, and the agent warns the user up front that it takes a while.
**⚡ Improved**
- During an export, collapse the run panel to a timer pill beside the export button (showing the time so far) and keep editing; click the pill to open it again.
- When the export finishes the panel closes and the file downloads; if it fails, the panel stays open with the step that failed and why.
- A page refresh, closing and reopening the page, or a server restart picks a running export back up, with its earlier steps and pictures still there, and the file still downloads when it is done.
- Better background detection: elements are analysed with the clean base alongside, so gradients, waves and buildings in the background are no longer drawn a second time as elements.
- A base whose aspect ratio is off from the original is redrawn, never stretched.
- An icon sheet with the wrong number of drawings is thrown away and redrawn, so misaligned icons never end up in the deck.
- Starting an export while one is running says "another export is running; wait for it to finish" instead of the two getting in each other's way.
**📌 Notes**
- Editable export builds and checks every page, so it is slow: usually 10+ minutes, and one export runs at a time.
- Icons and illustrations are redrawn after the original: the same design, not pixel for pixel.
- Needs Microsoft PowerPoint (previews for the checks); install the Python packages with `pip install -r scripts/slide-agent/requirements.txt`. The scripts and rule docs it uses are all in `scripts/slide-agent/`; nothing else to install.
- Models: set a chat model (`SLIDE_AGENT_API_KEY` / `SLIDE_AGENT_BASE_URL` / `SLIDE_AGENT_MODEL`) and an image model (`SLIDE_AGENT_IMAGE_API_KEY` / `SLIDE_AGENT_IMAGE_BASE_URL` / `SLIDE_AGENT_IMAGE_MODEL`) in `scripts/slide-agent/.env.local` or the environment.
### 2026-11-05
**🐛 Fixed**
- **The Diagram canvas lost its correction step after a reload**: the canvas corrects the model's layout and shows each diagram as thinking → drawing → correction in the chat, but corrections lived only in memory, so a refresh dropped the third step.
- Every diagram's correction is now saved locally with the chat, so after a refresh the correction step and the layout scores before and after are still there;
- the latest diagram also keeps both versions, so you can still switch between the model's original and the corrected layout.
- **A correction running at reload hung**: one that had not finished when the page was refreshed now comes back as finished instead of staying "in progress".
## ⚖️ License
CanvasAnvil is released under the MIT License.
See [LICENSE](LICENSE) for the full license text.
## 💌 Contact
- `3524962421@qq.com`
## ⭐ Star History
[](https://star-history.com/#CodingFeng101/CanvasAnvil&Date)