A visual factory production line designer and BOM calculator
Recipe Designer is a desktop application for visually designing, organizing, and analyzing complex factory production lines. Inspired by factory automation games, it lets you model items, machines, recipes, byproducts, catalysts, and global effects — then compute the full Bill of Materials (BOM) to understand exactly what raw resources and machines you need at every step.
Build your production chain as a graph of nodes and edges, configure multiple recipe alternatives per item, balance byproducts, apply productivity multipliers, and export your designs — all through a polished Bauhaus-inspired interface.
Main Editor
BOM Calculator
- Visual Graph Editor — Drag-and-drop node creation, edge connections, group nodes, pan and zoom canvas
- Multi-Slot Recipes — Each item can have multiple production recipes; switch between them to compare
- Three Edge Types — Input (solid), Byproduct (dashed), and Catalyst (dashed blue) flow connections
- Group Nodes — Collapse sub-factories into summary nodes showing aggregated inputs and outputs
- Auto Layout — Three layout directions: Top-to-Bottom, Bottom-to-Top, Left-to-Right, powered by sugiyama layout with collision avoidance
- 5 Edge Styles — Simple Bezier, Default Bezier, Straight, Step, Smooth Step
- Selection Highlighting — Click any node or edge to highlight its upstream and downstream connections
- Dark / Light Themes — Full theme support with CSS variables
- Machine Editor — Define machines with base speed, tags, and slot configuration (input, output, catalyst, proliferator)
- Recipe Slots — Configure production time, quantity, required machine, and tags per recipe
- Catalyst System — Optional/required catalysts with speed multipliers
- Secondary Outputs — Model byproducts alongside primary outputs
- Global Effects — Apply yield and speed multipliers from skills, treasure, or research, filtered by tags
- Proliferator Config — Define proliferator items with per-cycle consumption
- Production Tree View — Recursive drill-down showing every input with status flags (cycle detected, catalyst missing, raw material, no recipe)
- Summary Table — Aggregated view of all items, quantities, rates, and machine counts
- Two Modes — One-time production and continuous production (rate/min)
- Rounding Options — Integer ceiling or exact decimal
- Byproduct Strategies — Ignore & annotate, offset against demand, or treat as independent output
- Search Overlay (Ctrl+P) — Quick-jump to any node, slot, or machine
- Right-click Context Menu — Configurable menu with keyboard shortcut display
- Node Popover — Compact info panel for quick overview
- Dictionary Panel — Left sidebar for browsing and dragging items/machines onto the canvas
- Template System — Save and instantiate reusable production patterns
- Validation — Automatic integrity checks for edge references, slot references, machine references, and tag mismatches
- Customizable Shortcuts — Rebind all keyboard shortcuts
- File Persistence — Open/Save/Save As with
.grecipeformat via native Tauri dialogs - External Change Detection — Auto-detect when the file changes on disk and prompt to reload
- English (default) and Simplified Chinese (中文)
- All UI text, validation messages, and BOM output are fully localized
| Layer | Technology |
|---|---|
| Desktop Shell | Tauri v2 (Rust) |
| Frontend Framework | Vue 3 (Composition API, <script setup>) |
| Language | TypeScript |
| State Management | Pinia |
| UI Library | Naive UI |
| Graph Visualization | Vue Flow |
| Graph Layout | dagre + custom sugiyama with collision avoidance |
| Force Simulation | d3-force |
| Icons | Lucide Vue Next |
| i18n | vue-i18n |
| Testing | Vitest |
| Build Tool | Vite |
- Node.js ≥ 18
- Rust toolchain (for Tauri) — install via rustup
- System dependencies for Tauri — see Tauri prerequisites
# Clone the repository
git clone https://github.com/Mowonhua/Recipe-Designer.git
cd recipe-designer
# Install frontend dependencies
npm install# Web-only dev server (Vite, port 1420)
npm run dev
# Full Tauri desktop app with hot-reload
npm run tauri devThe Vite dev server runs on port 1420 (strict). Tauri automatically starts Vite before opening the desktop window.
# Build the desktop application
npm run tauri buildThe output binary will be in src-tauri/target/release/.
- Open the Dictionary Panel (left sidebar) to browse items and machines
- Drag an item onto the canvas to create a node
- Drag from one node's output handle to another node's input handle to create a flow edge
- Edges auto-create recipe slots on the target node with the connected item as input
- Use the Node Drawer (click a node → "Details") to configure recipes, machines, and catalysts
Each node can hold multiple recipe slots — alternative ways to produce the same item:
- Set production time, output quantity, and assign a machine
- Add tags to match specific machine requirements
- Configure catalyst mode (none / optional / required) with speed multipliers
- Define secondary outputs (byproducts)
Switch the active slot at any time; downstream calculations update automatically.
- Right-click a node → "Calculate BOM" (or press
Ctrl+B) - Choose One-Time Production or Continuous Production mode
- Pick a rounding strategy (integer ceiling or exact decimal)
- Select a byproduct strategy
- Click Calculate
The Production Tree shows the full hierarchy with status flags:
↻— Cycle detected⚠— Required catalyst missing⊘— No active recipe slot∅— Raw material (no recipe)
The Summary Table aggregates all items with quantities, rates per minute, and required machine counts.
- Select nodes →
Ctrl+Gto create group - Groups collapse to show aggregated input/output summaries
- Disband a group with
Ctrl+Shift+Gto restore individual nodes
The UI follows Bauhaus / Suprematism principles:
- Strict grid layouts with intentional alignment
- Primary colors — pure red, blue, yellow — highly contrasted
- Zero border radius — sharp, geometric edges throughout
- Bold block shadows — intense, solid shadow blocks instead of soft glows
- Plus Jakarta Sans for UI, JetBrains Mono for data and edge labels
- Per-node color theming via
color-mix(in srgb, ...)with CSS custom properties
Design tokens are centralized in src/styles/tokens.css. Shared component styles live in overlay.css and form.css. Before writing any hardcoded value in a component, check these files first — reusability over duplication.
Contributions are welcome! Please feel free to submit issues and pull requests.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Write code following the existing patterns (Composition API, TypeScript strict mode, CSS token reuse)
- Run tests (
npm test) - Commit your changes (commit messages in Chinese preferred)
- Push and open a Pull Request
For major changes, please open an issue first to discuss what you'd like to change.
This project is licensed under the MIT License — see the LICENSE file for details.