Tools

The toolbar#

Above the drawing, from the left: the four tools (Pen, Eraser, Select, and Hand) and the five inks; then Undo, Redo, and Clear; then Add, for shapes, arrows, and templates, and More; and Mermaidify, which reads the drawing. Hold a finger or the pointer on a tool to see its name. In the drawing's top right corner are the zoom, which fits the drawing to the screen when pressed, and Full screen.

A tool with a small corner has kinds. Tap it again once it is chosen, and its kinds open under it: the eraser takes whole strokes or only what it passes over, and Select drags a box or draws a lasso. The kind you pick is kept in this browser.

Clear empties the drawing in one press, and Undo brings it all back, names included.

Pens, fingers, and palms#

• A pen (an S Pen, an Apple Pencil, or another stylus) switches the drawing to pen mode the moment it is seen, even hovering. Then only the pen draws, and a palm resting on the screen draws nothing. Fingers move the drawing instead: one finger drags it, two fingers pinch to zoom, from 10% to 400%. Let fingers draw, on the drawing, switches back.
• The pen's side button, or its eraser end where it has one, erases whole strokes while held, whichever eraser is chosen.
• With fingers, one finger draws and two fingers pinch or drag the drawing.
• With a mouse or a trackpad, the left button draws. Over the drawing, the wheel zooms about the pointer, up to come closer and down to go back, as a pinch on a trackpad does, so on a trackpad two fingers up and down zoom too; a scroll to the side moves the drawing sideways. To move the drawing, hold Space and drag, drag with the middle button, or pick Hand and drag. The page itself scrolls with the pointer anywhere but the drawing. More, then Fit the drawing to the screen, brings everything back into view.
• Hand (H) only moves the drawing, with any pen, finger, or mouse, so nothing is drawn by mistake while you look around.

Erasing#

The eraser has two kinds. Tap it again once it is chosen to switch between them.

• Erase whole strokes, the first kind: touch any part of a stroke to take all of it, which is what the reader needs anyway.
• Erase only what it passes over takes only the ink it passes over, as wide as the eraser's circle, and leaves the rest of each stroke as strokes of their own. Snip a line off a box drawn with it in one stroke, trim a stray tail, or open a gap in a side. An outline drawn back to its start and cut once stays one stroke, open at the cut, and still reads as its shape while the gap is small; what is left of a stroke never closes up again at a later cut. Ink drawn twice over the same place goes together, as the eraser can't tell the passes apart. Names and choices stay with what is left: a box cut free of its line keeps its name. With fingers drawing, two fingers early in a pass pinch and pan instead.
• Neither kind puts anything on a clipboard. To move strokes, or to copy and paste them, use Select.

Select, move, copy, and snap#

• Press a stroke and drag, with Select (V), to move it at once; there is no need to choose it first. A press inside a closed shape takes the shape too, unless it holds other shapes, as a group's frame does: there a drag draws a box.
• Choose several by dragging a box from an empty place: every stroke the box reaches into is taken whole, so a box over part of a box and part of its arrow takes both. Tap Select again and pick Draw a lasso to draw a loop around strokes instead. Whatever is drawn inside a chosen shape goes with it (a name written in a box, the dot in an end ring, the states in a composite state), and so does everything grouped with a chosen stroke. Tap an empty place to let go.
• Add to what is chosen with Shift (or ⌘ on a Mac, Ctrl elsewhere) and a click on another stroke, or inside another shape; the same click on a chosen one lets it go. With the key held, a box adds what it reaches to what is chosen.
• Move them by dragging any of them, or anywhere inside the dashed box around them. Turn them with the round knob above the box, in steps of 15 degrees, so boxes stay square and lines straight. Grow or shrink them with the square knob at the box's lower right corner.
• The bar over them cuts or copies them to a clipboard, pastes a copy into the middle of the screen, duplicates them beside themselves, groups them, snaps them, or deletes them. A copy keeps the names and choices of what it copies. Group makes strokes move as one: a tap on any of them chooses them all, until Ungroup.
• Snap makes the chosen strokes clean, as holding them would have: each shape becomes its clean outline, each arrow a straight line with a clean head, and a line with its head drawn apart, a V or a triangle, becomes one arrow. Dotted and thick lines, filled dots, and rings stay as drawn, as a clean stroke would lose what they mean. Names stay with what was snapped, and Undo brings back what was drawn.
• Names stay with the strokes they belong to, wherever the strokes are moved. Each move, turn, paste, or delete is one step for Undo.

Add shapes, arrows, and templates#

• Add, the plus, puts a clean shape in the middle of the screen, for shapes that are hard to draw well: a box, an oval, a circle, a diamond, a hexagon, a parallelogram, a trapezoid, a triangle, a start dot, or an end ring.
• Arrows: an arrow; a two-way arrow, with a head at each end, for two shapes that each lead to the other (a flowchart writes it A <--> B, and a state diagram as two transitions, one each way); and arrows both ways, a pair side by side, one each way, so each can have its own name. Drag an arrow between two shapes to join them.
• Templates add a whole small diagram to start from, its shapes and arrows already named, in three groups. Flowcharts: steps in order, a yes-or-no choice, trying until done, signing in with a few tries, and a request retried after a wait. State diagrams: a door, a traffic light, an order, a media player, and a vending machine. A state diagram template switches the reading to a state diagram.
• Agent workflows are flowcharts of grooph's patterns: a grind loop, a Ralph loop, a red-team loop, a review gate, spec then loop, a human gate before an irreversible step, debate then build, and tournament then judge. Each uses the shapes grooph reads: a box for a builder or a planner, a diamond for a critic or a judge, a hexagon for a check, a trapezoid for a person's approval, and a double circle for done, with pass and fail on the arrows they decide. Their Mermaid opens in grooph as the same workflow.
• What is added is ink like anything you draw: the reader reads it the same way, and it can be erased, snipped, moved, and drawn over. It arrives chosen, so it can be dragged into place at once; pick the pen to draw again.

Names on the drawing#

• A name you type for a shape or a line shows on the drawing, in its shape or along its line, in the ink it was drawn in. It stays there as you draw more, move, or erase, and goes with its strokes. More, then Show names on the drawing, hides them for a drawing of the shapes alone; the choice is kept in this browser.
• What was read, the outlines and letters Mermaidify paints over the drawing, goes away with a tap or a click on an empty place, with any tool, or with Esc. A tap on a shape or a line still opens its name, and brings what was read back.

Snapping#

• Hold to snap. Draw a shape, come back to where it began, and hold still for half a second before lifting. The outline snaps to the clean shape it is closest to: a rough box becomes a box, a near circle becomes round, and a near square becomes square. Hold at the end of a nearly straight line and it becomes straight.
• Hold at the end of an arrow drawn in one stroke, its head last, a V or a closed triangle, and it becomes a clean, straight arrow. Keep holding and move: the tip follows, and the head turns to point the new way, so you can aim it at the shape you meant before lifting.
• Keep going without lifting. After a snap, the same press draws on. Draw a box, hold, move inside it, draw a smaller box, and hold again: two clean boxes, read as a box in a box. The way you moved from one to the other is left out when it stays inside the first shape. Holding at the corners of a line bends it into straight pieces. Undo takes back the whole press.
• What it snaps to is what it reads. A clean shape is read like any other stroke, so the snap shows you the reading before you press Mermaidify. If it snapped to the wrong shape, undo it, or change its look under Names.
• Turn it off from More, with Snap shapes and arrows when you hold. The choice is kept in this browser.

Full screen#

Full screen, the button in the drawing's top right corner (or F), gives the drawing the whole window, with every tool above it and what was read below it. Where the browser allows it, its own bars go too, which helps most with a phone on its side. The same button, Esc, or the phone's back gesture leaves it, and See the diagram leaves it and goes to the result.

Keys#

D picks the pen, E the eraser that takes whole strokes, S (or C) the one that takes only what it passes over, V Select, and H the hand. Hold Space with the pointer over the drawing and drag to move it. With strokes chosen, Ctrl+C copies, Ctrl+X cuts, Ctrl+V pastes, Ctrl+D duplicates, Delete deletes, and Esc lets go; with nothing chosen, Esc puts away what was read. F turns full screen on and off, Ctrl+Z undoes, Ctrl+Shift+Z redoes, and Ctrl+Enter presses Mermaidify. On a Mac, use ⌘ for Ctrl.