Thirty Second Timeout
Animate · Frame 1 active
Frame 1
Players — drag to court
Draw
Tip: Start Cut / Dribble / Screen on a player. Blue ring = snapped ✓
When does this play?
e.g. Pass=1st · Cut=2nd · Screen=3rd
🎨 Templates & Court Style
Applies to the last court you clicked.
💾 Save & Export
Ctrl+S = quick save  ·  Auto-saves to browser storage

Play Diagrammer Help


Start here If you can click and drag, you can use this.

1) What you are looking at

  1. Left panel = buttons and settings.
  2. The court (right side) = where you place players and draw actions.
  3. Active frame (top right of the court area) = the court you are editing right now.

2) The Bench: how to add players

  1. On the left, find the Bench buttons: 1 2 3 4 5 and X1 X2 X3 X4 X5.
  2. Click and hold a bench player.
  3. Drag them onto the court.
  4. Let go to drop them.
  5. To move a player later: click Select/Move, then click and drag the player.

Tip: Offense uses circles with numbers. Defense uses an X with a small number badge.

3) Select/Move (your home base)

  • Most of the time, you will be in Select/Move.
  • After you draw a line or place the ball, the app automatically returns to Select/Move.
  • Click empty court space to deselect.

4) Draw actions (Cut, Pass, Dribble, Screen)

  1. Click the action you want: Cut, Pass, Dribble, or Screen.
  2. On the court: click once where the action starts.
  3. Move your mouse to where it ends.
  4. Click again to finish the action.

Smart snap: start or end an action on a player to attach it. When you move that player, attached endpoints follow.

5) Edit an action (curve it, move endpoints, change style)

  1. Click Select/Move.
  2. Click the line you want to edit.
  3. You will see small white handles:
    • Middle handle = drag to curve the line.
    • End handles = drag to move where the line starts/ends.
  4. To change the line style: click the same line again to cycle: Cut → Pass → Dribble → Screen.

6) Ball

  1. Click Ball, then click on the court to place it.
  2. If you click on a player, the ball will place slightly to the side so you can still see the number.
  3. To move the ball: click Select/Move, then drag the ball.

7) Notes (optional, but great for sharing)

  1. Under each frame, type your coaching notes.
  2. Notes export into your PDF.

8) Templates (fast starting points)

  1. Click a court first so you know which frame is active.
  2. Open Templates and choose one (Horns, Box, 2-3, etc.).
  3. The template will replace only the active frame.
  4. Save Template downloads your play as a JSON file.
  5. Load Own Template lets you re-open that JSON later.

9) Layout (1, 2, or 4 courts)

  • Use Layout to switch between 1, 2, or 4 frames.
  • Your existing frames stay when you expand (1→2, 2→4).
  • When you shrink, the first frames are kept.

10) Undo, Clear, Export PDF

  • Undo removes your most recent item.
  • Clear wipes the active frame.
  • Export PDF downloads a clean PDF of all frames + notes.

Keyboard (optional)

  • Delete = delete selected item
  • Ctrl/Cmd+Z = undo
  • Esc = cancel / deselect

Full help guide available as PDF.

🎬 Clip Ready!
Your play has been recorded.