DrillFlow documentation
DrillFlow is a local-first diagram editor where every shape can open into its own sub-diagram. This page is the feature reference — for a hands-on start, open the editor and take the built-in tour (menu → Take a tour).
Drill-down & Subflows
Every shape can hold its own sub-diagram — a Subflow. Right-click a shape (long-press on touch) and choose Make subflow, or use the button in the inspector. The shape gets a small badge, and behind it a fresh, empty diagram.
- Drill in: double-click a shape that has a Subflow, or open it from the tree island. Nesting depth is unlimited.
- Find your way back: the breadcrumbs in the top-left corner always show where you are. Click any crumb, press Alt+↑, or use the Up button.
- The Subflow tree (toggle in the top-right corner) is your map: every diagram of the document, nested, with rename and delete on right-click.
- Names stay in sync: renaming a shape renames its Subflow — and the other way round; breadcrumbs and tree follow automatically.
Deleting a shape deletes its Subflow (and everything nested inside); duplicating a shape asks whether the Subflow should come along. Text labels and Pins cannot hold Subflows.
Canvas basics & tools
There are two ways to pick tools — choose in the preferences: the tool ring (press & hold the empty canvas, flick toward a tool, release) or a classic toolbar at the bottom.
- Shapes: rectangle R, circle O, diamond D, text T. Drag to draw a shape at exactly that size, or tap to place a default one (switchable in the preferences).
- Connect C: drag from shape to shape to draw an edge. Dragging into empty canvas leaves a Pin — a dangling endpoint you can connect or move later.
- Edges: the inspector sets direction (arrow, both ways, none), straight or curved, solid/dashed/dotted, and arrow size. A selected edge shows draggable waypoints; double-click writes a label onto it.
- Styling: font, size, bold/italic, alignment, fill or stroke color, and notes live in the inspector. Styles you set there become the default for the next shape you create.
- Tidy up: Arrange (top-right) auto-lays-out the current diagram; snap to grid keeps things aligned while you drag.
Layers
Each diagram has its own layers, managed in the panel below the Subflow tree. Add layers, rename them (double-click), hide or show them, merge a layer down, or delete one — choosing whether its shapes merge into the layer below or disappear with it.
New shapes land on the topmost visible layer; the base layer is always visible. Move a shape to another layer via right-click → Move to Layer.
Pen & freehand
The pen P draws freehand ink strokes straight onto the canvas — color and width (thin/medium/thick) sit right next to the tool. Strokes live on layers like shapes do, can be selected, restyled and moved, and the eraser X removes them with a click or a scrub.
Images
Insert images via menu → Insert image…. Images resize (free or with locked aspect ratio), rotate, and sit on layers like any other shape.
Opening a PNG or SVG that DrillFlow exported with an embedded scene asks whether to open the editable diagram inside it — or just insert the file as a plain image.
Node search
Ctrl+F (or the magnifier in the top-right corner) searches shape labels across all diagrams of the document. Every hit shows its diagram path, so deep matches stay distinguishable — picking one jumps there: the diagram opens, the shape is selected and centered.
Saving & opening files
DrillFlow autosaves your document to the browser's local storage as you work — the interval (or manual-only) is configurable, and the status bar shows every save. Your data stays on your device.
On top of that there are real files: Save As… writes a
.json file, and Save (Ctrl+S)
overwrites it in place on Chromium-based browsers — elsewhere it
re-downloads under the same name. A .json you open becomes
the save target, and a dot in the menu marks unsaved file changes.
Export formats
PNG & SVG
Export the current diagram as an image: light, dark or current theme, transparent or solid background, with or without the canvas pattern — or copy it straight to the clipboard. With Embed editable scene enabled, the whole document travels inside the image file: anyone can drop it back into DrillFlow and keep editing.
The PDF export renders every diagram of the document — one page per diagram, following the drill-down structure.
Markdown
Exports the document as a nested text outline — shapes, connections and Subflow structure as headings and lists, handy for notes or reviews.
JSON
The full document as a DrillFlow file (Ctrl+E) — lossless, re-importable, and the right format for backups.
Preferences
Menu → Preferences… collects the editor's settings:
- Language & appearance: Deutsch/English, dark or light theme.
- Canvas: pattern (dots, grid, cross, none), background tint, snap to grid.
- Tools & editing: tool ring vs. toolbar, default edge style (straight/curved), shape placement (drag to size vs. tap to place), default node label.
- Saving: autosave interval, from instant to manual.
Keyboard shortcuts
Press ? in the editor for the full cheat sheet. The ones worth memorizing:
- V select · C connect · R/O/D shapes · T text · P pen · X erase · hold Space to pan
- Ctrl+Z undo · Ctrl+Shift+Z redo · Ctrl+C/V copy/paste · Del delete
- Ctrl+S save file · Ctrl+F search · Ctrl+E export JSON
- Alt+↑ up one diagram · Esc back to select · double-click: edit label / open Subflow · just type with a shape selected to label it