vibe-coding-cn/i18n/en/workflow/canvas-dev/prompts/02-whiteboard-driven-coding.md

02-Whiteboard-Driven Coding Prompt

Generate/modify code based on Canvas whiteboard architecture diagram

Use Cases

• New feature development: Draw whiteboard first, then generate code
• Architecture refactoring: Modify whiteboard connections, AI syncs code refactoring
• Module splitting: Split nodes on whiteboard, AI generates new files

Prompt

You are an expert at generating code from architecture whiteboards. Please generate corresponding code implementation based on the following Obsidian Canvas whiteboard JSON.

## Input
Canvas JSON:
```json
{CANVAS_JSON}

Tech stack: {TECH_STACK} Target directory: {TARGET_DIR}

Parsing Rules

1. Node → File/Class

   • Title in node text → filename/classname
   • List items in node text → methods/functions
   • Node color/group → module affiliation

2. Edge → Dependency Relationship

   • fromNode → toNode = import/call relationship
   • Edge label determines relationship type:
     • "calls" → function call
     • "extends" → class extends
     • "depends" → import
     • "data flow" → parameter passing

3. Group → Directory Structure

   • Nodes in the same group go in the same directory
   • Group name → directory name

Output Requirements

1. Generate complete file structure
2. Each file contains:
   • Correct import statements (based on edges)
   • Class/function definitions (based on node content)
   • Call relationship implementation (based on edge direction)
3. Add necessary type annotations and comments
4. Follow tech stack best practices

Output Format

File: {file_path}
```{language}
{code_content}

## Usage Example

Generate Python FastAPI project code based on the following whiteboard:

{paste .canvas file content}

Tech stack: Python 3.11 + FastAPI + SQLAlchemy Target directory: /home/user/my-api

## Incremental Update Mode

When whiteboard is modified, use the following prompt:

```markdown
Whiteboard has been updated, please compare old and new versions, only modify changed parts:

Old whiteboard: {OLD_CANVAS_JSON}
New whiteboard: {NEW_CANVAS_JSON}

Output:
1. Files to add
2. Files to modify (output only diff)
3. Files to delete