Drawings

The user's instructions win over this skill when they differ.

Files

• A drawing is an Excalidraw scene saved as JSON in a .excalidraw file, such
  as drawings/idea.excalidraw. The app also opens Obsidian's
  .excalidraw.md files: keep those in their own format.
• For boxes and arrows that should lay themselves out, a D2 diagram is usually
  the better choice. Use a drawing for sketches and hand-placed layouts.
• To change a drawing, read it, change only the elements you need, and keep
  every other element and field as it is, ids included. Save with
  write_file and the base_version you read.
• Embed it in a note with <Drawing src="drawings/idea.excalidraw" />, and
  show it with show_file.
• To comment on one element, pass its element_id to add_comment.

The scene

{
  "type": "excalidraw",
  "version": 2,
  "elements": [
    {"id": "draft", "type": "rectangle", "x": 0, "y": 0, "width": 180, "height": 80, "strokeColor": "#1e1e1e", "backgroundColor": "#fff3bf", "fillStyle": "solid", "roundness": {"type": 3}, "boundElements": [{"id": "draft-label", "type": "text"}, {"id": "draft-to-review", "type": "arrow"}]},
    {"id": "draft-label", "type": "text", "x": 50, "y": 27.5, "width": 80, "height": 25, "text": "Draft", "fontSize": 20, "fontFamily": 5, "textAlign": "center", "verticalAlign": "middle", "containerId": "draft"},
    {"id": "review", "type": "ellipse", "x": 300, "y": 0, "width": 180, "height": 80, "strokeColor": "#1e1e1e", "backgroundColor": "transparent", "boundElements": [{"id": "review-label", "type": "text"}, {"id": "draft-to-review", "type": "arrow"}]},
    {"id": "review-label", "type": "text", "x": 350, "y": 27.5, "width": 80, "height": 25, "text": "Review", "fontSize": 20, "fontFamily": 5, "textAlign": "center", "verticalAlign": "middle", "containerId": "review"},
    {"id": "draft-to-review", "type": "arrow", "x": 188, "y": 40, "width": 104, "height": 0, "points": [[0, 0], [104, 0]], "endArrowhead": "arrow", "startBinding": {"elementId": "draft", "focus": 0, "gap": 8}, "endBinding": {"elementId": "review", "focus": 0, "gap": 8}}
  ],
  "appState": {"viewBackgroundColor": "#ffffff"},
  "files": {}
}

• Every element needs a unique id, a type, x, y, width and
  height. The app fills in the fields you leave out.
• Types: rectangle, ellipse, diamond, text, arrow, line and freedraw.
• Style: strokeColor, backgroundColor ("transparent" or a colour),
  fillStyle ("solid" or "hachure"), strokeWidth (1, 2 or 4),
  roughness (0 for clean lines, 1 for sketchy), roundness
  ({"type": 3} for rounded corners).
• Text: text, fontSize and fontFamily (5 hand-drawn, 6 plain, 8 code).
• A label inside a shape is a text element with containerId set to the
  shape's id, and the shape lists it in boundElements.
• An arrow's points are relative to its x and y. To attach it to shapes,
  set startBinding and endBinding, and list the arrow in each shape's
  boundElements.