DrillFlow documentation

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.

Drag from a shape's border to another shape, or pick the Connect tool and drag between two. An endpoint dropped on empty canvas leaves a Pin — a dangling arrow you can attach later.

• Where an arrow meets a shape: by default it floats — it always touches the outline on the side facing the other end, and it follows when you move, resize or rotate either shape. Release on the border band instead and the end is pinned there; release on the body and it floats again. On an image, a drop on the picture pins the arrow inside it, so you can point at a detail of a screenshot.
• Line style (Inspector): straight, curved, or right angles. Right-angled lines go around shapes rather than through them, and the corners are computed on every render — they are not stored.
• Bend points are the ones you place: drag the dot in the middle of a run to add one, double-click or long-press a bend to remove it, or use Remove bend points on the connection's menu. A corner that a right-angled line needs in order to avoid a shape is not a bend point and cannot be removed — drawing the line straight is what removes it.
• Drag a whole run: on a right-angled line, grab any segment and move it; a run that touches a shape slides that endpoint along its own side.
• The connection's menu (right-click, or long-press on touch) edits the label, removes bend points, re-routes the line around whatever is in the way, draws it straight, or deletes it.
• Arrowheads and line weight are in the Inspector: arrow shape, solid/dashed/dotted, size S/M/L.
• Clean up → Re-route connections rebuilds every right-angled route in the open diagram, including ones you bent by hand.

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.

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.

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.

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.

Pictures are kept lean on the way in: scaled to at most 1600 pixels on the long side, and stored as JPEG unless they really use transparency — a screenshot is usually a PNG that does not. If a document grows too large to share anyway, the share dialog says how much of it is pictures and offers Shrink pictures; the same action is under Clean up. It re-encodes them until the document fits, without changing their size on the canvas.

Menu → New… offers a blank canvas or a starter: flowchart, fishbone, SWOT, system breakdown and others. Every built-in template is at least two levels deep, so you can see what drill-down is for before you have drawn anything.

A template is an ordinary document once it is open — nothing stays linked to the original. Your own documents can be marked as templates in the document manager, and then appear in the same picker.

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.

How far it looks

A switch above the results picks the reach, and the three are mutually exclusive so nothing can appear twice:

• This document — every level of what you have open. Free, no account.
• All documents Account — every document on this device, open or not. Needs an account; the index is built in your browser the first time you use it, so nothing is uploaded.
• Cloud Pro — every document in your cloud at once. A Pro feature, and at least three characters.

Matching is on substrings, not word starts, so zahl finds Bezahlung; accents are ignored, so rucklaufer finds Rückläufer. Labels, notes and level titles are all searched.

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.

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.

Local-first stays the default: nothing leaves your browser until you say so. Switch a document on — the cloud button beside the save chip, or the switch in the document manager — and it follows you to the next machine. Per document, never the whole folder, and it needs a Pro plan to write.

• The chip beside the save status says where the open document stands: not in the cloud, sending, up to date, or a newer version waiting. One button means belonging, the other means syncing.
• When it syncs: after every local save, when the window comes back, and on demand. An optional clock (10 / 30 / 60 seconds) lives in Preferences and is per browser — a phone on mobile data does not inherit a desktop's ten-second rhythm.
• Two devices, one document: every accepted write counts up a version. If the other device wrote first, DrillFlow asks instead of overwriting — nothing is lost silently.
• Taking a document out reaches every device, so it asks first. The copy on your disk is never touched by it.
• Reading and removing never need the plan, only writing does. Cancelling a subscription is not a data-loss event.

Every push to your cloud leaves the previous state behind. Open Earlier versions — the clock beside the cloud chip, or on a document's row in the manager — to see them, with the number of shapes and levels each one held, and restore one.

• How far back: everything from the last hour, one per hour for a day, one per day up to 30 days. The two questions people actually ask are "ten minutes ago" and "last week".
• A restore is an ordinary save: the old state comes back as a new version, and the state it replaced stays in the list beside it. Nothing is overwritten.
• Taking a document out of your cloud takes its history with it, and so does deleting the account.
• Reading history never needs the plan — only writing one does.

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.

flowchart TD
  A[Catalog] --> B[Checkout]
  subgraph Checkout
    C[Cart] --> D[Payment]
  end

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.

An assistant can also skip the copy-and-paste entirely. DrillFlow has an MCP server — free and open source — which plugs into Claude Desktop, Claude Code and other MCP clients: ask for a process, and you get back a link to a finished diagram, every level of it a Subflow you can open. It can read a published diagram back too, so you can ask for changes to one you already have. Add it with one line:

npx -y drillflow-mcp

Installation for each client is described at github.com/capydev42/drillflow-mcp. Links made this way are the ordinary share links: public to whoever holds them, and — since the server is not signed in to your account — they stop working after 72 hours. The same caution as above applies: what an assistant draws is a starting point you edit.

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 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 and PDF carry a small “Made with DrillFlow” mark; Pro a Pro plan exports them without it.

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.

Interactive HTML Pro

One file that contains the document, the fonts and the real read-only viewer. It opens over file:// with no network and keeps the drill-down — every other format flattens a walkable model into a picture. A second menu entry bakes the same file as a presentation, which opens on a start screen and runs the talk.

Every level as a zip Pro

The image dialog can write one picture per level instead of one picture, zipped, with the file names following the drill-down order.

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.

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.

Share (top-right) uploads a read-only snapshot of your document (up to 2 MB, or 8 MB with Pro, 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. An anonymous link expires after 72 hours and cannot be called back — the dialog names the exact moment. Sign in (menu) before sharing and the link is saved to your account instead: it does not expire, and under My shared links you can list it, give it an expiry, switch off “viewers may copy”, and revoke it. A password, a readable address and the view counter are Pro — see Your account.

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.

Menu → Embed… builds the snippet for putting a diagram inside somebody else's page — a wiki, a Notion page, a README. The dialog has a live preview, size presets, and three forms to copy: the plain URL, an <iframe>, and a picture link.

• The embed keeps its depth. Breadcrumbs and double-click drill-down work inside the frame, which is the whole point — a competitor's embed is a flat picture.
• It is a snapshot. Nothing re-publishes an existing link, so later edits do not change what is embedded; share again for a fresh one. DrillFlow remembers the link a document already has, so embedding twice does not orphan what you already pasted somewhere.
• The "Made with DrillFlow" chip is the only way back out of a frame and stays.

Menu → Present runs the flow as a talk: one step at a time, the current shape lit and the rest dimmed. A step that owns a sub-diagram is followed by that sub-diagram's steps, so going a level deeper is an ordinary page turn. It is free, in the editor and in every shared link.

• Order comes from the arrows first and from the drawing order within a level second. Pins, ink and hidden layers are not steps.
• Keys: →/Space forward, ← back, Esc ends it. Presenting claims the keyboard first, so single-letter tool keys stay out of the way.
• Build-up: shapes can appear as the talk reaches them. A shape marked skip in presentation arrives with the flow but never gets a stop of its own.
• Notes written on a shape show on the presenter's side.
• Full screen is requested when the talk starts; leaving full screen by the browser's own gesture ends the mode.

An account is optional and free. Sign in from the menu; the account page (menu → your address) collects everything below. Instead of a password you can use Sign in with Google or Sign in with GitHub: if an account with the same verified address exists you land in it, otherwise a new one is made — without a password, which you can set later by mail. The provider hands us only the address and an account identifier, no name and no picture. Under Security you can connect the other provider too, and disconnect either while another way in remains.

• Your links stop expiring. An anonymous link dies after 72 hours and nobody — including us — can call it back. An account's links live until you revoke them, and you can list, rename, expire and revoke them. The list shows each link's title and picture, can be searched, filtered and sorted, and revokes several links at once. A free account holds up to 50 live links; Pro has no limit.
• Settings follow you. Language, theme, fonts, edge style and the rest arrive on the next machine you sign in on. Things that describe a screen rather than a person — panel positions, widths, the autosave interval — stay local on purpose.
• Search every document on this device becomes available: the same box that searches the open document can reach all of them.
• A handle and readable link addresses (/view/@you/onboarding) are a Pro feature. Names are unique within your own handle, never globally, and the original short link keeps working — a name is a second way in, not a move.
• Change your address, take your data: under Profile you move the account to a new email address — confirmed by a link to the new address (without a password, first to the current one) — and download everything the account holds as a ZIP of DrillFlow files.
• Security: change your password while signed in (every other device is signed out, and you get a mail about it), or sign out all other devices on their own — for a lost phone or a shared computer. API tokens are separate and stay valid until you revoke them. Google is connected and disconnected there too; disconnecting needs a password on the account, or there would be no way back in.
• Deleting the account removes it, every link it owns and everything in its cloud. It asks for the password first — or, for an account without one, sends a confirmation link to its email address. A running subscription is cancelled at once, and a mail confirms the deletion.

A token lets a script or an assistant publish into your account rather than anonymously — the link is then yours to list and revoke, and it does not expire. Mint one on the account page; it is shown once.

• Send it as Authorization: Bearer dfp_… on POST /api/doc, or put it in the MCP server's DRILLFLOW_TOKEN.
• Minting needs Pro; using, listing and revoking never do. A lapsed subscription must not break a pipeline at three in the morning.
• A token that has been revoked is refused outright rather than quietly falling back to an anonymous link.
• Tokens are for servers and command lines. No web page can make a browser send one.

The editor is free and stays free: unlimited depth, layers, the pen, import, export, presentation mode and sharing all work without an account. Nothing that is free today will become paid.

• Without an account: everything in the editor, share links up to 2 MB that expire after 72 hours.
• With a free account: up to 50 live links that do not expire and can be managed, settings that follow you, and search across every document on the device.
• Pro adds what costs us something to run: documents in your cloud with version history, search across all of them, bigger share links, password-protected and named links, the interactive HTML export, exports without the DrillFlow mark, and API tokens.

The full comparison is on the home page.

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.
• Shortcuts: move the tool keys, search, duplicate and front/back to keys of your own — see Keyboard shortcuts.
• 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.

Press ? in the editor for the full cheat sheet. The default keys 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+D duplicate selection · Ctrl+]/[ bring to front / send to back
• 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

Your own keys

The ten tools, search, duplicate and front/back can be moved to keys of your choice under Preferences → Shortcuts: click the key, press the new one. A key another action already uses, or one the editor needs for something else (undo, copy, save, the arrows), is refused and the dialog says why. The toolbar, the tool ring and the cheat sheet show your keys, and with an account they follow you to the next browser. Three stay fixed, because they are gestures rather than keys: holding Space to pan, Ctrl+arrow for a connected shape, and typing to label a selected shape.