How to make a directory map
A guide to drawing directory maps and site structure diagrams by connecting folder and file nodes with arrows.
A directory map is a diagram of your folder and file hierarchy. With this tool you just place folder📁 and file📄 nodes and connect them with arrows to build a README tree or a site structure diagram. Free, no sign-up, autosave, and PNG / JSON export.
Basic steps (5)
- Load the sample: click Sample (top right) to show a tree example centered on the canvas. Editing it is the fastest start.
- Add folders and files: pick the Folder / File tool and click the canvas to place a node. Double-click to edit its name.
- Connect with arrows: pick the Connector tool and drag from one node to another. Arrows from the same parent branch automatically.
- Refine the look: toggle right-angle / straight and one-way / two-way / none arrows. Choose colors from the color wheel. Drag on empty space to marquee-select.
- Export: save as PNG or JSON. JSON can be loaded back, and everything autosaves.
Toolbar overview
- Nodes: folder📁 / file📄 / sticky note / rectangle, ellipse, diamond
- Arrows: drag between nodes with the Connector. Switch shape (straight / right-angle) and ends (→ one-way / ↔ two-way / — none)
- Color: click the color-wheel icon and pick from the palette (theme default until you pick)
- Zoom: − / +, click the % to reset to 100%
- Actions: delete, export PNG, save JSON, load JSON, clear all
- Sample: far right — loads the tree example
Keyboard shortcuts
| Action | Keys |
|---|---|
| Select / Move | V |
| Folder / File | F / G |
| Connector (arrow) | C |
| Sticky / Rectangle / Ellipse / Diamond | S / R / O / D |
| Delete | Delete |
| Select all | ⌘+A |
| Copy / Paste | ⌘+C / ⌘+V |
| Cut / Duplicate | ⌘+X / ⌘+D |
| Pan (scroll) | Wheel |
| Zoom | ⌘/Ctrl+ Wheel |
On Windows / Linux, read ⌘ as Ctrl.
FAQ
Is it free?
Yes. It is completely free with no sign-up and runs entirely in your browser.
Is my work saved?
Your work autosaves in your browser (localStorage). You can also export it as JSON to save or share, and load it later to restore.
Can I make right-angle or two-way arrows?
Yes. Use the arrow icons to switch right-angle (branching) / straight and one-way / two-way / no arrow. Nearly-aligned parent-child arrows straighten automatically.
Can I work with multiple nodes at once?
Drag on empty space to marquee-select. Shift+click to add to the selection, ⌘+C / ⌘+V to copy and paste, and move selected nodes together.
Is there a dark mode?
Yes (dark is the default). Use the sun/moon button at the top right to switch between light and dark.
How do I pan and zoom?
Use the mouse wheel (or two-finger scroll) to move the canvas, and ⌘/Ctrl+ wheel to zoom.
Open the tool →