Skip to content
M2TOOLKIT

Data Flow Diagram Maker

Draw proper DFDs — context diagram, Level 1 and Level 2 — with real DFD symbols, numbered processes and a checker that catches rule breaks.

  • Free
  • No sign-up
  • Runs in your browser
Context · Level 0

Start your context diagram

Add an external entity (E), a process (P) or a data store (D) — or double-click the canvas to add a process.

Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us.

How to use the Data Flow Diagram Maker

  1. Start blank, from a Level 0 or Level 1 template, or pick one of ten system templates (e-commerce, banking, hospital, library and more).
  2. Add external entities (E), processes (P) and data stores (D), then drag from a dot on one element to another to draw a data flow and type its label.
  3. Select a process and choose Decompose to open its Level 1 or Level 2 diagram. Its inputs and outputs are carried in so the levels stay balanced.
  4. Click Validate DFD to find processes with no input or output, unlabelled flows, duplicate numbers and illegal connections, then export PNG, SVG, PDF or a project file.

What does this tool do?

A data flow diagram shows how information moves through a system: where it comes from (external entities), what transforms it (processes), where it rests (data stores) and what each movement carries (labelled data flows). This editor is built for exactly that, rather than a general flowchart with renamed shapes. Processes are numbered automatically — 0 on the context diagram, 1.0, 2.0 on Level 1, and 2.1, 2.2 when you decompose 2.0 — and data stores get IDs like D1 and D2.

Projects hold several levels at once. The level bar above the canvas shows where you are and lets you jump between the context diagram and any decomposition. You can draw in Gane & Sarson notation (rounded process boxes with a number band, open-ended stores) or Yourdon/DeMarco (circles and parallel lines), and switch at any time.

Auto layout arranges a diagram so data reads left to right: sources on the left, processes in the order data passes through them, data stores between the processes that use them and sinks on the right. A context diagram is arranged around its single process. Connectors spread out where they meet a shape so parallel flows and their labels stay apart.

The editor has pan and zoom, a grid with snap and alignment guides, marquee and multi-select, copy and paste, grouping, align and distribute, resizing, full screen, a minimap and undo for every change. It stays responsive with hundreds of elements because only what's on screen is drawn. Your project saves in this browser as you work, and you can download it as a .json file to open later or on another device.

Why use it?

  • Genuine DFD symbols in Gane & Sarson or Yourdon/DeMarco notation.
  • Context, Level 1 and Level 2 diagrams in one project, with automatic process numbering.
  • Validation for missing inputs and outputs, unlabelled flows, illegal connections and unbalanced levels.
  • Ten editable system templates, each with a context diagram and Level 1.
  • Export PNG, transparent PNG, vector SVG, PDF and a reopenable project file.
  • Free and private: no account, nothing uploaded.

Use cases

  • Systems analysis and design coursework — context diagrams and Level 1 DFDs for assignments and final-year projects.
  • Software design documents: showing where personal or payment data flows before you build or audit a system.
  • Security threat modelling, where DFDs with trust boundaries are the usual starting point.
  • Business analysis: mapping how orders, invoices or records move between departments and systems.

Example: an online store at Level 1

The e-commerce template's context diagram shows one process, “0 Online Store”, exchanging data with four external entities: Customer, Payment Gateway, Warehouse and Admin. Its Level 1 diagram breaks that into six processes and four data stores:

1.0 Manage Account → D1 Customers
2.0 Browse Catalogue ← D2 Products
3.0 Place Order → D3 Orders, → 4.0 Process Payment
4.0 Process Payment ↔ Payment Gateway, → D4 Payments
5.0 Fulfil Order ↔ Warehouse, ↔ D3 Orders
6.0 Manage Products ← Admin, → D2 Products

Process 3.0 is decomposed again at Level 2 into 3.1 Validate Cart, 3.2 Calculate Total and 3.3 Create Order. The flows entering and leaving 3.0 on Level 1 — order details, customer details, price and stock, the new order and the payment request — appear at the edge of the Level 2 diagram, which is what “balanced” means.

Common mistakes

  • Connecting an external entity straight to a data store. Data has to pass through a process — add one such as “Update profile”.
  • Drawing a process with outputs but no inputs (a “miracle”) or inputs but no outputs (a “black hole”).
  • Leaving data flows unlabelled. Every arrow should name the data it carries, such as “Payment request”.
  • Treating a DFD like a flowchart: DFDs don't show decisions, loops or the order of steps — only what data moves where.
  • Adding detail to the context diagram. It should show one process for the whole system; detail belongs in Level 1 and below.

Privacy

Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us. There's no account to create and nothing to install.

Frequently asked questions

What is the difference between a context diagram, Level 0 and Level 1?

A context diagram shows the whole system as a single process with its external entities and the data they exchange. Many courses call it Level 0. Level 1 breaks that single process into the main processes and adds the data stores; Level 2 breaks one Level 1 process down further. This tool uses Level 0 for the context diagram and labels each level in the level bar.

How do I number processes in a DFD?

Level 1 processes are numbered 1.0, 2.0, 3.0 and so on. When you decompose process 2.0, its children are 2.1, 2.2, 2.3. The editor assigns numbers automatically, and Renumber processes reorders them top-to-bottom if you rearrange the diagram.

Which DFD notation should I use?

Gane & Sarson (rounded rectangles for processes, open-ended rectangles for stores) is common in business and information systems courses; Yourdon/DeMarco (circles for processes, parallel lines for stores) is common in software engineering. Use whichever your course or team uses — you can switch at any time and nothing is lost.

What does Validate DFD check?

It lists processes without inputs or outputs, unlabelled flows, flows with a missing source or destination, connections that break DFD rules (entity to entity, entity to store, store to store), duplicate process numbers, duplicate data store names or IDs, orphaned elements, and levels that aren't balanced with their parent process. Click any item to jump to it.

Is a DFD the same as a flowchart?

No. A flowchart shows the order of steps and decisions in a process. A DFD shows what data moves between parts of a system and where it's stored, with no sequence or decisions. Use the Flowchart Maker for logic and the DFD Maker for data.

Where is my diagram saved?

In this browser, automatically. Nothing is uploaded. Use Download project to keep a .json file you can open again later or on another computer, and export PNG, SVG or PDF for documents.

Last reviewed by the M2Toolkit team.

Other tools people use alongside the data flow diagram maker.