Documentation

Everything FlowDiagram can do — and how to drive it from a URL, a script or an AI agent. Free, no sign-up, and your diagrams never leave your browser.

What FlowDiagram is

Turn ideas into diagrams with AI.

FlowDiagram is a free diagram editor that runs entirely in your browser. It draws flowcharts and process flows, system and integration architecture diagrams, data pipelines, network diagrams and entity relationship (ER) database models — and unlike a general drawing tool, it is built so an AI assistant can produce those diagrams for you and hand them over as a link you click.

Describe a system in plain English to an assistant that has the skill file, and it writes a real, editable document: correct shapes, attached connectors, tables with columns and keys, and the right vendor logos. Open it here and it behaves exactly like something you drew by hand. If you would rather draw it yourself, nothing about the AI route is in the way.

Quick start

FlowDiagram runs entirely in your browser. There is no account, no upload and no server holding your work — 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. See Privacy & analytics for exactly what does and does not leave the page.

• 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 1,160 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? On an empty page the undo buttons become a Templates chip — start from one of 16, or browse 520+ more at flowdiagram.net/templates.

Examples you can open

Nine diagrams, each one a link. The source is carried inside the link itself, so clicking one opens a finished diagram you can move, restyle and export — there is nothing to download and nothing gets uploaded on the way. They land on a new page in whatever you already had open, so trying one can never cost you your own work.

Each is also a copy-and-paste reference for the format it uses. Every one was run through the app’s own importer before it was published.

A sign-up flow, with the branch in it

The plain flowchart case: a decision that branches both ways, a database write, and nine lines of Mermaid that arrive as a real editable diagram rather than a picture of one.

flowchart TD
  A((Visitor lands on pricing)) --> B[Starts sign-up]
  B --> C{Email already registered?}
  C -->|Yes| D[Send a sign-in link instead]
  C -->|No| E[Create the account]
  E --> F[(Write to users)]
  F --> G[Send welcome email]
  G --> H((Trial starts))
  D --> H

Open this in FlowDiagram Mermaid flowchart · 9 lines

Order-to-cash across six systems

An integration landscape: what talks to what, left to right. Drop real vendor logos on the boxes afterwards from the system library.

flowchart LR
  Shop[Shopify storefront] --> Bus[(Kafka order events)]
  Bus --> ERP[SAP S/4HANA]
  Bus --> DWH[(Snowflake raw)]
  ERP --> WMS[Warehouse WMS]
  WMS --> Car[Carrier API]
  Car --> Shop
  DWH --> DBT[dbt models]
  DBT --> BI[Power BI]

Open this in FlowDiagram Mermaid flowchart · 9 lines

A nightly ELT pipeline

Three sources, one loader, a warehouse and a transform step. The shape of almost every data platform diagram anyone is asked for.

flowchart LR
  SF[Salesforce] --> FV[Fivetran]
  PG[(Postgres OLTP)] --> FV
  S3[(S3 event files)] --> FV
  FV --> RAW[(Snowflake RAW)]
  RAW --> DBT[dbt build]
  DBT --> MART[(Snowflake MARTS)]
  MART --> LK[Looker]
  DBT --> AL[Alert on test failure]

Open this in FlowDiagram Mermaid flowchart · 9 lines

One request through a microservice stack

Where a request actually goes, including the caches and the queue. Useful in a postmortem when everyone is guessing at the hop that was slow.

flowchart LR
  U((Browser)) --> CDN[CDN]
  CDN --> GW[API gateway]
  GW --> AU[Auth service]
  GW --> OR[Orders service]
  OR --> CA[(Redis cache)]
  OR --> DB[(Postgres)]
  OR --> Q[(RabbitMQ)]
  Q --> EM[Email worker]

Open this in FlowDiagram Mermaid flowchart · 9 lines

An on-call decision tree

A runbook as a picture. Decisions fan out, and every path ends somewhere — which is the thing a written runbook hides.

flowchart TD
  A((Page fires)) --> B{Is the site up?}
  B -->|No| C[Declare an incident]
  B -->|Yes| D{Error rate climbing?}
  D -->|Yes| E[Roll back the last deploy]
  D -->|No| F[Silence and note it]
  C --> G[Post status page update]
  E --> H{Fixed?}
  H -->|No| C
  H -->|Yes| I((Close the page))
  F --> I
  G --> I

Open this in FlowDiagram Mermaid flowchart · 12 lines

An order schema as a Mermaid ER diagram

Crow's-foot relationships and typed columns. Tables arrive as real tables here, not as boxes with a list of words in them.

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ ORDER_ITEM : contains
  PRODUCT ||--o{ ORDER_ITEM : "appears in"
  CUSTOMER {
    int customer_id PK
    string email
    string country
    date signed_up_on
  }
  ORDER {
    int order_id PK
    int customer_id FK
    date placed_on
    decimal total_amount
  }
  ORDER_ITEM {
    int order_item_id PK
    int order_id FK
    int product_id FK
    int quantity
  }
  PRODUCT {
    int product_id PK
    string sku
    string name
    decimal list_price
  }

Open this in FlowDiagram Mermaid erDiagram · 28 lines

The same schema, from CREATE TABLE

Paste the DDL you already have. Primary and foreign keys become keys and crow's feet; export it back out and the constraints are still there.

CREATE TABLE customers (
  customer_id  INTEGER      NOT NULL PRIMARY KEY,
  email        VARCHAR(255) NOT NULL UNIQUE,
  country      CHAR(2),
  signed_up_on DATE         NOT NULL
);

CREATE TABLE products (
  product_id  INTEGER       NOT NULL PRIMARY KEY,
  sku         VARCHAR(32)   NOT NULL UNIQUE,
  name        VARCHAR(200)  NOT NULL,
  list_price  DECIMAL(10,2) NOT NULL
);

CREATE TABLE orders (
  order_id     INTEGER       NOT NULL PRIMARY KEY,
  customer_id  INTEGER       NOT NULL REFERENCES customers(customer_id),
  placed_on    DATE          NOT NULL,
  total_amount DECIMAL(12,2) NOT NULL
);

CREATE TABLE order_items (
  order_item_id INTEGER NOT NULL PRIMARY KEY,
  order_id      INTEGER NOT NULL REFERENCES orders(order_id),
  product_id    INTEGER NOT NULL REFERENCES products(product_id),
  quantity      INTEGER NOT NULL
);

Open this in FlowDiagram SQL DDL · 27 lines

A Snowflake star schema

A fact table and its dimensions, in Snowflake types. The same DDL round-trips: import it, rearrange it, export it back.

CREATE OR REPLACE TABLE dim_customer (
  customer_key  NUMBER(38,0)  NOT NULL PRIMARY KEY,
  customer_id   VARCHAR(36)   NOT NULL,
  country       VARCHAR(2),
  segment       VARCHAR(40),
  valid_from    TIMESTAMP_NTZ NOT NULL,
  valid_to      TIMESTAMP_NTZ
);

CREATE OR REPLACE TABLE dim_product (
  product_key NUMBER(38,0) NOT NULL PRIMARY KEY,
  sku         VARCHAR(32)  NOT NULL,
  category    VARCHAR(80),
  brand       VARCHAR(80)
);

CREATE OR REPLACE TABLE dim_date (
  date_key   NUMBER(8,0) NOT NULL PRIMARY KEY,
  cal_date   DATE        NOT NULL,
  fiscal_qtr VARCHAR(6)
);

CREATE OR REPLACE TABLE fct_order_line (
  order_line_key NUMBER(38,0)  NOT NULL PRIMARY KEY,
  customer_key   NUMBER(38,0)  NOT NULL REFERENCES dim_customer(customer_key),
  product_key    NUMBER(38,0)  NOT NULL REFERENCES dim_product(product_key),
  date_key       NUMBER(8,0)   NOT NULL REFERENCES dim_date(date_key),
  quantity       NUMBER(10,0)  NOT NULL,
  net_amount     NUMBER(18,2)  NOT NULL
);

Open this in FlowDiagram SQL DDL · 30 lines

A DBML schema from dbdiagram.io

If your schema already lives in DBML, it comes straight across — references included — and exports back out the same way.

Table users {
  id integer [pk]
  email varchar [unique, not null]
  created_at timestamp
}

Table projects {
  id integer [pk]
  owner_id integer [ref: > users.id]
  name varchar [not null]
  archived boolean
}

Table memberships {
  id integer [pk]
  user_id integer [ref: > users.id]
  project_id integer [ref: > projects.id]
  role varchar
}

Open this in FlowDiagram DBML · 19 lines

Why FlowDiagram

There is no shortage of diagram editors. These are the specific reasons to use this one, and the honest limits of each.

It is built for AI output, not retrofitted for it

The document format is documented, the JSON schema is published, and the skill file tells an assistant exactly how to write one. That is the difference between an assistant describing a diagram in chat and an assistant giving you a diagram. The URL API goes further: an assistant that can only write text can still hand over a working diagram as a link.

Nothing you draw leaves your browser

Integration and schema diagrams name internal systems, vendors and table columns. There is no account, no database and no sync service here, so there is nothing on our side to store, leak or hand over. That also means no team workspace and no real-time collaboration — the trade is deliberate.

It already knows your stack

1,160 vendor logos ship in the app: every AWS (303), Azure (405) and Google Cloud (175) service icon, taken from the vendors' own official icon packages, plus 277 more — SAP, Snowflake, Databricks, Kafka, ServiceNow, Salesforce, OpenAI and the rest — all searchable from the command palette. An integration landscape looks like your estate instead of a wall of identical rectangles.

It does real data modelling, not just boxes

Tables with typed columns, primary and foreign keys, crow's-foot notation, and round-tripping to SQL DDL, Mermaid and DBML — plus a live Snowflake connection that reverse-engineers an existing schema and can deploy one back.

Free, offline, and installable

Every feature, no tiers and no trial. After the first visit it runs with no network, and it installs as a desktop or mobile app from your browser's address bar.

Frequently asked questions

What is FlowDiagram?

A free diagram editor that runs in your browser. It draws flowcharts, system and integration architecture diagrams, data pipelines and entity relationship (ER) database models, and it is built so an AI assistant can produce those diagrams for you — see Diagrams from AI. There is no account and nothing to install.

How does FlowDiagram turn ideas into diagrams with AI?

FlowDiagram publishes one Markdown skill file at /flowdiagram.md. Give it to Claude Code, Codex, Cursor, GitHub Copilot or any assistant that reads project instructions, and asking it to "diagram this integration" produces a valid .flow.json file plus a link that opens the finished diagram here in one click. FlowDiagram does not call a model itself — your assistant writes the diagram, and you edit it here.

Do I need an API key or an AI subscription to use FlowDiagram?

No. Every drawing, import and export feature works on its own with no AI involved. The AI route uses whichever assistant you already have; FlowDiagram never sends anything to a model provider.

Why a skill file instead of an MCP server?

An MCP server has to be installed and kept running, and its tool definitions are re-sent with every request in a session whether or not you are drawing anything. The skill file is one Markdown document, read only when you actually ask for a diagram, and it works in any tool that reads project instructions. More on this.

Is FlowDiagram free?

Yes — all of it, with no tiers, no trial and no sign-up. There is no paid version to upgrade to.

Are my diagrams uploaded anywhere?

No. Diagrams are created and stored in your own browser, and a share link carries the document in the part of the URL after the #, which browsers never send to a server. The site ships a Content Security Policy that gives the page nowhere to send data to — see Privacy & analytics.

Can I import an existing diagram or schema?

Yes: draw.io (.drawio) files with all their pages and layers, Mermaid flowcharts, sequence, class, state and ER diagrams, DBML, SQL CREATE TABLE statements, and a CSV header row all import directly, and tables can be read live from Snowflake. See SQL, Mermaid & DBML.

What can I export?

PNG, SVG and PDF for images; Mermaid, DBML, SQL DDL and a data dictionary for text; and .flow.json for the editable document itself. See Export: image, PDF, text.

Does it work offline?

Yes. After the first visit the whole app is cached, and it installs as a desktop or mobile app from your browser's address bar. Every feature except the Snowflake connection works with no network at all.

How is this different from other online diagram tools?

Three things: a published skill file, JSON format and URL API so an AI assistant can hand you a finished diagram rather than a description of one; 1,160 built-in vendor logos — every AWS, Azure and Google Cloud service icon among them — so an integration landscape looks like your real estate; and no server holding your work. See Why FlowDiagram.

Saving & your data

Your work saves itself to this browser continuously — close the tab and it will be there when you return. Diagram content is never 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.

There is no account, no database and no sync service, so there is nothing on our side to store, leak or subpoena. What you draw exists in your browser and in whatever files you export.

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.

Privacy & analytics

The short version: nothing you draw is ever sent anywhere. The only thing that leaves your browser is an anonymous count of the page visit itself.

What never leaves your machine

• Diagram content. Shapes, labels, table and column names, notes, pasted images — all of it lives in your browser’s own storage and in files you export. There is no account, no database and no sync service, so there is nothing on our side to store, lose or hand over.
• Anything you paste. SQL, Mermaid, DBML and CSV headers are parsed by JavaScript already running in your tab. The text never crosses the network.
• Share links. The diagram is packed into the part of the URL after the #, and a fragment is never transmitted to a server by any browser. A link you send travels to the reader, not through us.
• Files you open or save. .flow.json files are read and written by the browser’s own file APIs, straight to and from your disk.

This is enforced, not just promised: the site ships a Content Security Policy that gives the page nowhere to send data to. You can read it in the response headers.

What is measured

The site uses Cloudflare Web Analytics, which reports how many people visit and which pages they land on — the same thing a server log would tell us, and the only way to know whether any of this is useful. It is deliberately the least invasive option available:

• No cookies and no browser storage used for tracking.
• No persistent visitor identifier, so you are not followed between visits.
• No cross-site tracking and no advertising network involved. The data is not sold or shared.
• It measures the page, not the canvas. It records things like the URL, the referring site, approximate country, and load performance. It has no access to your diagram, your storage, your files, or anything you type — including the contents of a share link, since the # fragment is not part of what any server sees.

Blocking it changes nothing about the app. If your browser or extension stops the beacon, every feature still works — including fully offline, with no network at all.

Share a link

Press Ctrl+L, or use the share button in the top-left toolbar. FlowDiagram 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 FlowDiagram 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.

Diagrams from AI

A diagram is expensive for a model to draw and almost free for it to describe. FlowDiagram is built around the second one: the assistant writes a few lines of text, and the text becomes an editable vector diagram on a canvas. That single choice is what makes generating one here fast, cheap, and correctable.

A skill file, not an MCP server

The usual way to teach an assistant a new tool is an MCP server. That works, but it is the expensive option for something like this, and it is worth understanding why before you install one:

The skill is about 65 KB of Markdown — most of it the list of logo keys — that the assistant consults only when you ask for a diagram. For a task that is fundamentally “write some structured text once”, paying a running server and a per-call token tax buys you nothing.

Get it from the ✦ sparkle icon in the toolbar. The dialog has the exact install path for each tool, or you can paste the whole file into a system prompt.

Why it burns so few credits

• No image model is involved. The output is text — Mermaid, DBML, or a .flow.json document. Nothing has to be rendered by the model, so there is no vision pass and no image generation.
• One browser call, not a session of them. The assistant writes the file once, then makes a single call in its built-in browser that opens the diagram, reports every problem by name and returns the share link — see below. It never has to drive the UI, and it takes one screenshot, not one per nudge.
• Being wrong is cheap. The result is real, editable objects. A box in the wrong place is a drag, not a re-prompt — and re-prompting is where AI credits actually go.
• The whole diagram is one reply. A twelve-node integration landscape is a couple of hundred tokens of Mermaid, or a structured file the model writes in a single pass.

Checked in one call, styled on the first try

The skill file tells the assistant to build in a fixed sequence: plan, write the .flow.json once, then run one call in its browser on flowdiagram.net:

const r = await FlowDiagram.preview(doc);   // { ok, issues, link, linkLength }

preview opens the diagram and lists, in plain English and by element id, everything that would make it look wrong: a missing font or routing setting, an unknown logo key, a connector the router sent through a box, overlapping shapes, labels stacked on each other or crossed by another line. It hands back the share link in the same call. The assistant fixes what is listed, runs it once more, takes a single screenshot and replies.

The skill file also writes down the style the built-in templates use — a title and subtitle, tinted zones per stage, one colour per stage, real vendor logos on every product, one highlighted “hero” system, a coloured and animated main path, short labels, and a fixed column/row grid — so a generated diagram looks finished the first time rather than like a wireframe.

The link is the deliverable

The assistant can hand back a URL that opens straight into an editable diagram:

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

Paste it in Slack, a ticket, a pull request or an email. Whoever clicks it gets a working canvas immediately:

• No sign-up and no login — for you or for anyone you send it to.
• Nothing is uploaded. The diagram travels in the # fragment, and a fragment is never sent to a server. It goes from the link straight into the reader's browser.
• No permissions to manage and no share settings to get wrong, because there is no document sitting on a server to give access to.
• It cannot expire. There is no record to delete and no account to lapse.
• Opening it never overwrites anything. An incoming diagram is added as new pages next to whatever the reader already had open.

See the URL API for every fragment the app accepts — #mermaid=, #dbml=, #sql= and #d=.

Keep the source, not just the picture

Because the output is text, the diagram is something you can keep and build on rather than redraw:

• Save the .flow.json next to the code it documents. Next quarter you ask the assistant to change the diagram instead of regenerating it from nothing — far less work for it, and the layout you already fixed by hand survives.
• It diffs. A .flow.json file, or a Mermaid export, reviews in a pull request like any other source file.
• Or keep the URL as the documentation. Drop the link in a README, a runbook or a Confluence page. It is self-contained, so it cannot rot against a service that changed its pricing or shut down.
• Everything stays on your machine. Diagrams live in your own browser storage; files land in your own folders. Nothing about an internal system landscape ever leaves the building.

Then make it presentable

Generated diagrams tend to be the complicated ones — twenty systems and forty arrows — and those are exactly the ones an audience cannot follow from a static picture. Turn on animated data flow and the connectors show direction as moving pulses, so in a review you can point at one path and everyone can see where the data actually goes. Pair it with saved views and present mode to walk a room through a large landscape one region at a time.

The 1,160 vendor logos matter here too: an AI-generated landscape comes back looking like a real architecture diagram rather than a wall of grey rectangles, with no clip-art hunting afterwards.

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>

For anything beyond a one-off, install the skill file rather than working from this page — it carries the full element reference, all 1,211 logo keys, the layout and style rules, and the one-call FlowDiagram.preview check. See Diagrams from AI for why a skill file beats an MCP server here.

Older advice said to also set "roughness": 0. That is no longer necessary — FlowDiagram now always renders (and exports) clean, precise lines regardless of this field, so there is no sketchy look left to accidentally trigger. The field still exists in the schema for compatibility with other tools that read .flow.json directly.

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.FlowDiagram exposes the same capabilities the interface uses — useful for browser automation, headless rendering, or an agent driving the page directly. window.FlowDiagrams still works as an alias for scripts written before the name lost its plural.

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

// hand the user a link
const url = await window.FlowDiagram.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.FlowDiagram.schema().

The minimum viable document:

{
  "app": "FlowDiagram",
  "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:

• "roughness" is still accepted but no longer changes anything — FlowDiagram always renders smooth lines. "fontFamily": "sans" on any text element still matters; its default is a handwriting font.
• 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.

Shapes & symbols

Five shapes sit on the ribbon — rectangle, diamond, ellipse, database and data I/O. Everything else lives behind the More shapes button next to them, grouped into Flowchart and Solids. Picking one keeps it on that button, so a shape you use repeatedly stays one click away.

The flowchart group covers the standard symbol set:

Alongside these, the system library holds 1,211 marks: 1,160 vendor logos — every AWS (303), Azure (405) and Google Cloud (175) service icon, plus 277 others across ERP, SaaS, data, BI, integration, infrastructure and AI — and 51 generic pieces like people, computers and a gear. The search box matches on more than the visible label, so human finds User and settings finds Gear.

Command palette

Ctrl+K opens a searchable list of everything the app can do: tools, alignment, exports, templates, saved views, page switching — and all 1,160 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

FlowDiagram 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 FlowDiagram and find an empty canvas where work used to be, check here first.

Starter templates

Sixteen templates are built into the app, each a complete, editable diagram with real vendor logos — not a blank frame. On a page nobody has drawn on, the undo and redo buttons become a Templates chip: hover it for six suggestions (For you, from what you have used and drawn, then Popular), or open the searchable gallery, which also matches the services drawn in a template, so lambda finds the AWS one.

A template goes onto the current page if it is empty; if it already has work on it, the template opens on a new page instead, so inserting one never costs you anything.

More online: flowdiagram.net/templates has 520+ more across 31 categories. Each is a link that opens as an editable diagram. Browse all templates in the Templates popover goes straight there.

Connectors & routing

Hover any shape and two small handles float just outside its right and bottom edges. Drag from one straight to another shape — or to an empty spot on the canvas, if the other end isn't drawn yet — to draw a connector without leaving the Select tool or picking up the Connector tool first. The connector leaves from the handle you dragged from, and stays attached when either end moves.

Where you drop decides how the far end behaves. Drop anywhere over the body of a shape and the attachment stays automatic: it re-picks whichever side faces the other shape, so the connector reshapes itself as you move things around. Drop out near one particular edge and it pins to that edge instead.

The same result also works the traditional way: pick the Connector tool (A) and drag from one shape to another.

The Connector style controls the shape of the line:

• Elbow (the default) routes at right angles. It attaches to a side of each shape, leaves along that side, arrives along the far side, and steps around anything in between — including the two shapes it connects. If the side it is attached to can only be reached by crossing the shape's own body, the connector slides round to a side it can actually reach rather than drawing a line through the middle. That test uses each shape's real outline, so it is as accurate for diamonds, triangles, cylinders and the 3-D solids as it is for plain boxes.
• Straight draws a direct line between the two attachment points.
• Curve bows the line, which helps when two connectors would otherwise sit on top of each other.

To re-pin an existing connector to a specific side rather than letting it choose, drag its endpoint out to that edge of the shape. To hand the choice back, drop it over the middle of the shape instead.

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.

Packets are launched hop by hop, so a long chain reads as a hand-off down the path rather than everything twitching at once.

This is transient: nothing is written to the document, and it never appears in an export. To turn it off, right-click any system and choose Stop trace flow on click — it is also in the ☰ menu and the command palette. Entity tables never offer or trigger this: a foreign key describes what references what, not which way data moves, so tracing does not apply to ER diagrams.

Return flow

With Flow on, a Direction row appears: → along the arrow, ← back against it, or ↔ both. Returning packets are drawn hollow, so a request/response link reads as a round trip instead of looking like twice the traffic in one direction.

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 FlowDiagram 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

FlowDiagram 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.

Keyboard shortcuts

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

Logos & trademarks

The system library ships marks for more than 1,150 products and services so that a diagram can say which system it means. That is the only reason they are there.

Where the artwork comes from

The marks are not redrawn imitations. Each is the vendor’s own published artwork, taken from public logo archives and rescaled to fit the canvas — Simple Icons, gilbarbara/logos, VectorLogoZone, Devicon and svgl. Those collections license the files permissively; the trademarks they depict remain with their owners, and nothing on this page grants you any right to them.

The AWS, Azure and Google Cloud service icons come from those vendors' own official icon packages — the AWS Architecture Icons, Microsoft's Azure public service icons and Google Cloud's icon library — which are published for exactly this use: drawing architecture diagrams. They are used as published, without cropping, recolouring or distortion.

Where a vendor publishes no mark that may be redistributed, the library shows a plain coloured chip with an abbreviation rather than an imitation of their logo.

Using them in your own work

Placing a logo on a diagram to label a system you actually run is ordinary descriptive use, and that is what this library is for — an architecture diagram naming SAP, Snowflake and Kafka is describing your estate, not claiming a relationship with those companies. Using a mark on marketing material, a product UI, packaging, or anywhere it could suggest endorsement is a different question, and the vendor’s own brand guidelines govern it. Check those before you publish.

Rights holders

If you own one of these marks and would like it removed, corrected, or replaced with your current official artwork, that will be acted on — write to support@flowdiagram.net and it will be changed in the next build.

Contact & owner

FlowDiagram is built and maintained by Tuna Pradhan. It is an independent project — not a company product, and there is no organisation behind it.

That address is the right one for all of these:

• Questions about how something works that the documentation does not answer.
• Bug reports — a diagram that fails to open, an export that comes out wrong, a shape or connector that misbehaves. Attaching the .flow.json makes it much faster to fix.
• Feature requests, including a vendor logo you would like added to the library.
• Trademark and logo queries from rights holders — see Logos & trademarks above.
• Security reports. Please write privately rather than posting publicly.

Nothing you draw is visible from this address, or from anywhere else. Diagrams never leave your browser, so a bug report has to include the file before anyone can look at it — see Privacy & analytics.