Diagramming with Excalidraw

.excalidraw

File Format

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [],
  "appState": {
    "viewBackgroundColor": "#ffffff"
  },
  "files": {}
}

type

"excalidraw"

version

2

source

elements

appState

files

Workflow

1. Plan - Choose diagram type, layout, colors
2. Generate - Create elements with proper structure
3. Validate - Check bindings and structure before writing

Validation Checklist

Bindings

• Arrows connecting shapes have both

  startBinding

  and

  endBinding

  set
• Arrow

  x,y

  sits at the source shape's edge, not floating in space
• Shapes list connected arrows in their

  boundElements

  (bidirectional)
• Text labels have

  containerId

  pointing to their container
• Containers have

  boundElements

  referencing their text

Polygons

• Polygon labels use

  groupIds

  (not

  containerId

  )
• Text positioned manually at polygon center
• Polygons cannot have arrow bindings - bind to grouped text label instead
• Polygon's

  boundElements

  must be

  null

Layout

• Elements don't overlap unexpectedly
• Arrows route around shapes, not through them
• Minimum 40px between sibling elements
• All IDs are unique
• Label text matches actual names (verify spelling)

Text

• Use standard font sizes: S (16), M (20), L (28), XL (36)
• Bound text: set

  containerId

  ,

  textAlign: "center"

  ,

  verticalAlign: "middle"

• Position bound text at container center; Excalidraw adjusts automatically

Frames (presentations only)

• Frames are slides/artboards, not for grouping elements in a single diagram

Reference Index

Elements

Styling