Welcome back to Pinta

Do you want to open the last edited file?

Rename Icons

Give your pasted icons meaningful names. These names can be used directly in line text (e.g., `!google!`).

Confirm Deletion

Are you sure you want to delete this item? This action cannot be undone.

Edit Link

Pinta {{version}}

General

  • Pinta helps create diagrams with a main topic and branching sub-topics.
  • Add schema lines, post-it notes, and drawings.
  • Most items can be dragged, edited, and deleted.
  • Ctrl/Cmd + P to open a command palette (it has an example)
  • Select/cut/paste: Drag over lines in the schema to select them (and their children). Cut/copy with Cmd/Ctrl-x/c and paste with Cmd/Ctrl-v. Esc cancels the cut. Pasting is on the currently hovered line. Pasting redistributes all children on that line to ensure all is pretty much on screen.

Schema Lines

  • Create Child Line: Click on any existing line.
  • Labels:
    • Edit: Click on text.
    • Multiline: Shift+Enter while editing.
    • Move: Drag text along or perpendicular to its line.
  • Resize Child Line: Drag its outer end.
  • Move Child Line Base: Drag its connection point along the parent line.
  • Color: Press one of the color letters while hovering the line (R, G,Y,B,K,W,D for default)
  • Thickness:Cmd/Ctrl + . (increase) or , (decrease) while hovering the line.
  • Size (extra): * or / while hovering the line to double or halve its length, [/{ or ]/} to increase its length gradually.
  • Position (extra): 0 or 9 while hovering the line to place it at the 5% or 95% of the parent length.
  • i while hovering the line reverses its direction.

Line Labels (all while hovering on the text)

  • Font Size: . (increase) or , (decrease).
  • Bold: Shift + B.
  • Align Center: Shift + C.
  • Link: Cmd/Ctrl + K to add/edit. Click icon on line to open.
  • Color: One of the "color letters" (R, G,Y,B,K,W,)
  • Styling and links can also be tweaked while writing by using Ctrl/Cmd + key when editing. Colors only on hover.

Post-it Notes

  • Create: Alt+Click or Hold Click on empty editor space.
  • Edit: Click content area. Supports pasting links.
  • Change Color Ctrl + G to enter color change mode, then one of): y (yellow), r (red), g (green), b (blue), w (white), t (transparent).
  • Font Size (Ctrl + key): . (increase), , (decrease).

Drawings (SVG Layer)

  • Select Tool: r (rectangle), h (highlight), a (arrow).
  • Cancel Tool: s or Esc.
  • Draw: Click and drag on canvas with a tool selected.
  • Manipulate: Click to select, then drag. Backspace or Delete to remove.
  • Change Color:
    1. Deselect any tool (press s).
    2. Select a drawing.
    3. Press c (color change mode).
    4. Press a color key: r, o, y, g, c, b, v, m.

General Operations

  • Save Diagram: Cmd/Ctrl + S.
  • Load Diagram: Cmd/Ctrl + O.
  • Export to Static HTML: Cmd/Ctrl + E.
  • Toggle Theme: q (cycles Dark/Light).
  • Close Modals / Cancel Tool: Esc.
  • Delete Selected Item: Backspace or Delete (for lines, post-its, drawings, deleting a line also deletes all its children).

About Pinta

Pinta - Visual Diagram Editor.

Github

© Ruben Berenguel 2025 with a lot of code by Gemini