Basic Frontend Roadmap - Graphito

Loading...

Basic Frontend Roadmap - Graphito

{ Graphito } Cheatsheet

Create & Edit

Double-click canvas to create a new node.
Double-click node to edit its content.
Hover a node edge to reveal its handles.
Drag from one handle to another to connect nodes.
Double-click graph title (top bar) to rename. [Only for Cloud Saved Graphs]
Select node(s) ⇢ Ctrl/Cmd + C to copy.
Select node(s) ⇢ Ctrl/Cmd + X to cut.
Select node(s) ⇢ Ctrl/Cmd + V to paste.

Navigate

Hold Space or middle-mouse while dragging ⇢ pan canvas.
Ctrl/Cmd + scroll ⇢ zoom.

Node & Edge actions

Select item ⇢ Delete in pop-over to remove.
Same pop-over ⇢ Color to style nodes or edges.
Select edge ⇢ click “Eye” ⇢ edit label in dialog.
Select node or edge ⇢ click “Trash” or hit Backspace ⇢ confirm deletion.
Select node ⇢ drag to move it.
Use Arrow Keys to nudge selected node(s).
Hold Ctrl while dragging ⇢ disable snapping to grid.

Select & Group

Hold Shift and click to multi-select.
Drag empty canvas to draw selection box.
After multi-select ⇢ Group in pop-over.

History

Undo ⇢ Ctrl/Cmd + Z
Redo ⇢ Ctrl/Cmd + Shift + Z

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.

Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Basic Frontend Roadmap ^{[View Only]}

A friendly roadmap that guides you through the key skills, tools, and concepts every frontend developer should know.

Replace your local draft?

You already have a local draft for this graph. If you continue, your current local content will be deleted and the template will be loaded. This can’t be undone.

Prefer to keep it? Open your local draft.

Create a copy of this graph to edit