Details
How Graph models entities and the relations between them.
What you can do
- Examples, beside Save and Open project, offers two separate projects: Matematika with 27 mathematics chapters and Fisika with 30 physics chapters. Each option opens only its own subject network. Arrows suggest prior knowledge for the chapter they point to; earlier prerequisites are inherited along each path. Each chapter is one editable object, and arrows start without labels. Open the example at 100% and pan or zoom out to explore. Save your edited copy as a project file; choosing the example again restores its original layout after you confirm replacement.
- Save project, beside the full-window button, downloads a named .json file containing your objects, arrows, and arrow naming counter. Open project loads one of these files on this device or another browser. Opening replaces the current canvas after you confirm, centers the graph at 100%, and keeps every object's coordinates. Invalid files leave your graph intact. Save another file whenever you want a new snapshot; downloads do not automatically overwrite earlier files. The project name is remembered with browser autosave, while files leave out selection and viewport preferences.
- The canvas is a numbered Cartesian grid: X increases to the right and Y increases upward. The axes meet at (0, 0), centered on a new canvas. The axes count in single units: 1, 2, 3, 4, with negative values on the opposite sides. Each unit spans 100 canvas pixels at 100% zoom and keeps the same world-space size as you zoom. Coordinate labels stay along the viewport edges when an axis is offscreen. Go to origin, beside 100% view, centers (0, 0) without changing your zoom, even when zoom is locked. Saved graphs keep their existing positions and view.
- Right-click or long-press the canvas and choose Create node. Right-click a node or arrow to rename or delete it.
- Hand is the default tool. Drag anywhere, including over objects or arrows, to pan. Switch to Select to click individual objects and arrows, or drag a selection box across any combination. Shift-click toggles an item; Shift-drag adds items to the selection. Click empty space to clear it. Switching tools clears the selection.
- In Select mode, select one node, then drag the circle on its right onto another node to draw a curved arrow to its left side. Drop it on the node's own left circle to draw an arrow back to itself. Self-loops form rounded arches above the node, with centered names and evenly spaced heights when there are several. A node can have any number of arrows, including several to the same node; every arrow leaves from the node's right circle, arrows arriving at a node all aim at its left circle. A single incoming arrowhead touches the node; multiple incoming heads fan out and sit back along their lines so they do not touch one another. Each head aligns with a short straight shaft. Arrows between the same two nodes spread into evenly spaced lanes, and nearby vertically separated nodes connect with a direct curve. An arrow to a node farther to its left runs underneath both nodes instead of crossing them. Selecting a node highlights every arrow into or out of it.
- In Select mode, drag a selected object to move all selected objects together. Arrows stay attached to their objects; selecting an arrow does not move its endpoints. Scroll, use the trackpad, or drag with the middle mouse button to pan in either mode.
- Pinch or Ctrl+scroll to zoom smoothly from 50% to 200%, or use the plus and minus controls at the bottom left to move in 10% steps. The zoom percentage updates as you zoom; click it to jump to 50%, 100%, 150%, or 200%. Lock the controls to keep the level, and use 100% view beside the zoom selector to return to 100% and center the graph in the viewport without changing its coordinates. Compact layout packs the nodes into a tight grid that keeps their order and leaves just enough room for arrows and their names.
- New nodes are named Object and arrows f, g, h. Single-word names appear in circles; multi-word names use pills. A node grows to fit its name on one line. Double-click a name, press Enter, or right-click and choose Rename to change it. An arrow's name can be left empty.
- The graph, view, and zoom lock are saved in this browser, so reloading the page keeps them. Full window stretches the canvas over the whole browser window; press the button again or Escape to leave it. Clear canvas removes every node and arrow after you confirm. Other browsers and devices start empty.
- Press Delete or Backspace to remove every selected object and arrow. Removing an object also removes its connections. Press Escape to cancel a gesture and clear the selection. Press ⌘D (Ctrl+D) to duplicate a single selected node. Enter or F2 renames a single selected item.
Chapter example sources
Chapter names and coverage come from the reference catalogs below, checked against their Notion sources. Dependency arrows adapt the existing prerequisite map to these chapter boundaries; they suggest a study sequence rather than an official curriculum. Mathematics includes calculus extensions, while the separate physics network assumes mathematical tools without requiring calculus chapters.