Double-click to edit text
Double-click a node in the preview (double-tap on a phone). An input appears over the node; press Enter to apply or Esc to cancel. The change goes straight into the code on the left: for flowcharts it edits the text inside a definition such as A[text], and a node that never had a label (the B in A --> B) gets B[new text] added where it first appears; for mind maps the line is located by the node's position in the code (so nodes with the same text are never mixed up). The code stays the single source of truth, so export, share links and cloud save all see the edited code.
Supported today: flowcharts (flowchart / graph) and mind maps (mindmap). Other diagram types show no input on double-click; edit the code directly. If the preview text does not match a definition in the code (Markdown in labels, or a node defined in several places), you get “Couldn't find this node's definition”; again, edit the code.
Click a node: add a step, add a branch, change shape or color, delete
In a flowchart, a single click on a node (a tap on a phone) opens a small menu next to it:
- Rename: the same as double-click.
- Change shape: rectangle, rounded, stadium, diamond, cylinder, circle, parallelogram. It swaps the pair of brackets in the code (
A[text]becomesA{text}); quoted text stays quoted. - Color: one row of stroke colors (black, red, green, blue, orange) and one of fills (transparent, light red, light green, light blue, light yellow), the quick picks from Excalidraw. It becomes one line of code,
style A fill:#a5d8ff,stroke:#e03131; a light fill also sets dark text (color:#1e1e1e) so it stays readable in dark themes. The menu stays open so you can change the other one too. “Reset colors” removes only these, keeping any stroke width or other style you wrote yourself. With a hand-drawn theme, colored nodes are drawn by hand too. - Add a step after: the new node goes between this node and all of its outgoing links. With
A --> BandA --> C, adding a step after A turns the code intoA --> N[New step] --> BandN --> C. The new id is an unused letter (or the next number when the code uses ids likestep1), and the node opens for renaming right away. - Add a branch: adds a line
A --> N[New step]after the node's last outgoing link; on a diamond decision node it is labelled “No” by default, written the way the existing link text is (-- No -->or-->|No|). - Delete: removes the node and joins its incoming and outgoing links (
A --> B --> Cwith B deleted becomesA --> C; the incoming link's text is kept when both have text); with links on one side only, they are simply cut. References instyle/clicklines are removed and the id is dropped fromclasslists. If it was a mistake, use the undo button at the left of the zoom bar in the preview's bottom-right corner.
A click on a link or its text offers edit link text (leave it empty to remove the text; the notation follows what the code already uses) and delete link (a chain such as A --> B --> C is split into two lines when B→C is deleted).
All of this is a deterministic rewrite of the code, done in your browser, with no AI involved. Chains, A & B lists, subgraph, link text, %% comments and quoted text are all handled; a line the parser does not understand (for example a link with its own id, e1@-->) gets “Couldn't find the definition; edit the code instead”.
Mind maps: add a child or sibling, change shape or color, delete
In a mind map, a click on a node offers:
- Rename: the same as double-click. Text with brackets is switched to a square box and quoted (
n1["API (v2)"]), since a mind map's default notation cannot hold brackets. - Change shape: default, square, rounded, circle, bang, cloud, hexagon. It swaps the brackets on that line (
Growthbecomesn1)Growth(, adding an id when the node had none). - Color: the same quick picks. Mind map syntax has no
styleline, so it becomes a line under the node,:::dgz-fill-yellow dgz-stroke-blue(class names on the node); class names you wrote yourself are kept. These two class names are understood by this site; pasted elsewhere, the diagram still renders, just without the colors. - Add child: the new node goes after all of its children, one level deeper, and opens for renaming right away.
- Add sibling: the new node goes after its whole branch, at the same indent. The root has no siblings.
- Delete: removes the node together with its whole branch; it can be undone. The root cannot be deleted.
State, class and ER diagrams: click a node to color it
A click on a node opens the color picker directly. In state and class diagrams, nodes with ids made of Latin letters and digits, and every node in an ER diagram, get a style line just like a flowchart. Mermaid's style syntax does not accept other ids in state and class diagrams (Chinese names, for example), so their colors are kept in a comment on the last line of the code (%% diagramate {…}): the preview and exports show the colors, and pasted elsewhere the diagram renders unchanged, just without them.
Direction and spacing
On desktop the Layout button sits above the preview; on phones it is at the bottom of the Theme panel:
- Direction: top→down, left→right, bottom→up, right→left, which edits the direction on the first line,
flowchart TD. - Node spacing / rank spacing: two sliders written to the first line of the code as
%%{init: {"flowchart": {"nodeSpacing": …, "rankSpacing": …}}}%%; Reset removes that line.
Both apply to flowcharts only; other diagram types show a note. Because this is native Mermaid syntax, pasting the code anywhere that renders Mermaid gives the same layout.
Drag a node to move it
In flowcharts, state, class and ER diagrams, press on a node and drag it somewhere else (on a phone, long-press until you feel a short vibration, then drag). Its links follow while you drag, and on release the diagram is drawn again: the links keep the same curved style (they follow the route Mermaid computed, not straight segments), link text moves to the middle of its link, a subgraph box grows to keep a moved node inside, and the canvas grows when needed.
- Where the position is stored: Mermaid syntax has no coordinates, so positions are kept in a comment on the last line of the code (
%% diagramate {…}), shown in the code box as a small “Manual adjustments” tag. It travels with the code: share links, cloud versions and the code appended to Word / PowerPoint files keep it, and opening them shows the moved layout. Mermaid ignores the line, so pasted into another tool the diagram still renders, just with the automatic layout. - Undo and reset: undo a drag with the undo button at the preview's bottom-right; click a moved node and the menu offers “Reset position”; “Reset positions” under Layout clears them all; “Clear” on the tag also clears the colors kept on that line.
- Changing direction resets moved nodes: positions are relative to the automatic layout, and a new direction rearranges the whole diagram.
- Mind maps, sequence diagrams, Gantt charts and the like can't be dragged: their layouts don't suit manual placement.
Draw, add shapes and text on top (Annotate)
Click “Annotate” in the top-left corner of the preview and a row of tools appears (the same idea as Excalidraw's toolbar):
- Pen: press and drag to draw a stroke whose width follows your speed, using the same stroke algorithm as Excalidraw. Good for circling, ticking and underlining.
- Rectangle, ellipse, diamond, arrow, line: press and drag to set size and direction. With a hand-drawn theme they are drawn hand-drawn too.
- Text: click to get an input; Enter confirms and Shift+Enter starts a new line. On a phone Enter starts a new line; tap “Done” under the input when you're finished. Click existing text with the Text tool (or double-click it with Select) to edit it in place; clearing it deletes it.
- Eraser: click, or press and sweep across; what you touch fades and is deleted when you let go.
- Select: click an annotation to select it and drag it elsewhere; drag a box on empty space to select everything fully inside it (on a desktop, Shift+click adds or removes one). A selection has handles on its four corners: drag one to resize (text changes its font size; hold Shift to keep the proportions). The trash button on the toolbar deletes the selection. To pan with the Select tool, drag with two fingers on a phone, or hold Space (or the middle mouse button) and drag on a desktop.
- Colors: the first swatch, “Theme color”, uses the color of the diagram's links (near black on light backgrounds, near white on dark ones, following theme changes), followed by five quick colors: black, red, green, blue and orange.
- Stroke width, line style, background and font size: the second row of the toolbar. The pen, shapes and lines come in thin, regular and bold; shapes and lines can be solid, dashed or dotted; rectangles, ellipses and diamonds can get a light red, green, blue or yellow background. The background sits underneath the diagram, so boxing a few nodes as a group never covers the nodes or their text (on dark themes it is translucent). Text comes in small, medium, large and extra large. With annotations selected, these buttons (and the colors) change the selection.
On a desktop there are shortcuts: V select, P pen, R rectangle, O ellipse, D diamond, A arrow, L line, T text, E eraser, Ctrl (⌘ on a Mac)+Z to undo and Ctrl+Shift+Z (⇧⌘Z) to redo, Delete to remove the selection, Ctrl (⌘)+A to select all, and Esc to clear the selection, then again to leave. While annotating, clicking a node doesn't open its menu and double-clicking doesn't edit it; click “Done” to go back, and annotations no longer get in the way of clicking or dragging nodes.
- They follow nodes: in flowcharts, state, class and ER diagrams, an annotation drawn next to a node (within 40 units outside its border) is attached to it, so it moves when you drag the node or when edited code re-lays out the diagram; one drawn far from every node stays at a fixed place on the diagram. If its node is deleted, the annotation stays where it was. Other diagram types (sequence, Gantt, mind maps and so on) can be annotated too, with every annotation at a fixed place.
- Where they are stored: like moved positions, on the comment line at the end of the code (
%% diagramate {…}), with the tag showing “N notes”. Share links and cloud versions keep them, and exported PNG / SVG / Word / PowerPoint files include them; pasted into another tool the diagram still renders, without the annotations. “Clear” on the tag removes annotations, moved positions and colors together. - AI fix, AI edit and AI tidy only change the diagram code; annotations are kept as they are.
- A diagram holds up to 300 annotations; if strokes get too long or too many, you'll be asked to delete some first.