A simple graph-based procedural dungeon generator.
Want to play with the generator? Try the demo here and have some fun 🧙♂️.
- Clone the repository.
- Run
yarnto install dependencies. - Run
yarn devto build and run the project and listen for changes. - Finally, double-click the
public/index.htmlfile to open the generator in your browser.
Given the same input graph, we can generate many dungeon shapes and pattern.
![]() |
![]() |
![]() |
![]() |
The project is split into 3 distinct modules (aka folders) in an effort to separate concerns:
/generate: where all the generation code lies (returns anNode<Room>tree)./draw: where we take theNode<Room>tree, generate a tilesmap, and render it to an HTML canvas with some debugging information./graphs: the list of input files used to generate the dungeon. Currently written in TypeScript for type safety, but could as well be JSON files.
- Generate a dungeon given a non-circular graph
- Backtracking when it cannot find a suitable spot for a child node
- Elegantly place the corridors between rooms
- Transform a node tree into a tilesmap
- Render contextual information for convenience
- Easily modifiable to add new room types and colors
This generator does not handle overly complex situations such as:
- Nodes with too many children
- L-shaped corridors
- Circular nodes (ex: A → B → C → A)
- Prevent rooms from touching sides which doesn't respect graph constraints
- Pick from a set of predefined rooms that are rectangles



