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.

The whole flow in one minute: draw, connect, drill down, resurface.

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.

The tool ring in action: hold, flick, draw.
  • 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.

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.

PDF

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.

Sharing & accounts

Share (top-right) uploads a read-only snapshot of your document (up to 2 MB, stored in Germany) and gives you a link. Anyone with the link can view the diagram — including full drill-down. It is a snapshot: later edits don't change the link; share again for a fresh one.

No account is needed to draw, export or share. Sign in (menu) before sharing and the link is saved to your account — under My shared links you can list and revoke every link you created.

Read-only views

Whoever opens a share link sees the diagram with breadcrumbs and the Subflow tree: they can pan, zoom, and drill into Subflows by double-clicking — the whole depth of your document is navigable.

What they can't do: edit anything, or see any document beyond the snapshot you shared. Your local work never leaves your device.

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