A map of things (nodes) and how they connect (links), saved in your browser.
Look around. Drag empty space to move (or two-finger scroll, or hold Space and drag), pinch to zoom. Tap a node to light up its links; tap empty space to go back.
+ Node. Add a title, category, parameters and notes.
+ Link. Pick the two nodes. On a computer, Ctrl-click one node, then another.
Search finds text. Filter hides categories or nodes by parameter.
Graph sets the layout and what shows on the graph.
Changes save in this browser automatically. Menu has file and backup options.
Menu → View Data (JSON) → Reset to example replaces your graph with the example.
Type in Search. Matches (titles, categories, parameters, notes) glow and the rest dim. Enter zooms to them.
Filter: categories
Tap a category chip to hide it (crossed out); tap again to show it. Links to hidden nodes hide too. In Select, Hide dotted links hides every dotted link and Hide solo nodes hides nodes with no visible link, so nodes joined only by dotted links go too when both are on. The Filter button shows how many filters are on.
Blank slate (in Select, after Clear) hides every node showing now, so you can build fresh. New nodes show. Bring back all restores the rest. Nothing is deleted.
Filter: parameters
Type in the Parameter filter box. Capital letters don't matter.
Type this
Shows nodes…
prod
with any parameter containing "prod"
env = prod
where env is "prod" (!= for not)
cost > 100
comparing numbers (also <, >=, <=)
owner contains ad
whose owner includes "ad"
has owner
with an owner parameter
cost >= 20, env = dev
a comma means and
env = prod or cost < 10
or means either
(a or b), c
brackets group terms; ! in front means not
Select mode
Press Select in the top bar. Tap nodes (phone), or drag a box or Ctrl-click (computer). While selecting, drag to draw a box; to move around use two-finger scroll or hold Space and drag, and pinch to zoom. Then show only the picked nodes.
Press Trace in the top bar, then tap a node to highlight its whole chain. Downstream follows arrows away from it, Upstream follows arrows into it. Dotted lines chooses whether dotted links are followed. All three are on by default; double-headed arrows count both ways, and links with no arrows are skipped. Tap a link instead to pick a path: it shows that link and everything downstream of it.
Show just the part you care about.
+ Connected adds neighbours. Select all shown picks everything visible. Clear un-picks. Add Parameter adds a parameter to every picked node.
Show all nodes again undoes it.
Re-graph (in Filter or Select) arranges just the nodes showing. Turn the categories back on and the graph returns to its earlier shape. Filters and searches are not saved.
Graph → Layout list. Your choice is remembered in this browser.
Force (default): linked nodes pull together, others push apart.Workflow (top to bottom): follows the arrows in layers.Workflow (left to right): the same, sideways.Hexagonal grid: linked nodes sit close on an even lattice.Value stream map: steps run left to right.
Value stream map
Solid links are the flow. A step is always right of the one before it.
Dotted links: a node with only dotted links sits in a band above the flow if any of those links has an arrow, and in a band below if none of them does.
Dotted links only do this in this layout. Everywhere else they are ordinary links.
The flow in the middle. Dotted links with arrows go above, dotted links with no arrows go below.
Saved positions
Choose Saved positions (editable).
Drag nodes. They snap to a grid. You can also type X and Y.
Press Save positions to keep them, or Discard. Changing layout without saving loses the moves.
In other layouts, dragging is forgotten at the next arrange.
Graph menu options
Icons shows or hides the picture inside nodes.
Edge labels shows link labels always, or only for the node you tapped. Labels slide off names, tables, nodes and other links.
Parameters shows chosen parameters under node names. Type the names, separated by commas (e.g. owner, env).
In Links, name nodes by title. A title that doesn't exist creates a new node when you Apply.
CSV template downloads an empty file with the right columns for the tab you are on. Export CSV downloads that tab. Import CSV reads a file into that tab. The rows appear in the table and nothing is saved until you press Apply. A row that matches something already there (same ID or same title; for links, same From, To and Label) but has different details opens a short conflict wizard. For each one you can keep the original, add the imported row as a new item, or merge them and choose which value to keep for each field. Cancel the wizard to import nothing. Rows that match exactly are left alone, and rows with no match are simply added.
Importing: a node row updates an existing node only when its id matches, otherwise it adds a new node (even if the title is the same). A link row updates an existing link only when From, To and Label all match, otherwise it adds one. Columns that are in the file replace what is there. In the exported notes, a leading apostrophe is added when the notes start with a list or symbol, so Excel keeps them as text, and it is removed again on import. In Links you can use node titles or ids. Arrows are to, both or none; Line is solid or dotted. Put parameters one name: value per line, or separate them with semicolons.
Dark mode switch · Projects · Data (Edit Data Table, View Data, Export read-only file, Download File, Open from Files, Open File, Save File, Example graph) · Options (Colours, Download program file).
?
This guide.
Only one of Search, Filter and Graph is open at a time. Menu slides in from the left.
Projects (a folder of graphs)
In Menu, press Connect folder and pick a folder (Edge or Chrome on a computer). Every .json graph file in it is a project. Press one to switch to it.
Changes save straight into the project's file. Next time you open the page you may need to press Reconnect so the browser can ask your permission again.
New Project opens a name box. Create blank makes a new empty project from the name you type. Copy of current saves the graph that is open now as a new project, so use it to bring your current graph into the folder first.
Refresh re-reads the folder, for files you added or changed outside the page. Files that are not graphs are ignored. Undo history starts fresh in each project.
Colours: pick a colour per category, or Reset to default. Or choose Colour by a parameter: colours are then automatic, one per value, and nodes without that parameter are grey.
View Data (JSON): Copy your graph as a backup. Paste JSON and press Apply JSON to load it. Reset to example replaces everything. Questions appear in a small box in the page.
Undo and Redo (the two curved arrows in the top bar, or Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z) step through your last 10 changes. A small message says which change was undone or redone, and hovering a button shows what it will do. Redo is forgotten after 5 minutes without an undo or redo. The history is cleared when you reload the page.
Export read-only file downloads a copy of what you can see right now: nodes and links hidden by Filter, Select or Blank slate are left out. Anyone can open it in a browser to look around, search, read the details and drag nodes around to tidy the view (moves are not saved, and Reset layout puts them back), but nobody can change your data. It is one self-contained file that also works offline, because the drawing library is bundled inside it (if that could not be fetched when you exported, the message says so and the file needs internet instead).
Example graph (Menu) loads a small pizza-shop example to explore. A strip says This is example data until you change something; Start your own empties it.
Open File and Save File: link a .json file (Edge or Chrome on a computer only).
In a browser that cannot link files (Safari, Firefox), the top bar on a computer always says autosave is not available and reminds you to use Download a Copy regularly (on a phone this message is only in the Menu). On Edge or Chrome, the top bar says Set up autosave by linking a folder or file until one is linked. Click it to open the Menu. The same message is kept at the top of the Menu. In the top bar it goes away after 2 minutes, or once a save is done.
Download File downloads a copy of the graph as a .json file, the reverse of Open from Files (on an iPhone, choose where to keep it, such as Files; on a Mac, Safari saves it to Downloads unless you set it to ask). Open from Files loads a graph file from those places and replaces the graph in this browser.
On a phone the panel shows at the bottom. Expand makes it full screen.
Changes go to browser storage straight away, and to the file too when one is linked.
1. Browser storage (always on)
Every change saves in this browser immediately. It is tied to this browser, device and page address. Clearing site data deletes it, so also keep a file or a JSON backup.
2. A linked file (Edge or Chrome on a computer)
Save File creates a .json file the first time and links it. Open File loads an existing one and links it.
When you link a folder that has no projects yet, a first project (Project 1) is made automatically from the graph on screen (empty if there is nothing there, or only the example), so it can autosave straight away.
Every change is then written to the file too. Save File writes it now.
On a later visit press Reconnect and allow access. The file's contents replace what is on screen.
If a write fails, press Save File to try again.
3. A backup you keep yourself
Menu → View Data (JSON) → Copy, then paste it into a note or file. To restore, paste it back and press Apply JSON.
What is saved when
Action
Saved when…
Add / edit node or link
you press Save (or Delete)
Table edits
you press Apply
Node positions
only in Saved positions, when you press Save positions
Drag nodes to move them. Nothing is saved until you press Save positions; Discard goes back to the last saved positions. You can also type a node's X and Y in its edit form or in the Table.
name = value, != , > , < , >= , <= , contains, has name. Plain text matches any name or value. "," or "and" means and, "or" means or, ( ) group them, "!" in front means not.