Turn academic paper method descriptions into editable pipeline diagrams
简体中文 | English
👋 join us on WeChat
- 🆕 NanaDraw now supports the GPT Image 2 model as an image generation option
- 📝 Paste method description text → auto-generate pipeline diagrams
- 🎨 Three creation modes: Draft, Generation, and Assembly
- 🖼️ Built-in style gallery with 250+ academic paper reference images
- 🧰 Asset workshop with Bioicons, reusable personal assets, and AI-generated materials
- ✏️ Integrated draw.io editor for diagram fine-tuning
- 🤖 AI Assistant (NanaSoul) for natural language canvas manipulation
- 💾 Local project storage — no cloud required
- 🌐 Bilingual UI (Chinese/English)
Upload a hand-drawn sketch and turn it into a high-fidelity editable pipeline diagram in one click.
| Input Sketch | Editable Output |
|---|---|
 |
 |
Figure 1 shows the rough hand-drawn sketch. Figure 2 shows the generated high-fidelity editable workflow diagram.
| Mode | Description | Steps | Example Screenshot |
|---|---|---|---|
| Draft Mode | Editable XML sketch from text or hand-drawn input | 2 (Plan → XML) | View screenshot |
| Generation Mode | Direct visual concept image for inspiration and preview | 2 (Plan → Image) | View screenshot |
| Assembly Mode | Editable, style-aware illustration built through structured assembly | 5 (Plan → Image → Blueprint → Components → Assembly) | View screenshot |
Draft Mode
Generation Mode
Assembly Mode
Turn text descriptions or uploaded hand-drawn sketches into editable XML drafts quickly.
- Best when an idea has just appeared and you want to get it onto the canvas first.
- Enter a method description, a few keywords, or a rough concept, and NanaDraw produces an editable first-pass sketch.
- Think of it as a creative whiteboard: block out the structure now, then refine details, hierarchy, and wording later.
- Useful for brainstorming, rapid outlining, method mapping, and comparing alternative concepts.
Use the Nano Banana model family to generate a complete visual concept image for posters, inspiration, or fast previews.
- Best when you want a compelling result from a single sentence or a short prompt.
- Provide a topic, structural hints, and style preferences, and the system creates a full visual composition directly.
- This mode emphasizes visual impact, overall atmosphere, and creative expression.
- When you are not sure how the final figure should look yet, it can give you several strong directions to react to.
Run NanaDraw's structured assembly pipeline to generate an editable visual illustration that can also be exported to PPT for further refinement.
- Best for formal figures that need to look polished while staying precise and controllable.
- The system first understands the structural relationships in your description, then assembles modules, components, and layout step by step.
- This mode emphasizes accurate generation from the description while keeping module boundaries clear, structure tidy, and downstream editing easy.
- It balances creativity with the clarity and consistency expected in paper figures, architecture diagrams, and multi-stage workflows.
- If Generation Mode feels like an idea burst, Assembly Mode is the stage where that idea is refined into something ready to present or publish.
The built-in asset workshop combines Bioicons, user-managed assets, and AI-generated materials.
- It works like a ready-to-use parts library, so you do not have to start every figure from zero.
- You can build your own reusable collection of icons, components, and visual elements that becomes more useful over time.
- AI asset generation lets you describe what you want or provide a reference direction to create new icons, illustrations, and reusable visual components.
- When generic icons are not enough or existing assets do not match the idea closely, the workshop turns "what I want" into "what I can use right now."
- Gallery: Download reference images:
python scripts/download_gallery.py - Bioicons: Download SVG icons:
python scripts/download_bioicons.py
Both are optional and will be prompted during first startup.
- Python >= 3.10
- Node.js >= 18
- pnpm (
npm install -g pnpm) - An LLM API key (Gemini, OpenAI, or compatible)
git clone https://github.com/Shannon4Science/NanaDraw.git
cd NanaDraw
python start.pyThe script will:
- Install Python and Node.js dependencies
- Optionally download gallery images and bioicons
- Build the frontend
- Start the server and open your browser
Note: For first-time use, run
python start.pyin the foreground to complete interactive steps such as dependency installation and asset downloads. Once initialization is done, subsequent launches can use background mode:
nohup python start.py --skip-download > nanadraw.log 2>&1 &--skip-download skips the interactive data download prompts, preventing the background process from hanging on user input. To download assets separately, run in the foreground:
python scripts/download_gallery.py
python scripts/download_bioicons.pyView the log at any time with tail -f nanadraw.log. To stop the process, find the PID and kill it:
kill $(cat nanadraw.pid 2>/dev/null || ps aux | grep 'start.py' | grep -v grep | awk '{print $2}')python start.py --devThis starts both the Vite dev server and the backend API server.
After starting, click the ⚙️ gear icon in the top-right corner to configure:
- API Key: Your LLM provider API key
- API Base URL: Custom endpoint (leave empty for default)
- Text Model: Default
gemini-3.1-pro-preview - Image Model: Default
gemini-3-pro-image-preview - Component Model: Default
gemini-3.1-flash-image-preview - NanaSoul: Custom AI persona for style constraints
NanaDraw stores projects, assets, and settings in a local data directory. The default path is ~/.nanadraw, and you can override it with NANADRAW_DATA_DIR:
# macOS / Linux
export NANADRAW_DATA_DIR="$HOME/nanadraw-data"
python start.py# Windows PowerShell
$env:NANADRAW_DATA_DIR="$HOME\\nanadraw-data"
python start.pyNanaDraw/
├── frontend/ # React + TypeScript + Vite + TailwindCSS
│ └── src/
├── backend/ # FastAPI + Python
│ ├── app/
│ │ ├── api/ # REST API endpoints
│ │ ├── services/ # Business logic + pipeline orchestration
│ │ ├── prompts/ # LLM prompt templates
│ │ └── static/ # Gallery + Bioicons data
│ └── requirements.txt
├── drawio/ # draw.io fork (Apache-2.0)
├── scripts/ # Data download scripts
└── start.py # One-click startup
See CONTRIBUTING.md for development guidelines.
This project is licensed under a modified Apache License 2.0 with additional conditions. See the LICENSE file for details. (中文版)
The draw.io fork is licensed under Apache-2.0.
- draw.io — Diagram editor
- Bioicons — Science SVG icons
- PaperGallery — Reference images