Documentation

Everything FlowDiagrams can do — and how to drive it from a URL, a script or an AI agent. Free, no sign-up, and nothing ever leaves your browser.

Quick start

FlowDiagrams runs entirely in your browser. There is no account, no upload and no server — open flowdiagram.net and start drawing. It also installs as an app (look for the install icon in your browser's address bar) and keeps working with no connection.

• Pick a shape from the toolbar, then drag on the canvas.
• Press Ctrl+K at any time — that palette can reach every feature on this page, including all 200+ vendor logos.
• Drag from the edge of one shape to another to connect them. Connections stay attached when you move things.
• Not sure where to begin? Insert a starter template and edit it.

Saving & your data

Your work saves itself to this browser continuously — close the tab and it will be there when you return. Nothing is transmitted anywhere. That is a deliberate design decision, not a limitation: integration and schema diagrams routinely name internal systems and vendors, and the safest place for that is a machine you control.

Because storage is per-browser, moving a diagram between machines means using one of these:

• Save to file (Ctrl+S) writes a .flow.json you can store anywhere.
• Share a link (Ctrl+L) puts the whole diagram inside a URL.

Share a link

Press Ctrl+L, or use the share button in the top-left toolbar. FlowDiagrams compresses the diagram and encodes it into the URL itself, so the link is the document — there is no server storing it, nothing to expire, and no permissions to manage.

Choose whether to include just the current page or every page, then copy the link. Anyone who opens it gets their own fully editable copy.

Long diagrams make long links. The dialog shows the size and warns past roughly 8 KB, because some chat applications truncate URLs beyond that. If you hit it, share fewer pages or send a .flow.json file.

Open a diagram from a URL

Anything after the # in a FlowDiagrams URL is treated as content to open. This is the mechanism behind sharing, and it is also the easiest way for a script or an AI assistant to hand someone a finished diagram — see the URL API for the full list and copy-paste examples.

If the app is already open in that tab, pasting a link into the address bar still works: the diagram loads without a page reload.

Images in & out

Copying a diagram as an image

Ctrl+Shift+C copies the current selection — or the whole page if nothing is selected — to your clipboard as a PNG, ready to paste into Slack, a document or a slide deck. No file picker, no download folder.

Pasting a screenshot in

Paste any image with Ctrl+V, or drag an image file onto the canvas, and it becomes a normal element you can move, resize and rotate. Useful for annotating a screenshot of a real console or dropping in a logo the built-in library does not carry.

Pasted images are stored inside the diagram, so they travel with a .flow.json file and with share links. Large images make large files — keep them under a few hundred KB where you can.

Export: image, PDF, text

Open Export with Ctrl+E.

Every format can export the whole page or just the current selection, with an optional transparent background.

Command palette

Ctrl+K opens a searchable list of everything the app can do: tools, alignment, exports, templates, saved views, page switching — and all 200+ vendor logos. Typing snow finds both the Snowflake logo and the Snowflake template.

Choosing a logo places it on the canvas at the centre of your current view, which is considerably faster than scrolling the library panel once you know the vendor's name.

Find on the canvas

Ctrl+F searches the whole document — shape labels, table names, column names, column comments and system logos — across every page, not just the one in front of you.

Selecting a result jumps to the right page, zooms to that element and selects it. The palette stays open so you can walk through the remaining matches. On a sixty-system landscape this is the difference between "where is SAP BW?" taking two seconds and two minutes.

Recent snapshots & recovery

FlowDiagrams keeps a rolling history of your whole document — automatically every few minutes while you work, when you leave the tab, and before anything that would replace what is open (opening a file, clearing a page, restoring another snapshot).

Open Recent snapshots from the menu to see them, with how long ago each was taken and how much it contained. Restore replaces the open document — and takes a snapshot of the current state first, so restoring is itself reversible.

Snapshots live in a different browser store from the main autosave, deliberately: history can never compete for space with the file you are actively editing. If you open FlowDiagrams and find an empty canvas where work used to be, check here first.

Starter templates

Under Starter templates in the menu, grouped so the list stays navigable as it grows. Each one inserts a complete, editable diagram — not a blank frame.

Templates insert onto the current page. If the page already has content you will be asked first.

Saved views

A view is a bookmarked camera position — which page, and exactly where you were panned and zoomed to. Open Views from the menu, frame the part of the diagram you care about, give it a name and save.

Views are listed in their running order rather than alphabetically, and the arrows beside each one reorder them. That order is what Present mode follows, so it is worth getting right.

Present mode

With a few views saved, choose Present saved views from the menu. The editing interface gets out of the way and you step through your views in order — an overview, then the integration layer, then the data platform.

Nothing is rendered into static slides — it is the same live canvas throughout, so animated arrows keep moving and the diagram stays crisp at any zoom.

Animated data flow

Select any connector and set Flow to Slow or Fast in the style panel. Packets then travel along the arrow in the direction data moves.

Trace what a system feeds

You do not have to mark anything by hand. Click any system and everything it feeds downstream starts flowing — following the arrows out of it, through every hop, to the end of the chain. Inbound arrows from unrelated systems stay still, so what animates is exactly the blast radius of the thing you clicked.

This is transient: nothing is written to the document, and it never appears in an export. Turn it off from the menu (Trace flow on click) if you would rather only see connectors you marked yourself.

On an integration landscape this communicates direction faster than arrowheads and labels do, and it makes the difference between a diagram people glance at and one they actually read. It is especially effective in Present mode.

Naming shapes

Select anything and the first field in the style panel is its label — System name for a vendor logo, Table name, Zone name, Connector label, and so on. Type and the canvas updates live; the change lands in undo history once, when you finish, not once per keystroke.

On a desktop you can also double-click a shape, or select it and press Enter.

ER diagrams

Press M to turn on entity diagram mode, then E and drag to place a table.

• Edit columns — select the table and press Enter, or double-click it. Bulk-paste column definitions as text if you have them.
• Foreign keys — drag from the edge of one column's row onto another table's column. Crow's-foot markers are applied automatically.
• Trace a key — hover any column row and every relationship it participates in lights up, along with the table at the other end. The quickest way to answer "where does this actually point?"
• Column types — each type gets a small colour dot by family (numeric, date/time, boolean, JSON, binary, identifier, text), so scanning a twenty-row table is a glance rather than a read.

Import from a CSV header

Most real schemas arrive as a spreadsheet nobody has DDL for. Choose Import table from CSV header, paste the header row, and FlowDiagrams builds the table for you.

Include one data row as well and column types are inferred from it — integers, decimals, dates, timestamps, booleans, UUIDs and JSON are all recognised, and text columns get a sensible varchar length. Columns named id are marked primary key and *_id columns are marked foreign key.

order_id,customer_id,order_date,total_amount,status
1001,88,2026-04-19,249.90,SHIPPED

Only the first two lines are read, so pasting an entire export is fine — and as always, none of it leaves your browser.

SQL, Mermaid & DBML

FlowDiagrams reads and writes the text formats schemas already live in.

Mermaid export picks its own dialect: a page with entity tables becomes an erDiagram, anything else becomes a flowchart. Both round-trip back through the importer, so text is a legitimate way to keep a diagram under version control.

Agent quick reference for LLMs

If you are an AI assistant producing a diagram for someone, here is the whole decision in one place.

https://flowdiagram.net/#mermaid=<URL-encoded Mermaid source>

There is also an installable skill file for Claude Code, Codex, Cursor and similar tools — click the sparkle icon in the app's toolbar to download it, along with per-tool install instructions.

URL API

Everything below is a plain GET — put it in a link, a chat reply or a README. The # fragment never reaches a server, so diagram content stays on the user's machine even when the link is clicked from somewhere else.

Imported content always lands on a new page and never replaces the user's existing work.

Example

This Mermaid source:

flowchart LR
  A[Client] --> B{API Gateway}
  B --> C[(Database)]

becomes this link:

https://flowdiagram.net/#mermaid=flowchart%20LR%0A%20%20A%5BClient%5D%20--%3E%20B%7BAPI%20Gateway%7D%0A%20%20B%20--%3E%20C%5B(Database)%5D

Build it in one line:

const url = 'https://flowdiagram.net/#mermaid=' + encodeURIComponent(mermaidSource);

JavaScript API

With the app open, window.FlowDiagrams exposes the same capabilities the interface uses — useful for browser automation, headless rendering, or an agent driving the page directly.

// read back what the user changed, as text
const mermaid = window.FlowDiagrams.toMermaid();

// hand the user a link
const url = await window.FlowDiagrams.shareLink('all');

The .flow.json schema

A published JSON Schema describes the document format, so a generated file can be validated before a user tries to open it. Get it from Menu · Export as text · JSON Schema, or window.FlowDiagrams.schema().

The minimum viable document:

{
  "app": "FlowDiagrams",
  "version": 1,
  "pages": [{
    "id": "p1",
    "name": "Page 1",
    "els": [
      { "id": "n1", "type": "node", "icon": "snowflake", "text": "Snowflake",
        "x": 0, "y": 0, "w": 130, "h": 104, "roughness": 0 },
      { "id": "n2", "type": "node", "icon": "powerbi", "text": "Power BI",
        "x": 260, "y": 0, "w": 130, "h": 104, "roughness": 0 },
      { "id": "a1", "type": "arrow", "x": 0, "y": 0, "points": [[0,0],[1,1]],
        "routing": "elbow", "endArrow": "arrow", "roughness": 0,
        "start": { "id": "n1", "anchor": "auto" },
        "end":   { "id": "n2", "anchor": "auto" } }
    ]
  }]
}

Points to note:

• Set "roughness": 0 on every element unless you specifically want the sketchy look.
• Arrows bound with start/end re-route themselves; the literal points are only a fallback, so approximate values are fine.
• type: "node" requires an icon key — the vendor logo identifier, e.g. sap, snowflake, kafka, salesforce.
• Bind an arrow to a specific table row with "anchor": "r:2" (zero-based column index) to express a foreign key.
• Add "flow": true to an arrow to make it animate, with an optional "flowSpeed" of 1 or 2.2.

Keyboard shortcuts

The full list lives in the app — press ?. The ones worth memorising: