Map (Code to Canvas)
The Map tab (H key, then click Map) lets you paste or upload source code and have Chinilla AI reverse-engineer it into a visual architecture diagram on the canvas.
How it works
Section titled “How it works”- Open the AI panel with
H - Click the Map tab
- Paste code directly or click Upload file to select a file
- Click Map it
Chinilla AI analyzes the code structure (classes, functions, imports, dependencies) and generates components and connections that represent the architecture. A diff preview appears so you can review before applying.
Supported languages
Section titled “Supported languages”Map accepts files in most common languages:
- Python (.py)
- JavaScript / TypeScript (.js, .ts, .jsx, .tsx)
- Go (.go)
- Rust (.rs)
- Java (.java)
- C / C++ (.c, .cpp)
- Ruby (.rb)
- PHP (.php)
- C# (.cs)
- Swift (.swift)
- Kotlin (.kt)
- Scala (.scala)
- Shell (.sh)
- Config files (.yaml, .yml, .toml, .json, .xml)
What gets mapped
Section titled “What gets mapped”The AI extracts:
- Services and classes as components
- Dependencies and imports as connections
- Data stores (databases, caches, queues) as storage components
- External APIs as external components
- Entry points (routes, handlers) as ingress components
Each generated component includes full metadata when inferable from the code: behavior mode, metrics (throughput, capacity, processing time), requirements (framework, language, runtime, dependencies), protocol, scaling, and cost estimates.
A mapping array links each component back to the source code location (class, function, line range), so you can click any component in the preview to see where it came from.
Code editor
Section titled “Code editor”The Map tab includes a syntax-highlighted code editor with line numbers. You can:
- Paste code directly into the editor
- Drag and drop a file onto the editor
- Upload a file using the button below the editor
The editor supports syntax highlighting for comments, strings, keywords, decorators, numbers, and built-in functions.
After mapping
Section titled “After mapping”Once the AI generates the architecture, you get a diff preview showing proposed components and connections. Click Apply to add them to your canvas or Reject to dismiss.
After applying, you can:
- Rearrange the layout
- Edit individual component details
- Run a simulation to test the architecture
- Ask the AI to modify or extend the design via Chat
Limits
Section titled “Limits”- 100,000 character input limit
- Map is a Pro feature