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 on the left edge) 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.
What goes in and out
Drilling in answers what happens inside — but on its own it loses sight of what reaches the shape from outside. So a Subflow shows the arrows of the level above as connection points on the edge of its canvas: the ones pointing at the shape on the left, the ones leaving it on the right.
- They are real connection points, not labels. Draw an arrow from an input to whichever step inside actually handles it — and one input may branch to several.
- They are named after the shapes upstairs and follow along when you rename those.
- Delete an arrow up there and its marker stays behind, marked, rather than taking the work you did inside with it.
- Switch them off per Subflow in the inspector or the Subflow tree's right-click menu. Preferences → Canvas sets what Subflows do by default, and offers the shape they are drawn in — an arrow tag that points the way the boundary is crossed, or a plain circle. That last one is about your own view and does not travel with a shared link.
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).
- Select V: click a shape, or drag a box on empty canvas to take everything it fully encloses.
- Lasso L: draw a freehand loop instead — anything whose middle it encircles comes with it. Use it when the shapes you want sit diagonally among ones you don't, which a rectangle can't separate.
- Several at once: right-click (long-press on touch) inside a selection to duplicate, copy, move it to a layer or delete it. The inspector restyles the whole set in one go — colour, font, size — and each change counts as a single undo.
- 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.
- Just one word: while you are editing a label, select part of the text — a small bar appears over it for bold, italic, font, size and colour, and the inspector's text row switches to the selection too. Alignment stays a property of the whole label. Rewriting the label anywhere else (renaming from the subflow tree, an import) drops the formatting, because the marked positions no longer describe the new text.
- Tidy up: Arrange (top-right) auto-lays-out the current diagram; snap to grid keeps things aligned while you drag.
- Resize: drag a shape's corner to change both dimensions, or a side handle for just width or height. The Subflow-tree and inspector panels are resizable too — drag their outer edge.
On a tablet or phone one finger does the work of the mouse: it drags shapes, draws selections and inks. Two fingers pan and pinch-zoom the canvas, and a two-finger double tap undoes — there is no Ctrl+Z to reach for. If you would rather push the canvas around with one finger, switch to the hand tool H. The full list lives in the editor itself, under ≡ → Help → Shortcuts & gestures, with a section per input device — touch first when you are on a tablet.
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
Add an image via menu → Import → Image…, or just drag image files straight onto the canvas — drop several at once and they fan out instead of stacking. 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 a small chip in the top-right 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.
Multiple documents
DrillFlow keeps a collection of local documents, not just one. The title menu in the top-left corner switches between them, and New adds a document without discarding the one you're on. Rename the current document right from the title (the ✎ next to it — press Enter to accept).
Manage documents… opens a searchable, sortable view of everything — as a list or a grid of live thumbnails — where you can switch, rename or delete. Making a copy of a shared diagram adds it as its own document instead of replacing your current work. Everything stays local in your browser.
Editing across tabs is safe: with the same document open in more than one browser tab, DrillFlow notices when another tab changes it and asks what to do — reload the latest or keep your version — instead of one tab silently overwriting the other.
Import
The menu's Import entry brings outside content in.
Mermaid
Import → Mermaid… takes a Mermaid flowchart/graph — pasted or
opened from a .mmd file — and turns it into an editable diagram. Each
Mermaid subgraph becomes a drill-down Subflow, nested
as deeply as you like; shapes, arrow styles and edge labels carry over, and
everything is auto-arranged on the way in.
Because Mermaid is plain text, this is also the way to get a diagram out of
an AI assistant: ask it for a Mermaid flowchart with each level in a
subgraph, then paste what it gives you. The full document
format is written down at Format, together with a
ready-made skill for Claude. Assistants are good at Mermaid and less good
at the fine print, so if one draws an edge between two separate subgraphs
the import will tell you how many edges it had to drop — treat a generated
diagram as a starting point you edit, not a finished one.
Excalidraw
Import → Excalidraw… opens an .excalidraw file, or a
selection copied straight out of the Excalidraw canvas, and rebuilds it here
in the positions you drew it: rectangles, ellipses, diamonds, text, arrows
with their labels, freehand strokes and embedded images. An Excalidraw
frame becomes a drill-down Subflow — everything inside it
moves onto its own level, and arrows that crossed the frame edge reconnect
to the frame. The import is lossy: the sketchy look, fill patterns, opacity,
groups and stacking order are not carried over, and anything that could not
come along is counted for you when it lands. It arrives as a new document,
so whatever you had open stays untouched.
draw.io
Import → draw.io… opens a .drawio or .xml
file — compressed or not — or takes the XML you copy out of draw.io's
Extras → Edit Diagram. Shapes, connectors with their labels and
waypoints, colours, fonts, dashed lines and layers arrive in the positions
you drew them. Two things become levels: a shape that
links to another page opens that page as its Subflow, and a container or
swimlane becomes a Subflow of its contents — so a multi-page diagram
arrives as a drill-down rather than a pile of tabs. A page nothing links to
still gets its own shape on the first canvas, so nothing is lost. Lossy in
the same way as the others: stencil artwork becomes a labelled rectangle,
gradients and shadows are dropped, and whatever could not come along is
counted for you.
The Import menu's Image… entry inserts a picture — see Images.
Export formats
Export is a submenu, like Import. Each option notes whether it covers the whole document or just the current diagram, and the text formats — Markdown, JSON and Mermaid — can be copied straight to the clipboard instead of downloading a file.
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.
Mermaid
Turn a diagram into Mermaid flowchart text — the round-trip
companion to Mermaid import. Export the whole document or just the diagram
you're in; every drill-down Subflow becomes a nested subgraph.
It is lossy by nature — colours, exact positions, waypoints, images and Pins
aren't preserved — but it's handy for re-importing later or pasting into an LLM.
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, and the two settings for a Subflow's inputs and outputs — whether they are shown at all, and the shape they are drawn in.
- 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.
A preference decides what happens next, and only the inputs and outputs setting also touches what already exists — so it asks first. Switch it and DrillFlow offers two answers: apply it to all Subflows of the open document (which also clears the ones you had set by hand, so everything follows the preference again), or only to those without their own setting. Either way it is one undo step, it only ever touches the document you have open, and other documents follow when you open them. A Subflow you switched off by hand stays off until you say otherwise.
Keyboard shortcuts
Press ? in the editor for the full cheat sheet. The ones worth memorizing:
- V select · L lasso · H hand · 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
- Ctrl+↑↓←→ build without the mouse: hold the modifier, press an arrow, and a dashed preview shows where the next shape goes — let go and it is placed, connected and selected, ready to be labelled. Press the same arrow again for a second branch off the same point.
- Alt+↑ up one diagram · Esc back to select · double-click: edit label / open Subflow · just type with a shape selected to label it