CanvasAnvil

中文版本: 查看中文文档

CanvasAnvil is a multi-canvas AI creation platform that turns a single requirement into deliverables you can iterate on.

Canvas Previews

Flow Canvas

CAD Canvas

PPT Canvas

Video Tutorials

• Watch on Bilibili
• Watch on YouTube
• Watch on Douyin

Try CanvasAnvil

• Open CanvasAnvil
• Note: The current server configuration is modest, so the service may occasionally feel slow or laggy. Thanks for your understanding.

Capability Overview (User View)

• Flow: flowchart generation and partial edits (draw.io XML)
• CAD: interior design plans, 2D floor plans, render tasks, and BOM
• PPT: presentation draft generation and iterative editing

Typical Workflow

1. Enter your requirement
2. Generate a first draft with AI
3. Apply partial edits and iterate
4. Export outputs (diagrams / lists / slides)

Quick Start

1. Install dependencies

npm install

2. Start development

npm run dev

Default URL: http://localhost:5173

3. Type check

npm run check

4. Production build

npm run build

Origins and Integrations

• Flow canvas: integrated and enhanced from next-ai-draw-io
• PPT canvas: integrated and enhanced from banana-slides
• CAD canvas: implemented in-house (architecture, agent workflow, 2D SVG editing pipeline, BOM/render pipeline)

Key improvements:

• Unified UX across canvases (chat, code blocks, one-click apply to canvas)
• More stable agent routing and retry mechanisms
• CAD-specific capabilities (patch / replace / BOM / 7-slot render workflow)
• Cross-canvas state/version/export pipelines

Core Capabilities (Developer View)

• Flow: chat-driven flowchart generation, patch/replace, one-click apply, snapshot restore
• CAD: cad_plan output, 2D SVG partial updates, concurrent render jobs, BOM export
• PPT: structured content generation, page-level incremental edits, streaming iteration

Tech Stack

• Frontend: React 18 + TypeScript + Vite
• UI: Tailwind CSS + Radix UI + Lucide
• Diagram engines: draw.io/diagrams.net for Flow, SVG-Edit for CAD
• Model integration: configurable multi-model access (chat / image)

Useful Scripts

• npm run dev: start development server
• npm start: production start (static site + API)
• npm run build: production build
• npm run check: TypeScript check
• npm run lint: ESLint

Project Structure (Key Paths)

.
├─ agent/                      # Prompts and sub-agent specs for CAD/Flow/PPT
├─ public/                     # Static assets (including SVG-Edit)
├─ src/
│  └─ workspaces/
│     ├─ flow/                 # Flow canvas
│     ├─ cad/                  # CAD canvas (in-house core)
│     └─ ppt/                  # PPT canvas
├─ api/                        # API logic
└─ README.md

Docs

• Deployment guide: Open deployment guide