orcanote-whiteboard

Files (1)

• SKILL.md

SKILL.md (first lines)

# Orca Note Whiteboard (Excalidraw)

This skill provides the syntax, structural rules, and design principles for creating semantically rich and visually appealing whiteboards in Orca Note using the Excalidraw JSON format.

## Excalidraw JSON Schema

Whiteboards are defined within `whiteboard` code blocks.

### Core Structure

```json
{
  "elements": [],
  "files": {}
}
```

### Common Element Types

| Type | Description | Key Fields |
| :--- | :--- | :--- |
| `rectangle` | Standard rectangle | `x, y, width, height, strokeColor, backgroundColor, roundness, boundElements` |
| `ellipse` | Circle or oval | `x, y, width, height, strokeColor, backgroundColor, boundElements` |
| `arrow` | Line or connector | `points` (relative to `x,y`), `startArrowhead`, `endArrowhead`, `startBinding`, `endBinding`, `elbowed` (true for elbow arrows) |
| `line` | Simple line | `points` |
| `text` | Text label | `text`, `fontSize`, `fontFamily` (5: Hand-drawn, 6: Sans, 8: Monospace), `containerId` (ID of the shape this text belongs to), `x, y, width, height, strokeColor, backgroundColor`, `textAlign`, `verticalAlign` |
| `embeddable` | Embedded Orca Note block | `customData: { "blockId": "ID" }`, `x, y, width, height, strokeColor, backgroundColor, roundness` |

### Labeling Shapes with Text

To place text inside a shape (like a rectangle or ellipse):
1.  **Create the Shape**: Give it a unique `id`.
2.  **Create a Text Element**:
    - Set its `containerId` to the shape's `id`.
    - Set `x` and `y` to the container's `x` and `y`.
    - Set `width` and `height` to fit within the shape's dimensions.
    - Set `textAlign` and `verticalAlign` to center the text.
3.  **Link back**: Add the text element's ID to the shape's `boundElements` array: `{ "type": "text", "id": "text_id" }`.

### Arrow Types
- **Straight Arrow**: Standard line. No `elbowed` field.
- **Elbow Arrow**: Set `elbowed: true`. This creates a right-angled connector.

#### Arrowheads (`startArrowhead` / `endArrowhead`)
- `null`: No arrowhead.
- `"arrow"`, `"bar"`, `"dot"`, `"triangle"`.

### Arrow Connection / Connecting Two Elements
To link two shapes (e.g., A and B) via an arrow:
1.  **On the Arrow**: Define `startBinding: { "elementId": "A", "fixedPoint": [1, 0.5] }` and `endBinding: { "elementId": "B", "fixedPoint": [0, 0.5] }`.
2.  **On the Shapes**: Add `{ "id": "arrow_id", "type": "arrow" }` to the `boundElements` array of both Shape A and Shape B.

`fixedPoint` is a tuple of [x, y] where x and y are between 0 and 1, representing the relative position on the shape's boundary (0,0 is top-left, 1,1 is bottom-right). For example:
- `fixedPoint: [1, 0.5]` means the arrow starts at the middle of the right edge of Shape A.
- `fixedPoint: [0, 0.5]` means the arrow ends at the middle of the left edge of Shape B.

**Example Connection with Text labels:**
```json
{
  "elements": [
    {
      "id": "shape-a",
      "type": "rectangle",
      "x": 100, "y": 100, "width": 100, "height": 50,
      "boundElements": [
        { "id": "text-a", "type": "text" },
        { "id": "link-1", "type": "arrow" }
      ]
    },
    {
      "id": "text-a",
      "type": "text",
      "x": 100, "y": 100, "width": 50, "height": 20,
      "fontFamily": 6,
      "fontSize": 16,
      "text": "Start",
      "textAlign": "center",
      "verticalAlign": "middle",
      "containerId": "shape-a"
    },
    {
      "id": "shape-b",
      "type": "ellipse",
      "x": 400, "y": 100, "width": 100, "height": 50,
      "boundElements": [
        { "id": "text-b", "type": "text" },
        { "id": "link-1", "type": "arrow" }
      ]
    },
    {
      "id": "text-b",
      "type": "text",
      "x": 400, "y": 100, "width": 50, "height": 20,
      "fontFamily": 6,
      "fontSize": 16,
      "text": "End",
      "textAlign": "center",
      "verticalAlign": "middle",
      "containerId": "shape-b"
    },
    {
      "id": "link-1",
      "type": "arrow",
      "x": 200, "y": 125,
      "points": [[0, 0], [200, 0]],
      "startBinding": { "elementId": "shape-a", "fixedPoint": [1, 0.5] },
      "endBinding": { "elementId": "shape-b", "fixedPoint": [0, 0.5] },
      "endArrowhead": "triangle",
      "elbowed": true
    }
  ]
}
```

## Embedding Orca Note Blocks

To reference and display an existing Orca Note block inside a whiteboard, use the `embeddable` type. Note that embedded blocks have no associated text element for labeling.

### Implementation

From sethyuan/orcanote-agent-skills, MIT.

More from sethyuan/orcanote-agent-skills