> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trilo.chat/llms.txt
> Use this file to discover all available pages before exploring further.

# Boards

> Visual whiteboards for brainstorming, diagramming, and creative collaboration

Boards are infinite canvas whiteboards where your team can brainstorm, diagram, sketch, and visualize ideas together. They're built on Excalidraw, providing a hand-drawn aesthetic that's perfect for creative work.

## Creating a Board

<Steps>
  <Step title="Navigate to Resources">
    Open a project and click on **Resources** in the navigation.
  </Step>

  <Step title="Click New">
    Click the **+ New** button.
  </Step>

  <Step title="Select Board">
    Choose **Board** from the dropdown menu.
  </Step>

  <Step title="Name your board">
    Give it a descriptive name.
  </Step>
</Steps>

## The Canvas

### Navigation

Move around the infinite canvas:

* **Pan**: Click and drag on empty space, or hold `Space` and drag
* **Zoom in**: `Cmd/Ctrl + +` or scroll up
* **Zoom out**: `Cmd/Ctrl + -` or scroll down
* **Fit to screen**: `Cmd/Ctrl + 1`
* **Reset zoom**: `Cmd/Ctrl + 0`

### Canvas Settings

Access canvas settings from the menu:

* **Grid**: Toggle grid visibility for alignment
* **Background**: Change the canvas background color
* **Snap to grid**: Enable for precise positioning

## Drawing Tools

The toolbar provides everything you need to create:

### Selection Tool (V)

* **Click** to select objects
* **Drag** to create a selection box
* **Shift + click** to add to selection
* **Drag** selected objects to move them

### Shapes

| Tool          | Shortcut | Description                 |
| ------------- | -------- | --------------------------- |
| **Rectangle** | `R`      | Draw rectangles and squares |
| **Ellipse**   | `O`      | Draw circles and ovals      |
| **Diamond**   | `D`      | Draw diamond shapes         |
| **Line**      | `L`      | Draw straight lines         |
| **Arrow**     | `A`      | Draw arrows                 |
| **Freehand**  | `P`      | Draw freeform lines         |

### Text (T)

Add text to your board:

1. Select the text tool or press `T`
2. Click where you want to add text
3. Type your content
4. Click outside to finish

Text options:

* Font size (Small, Medium, Large, Extra Large)
* Font family
* Text alignment
* Text color

### Sticky Notes

Perfect for brainstorming:

1. Select the sticky note tool
2. Click to place a note
3. Type your content
4. Choose a color for visual organization

## Styling Objects

Select any object to customize its appearance:

### Stroke

* **Color**: Choose from the color palette
* **Width**: Thin, normal, or thick
* **Style**: Solid, dashed, or dotted

### Fill

* **Color**: Choose a fill color
* **Style**: Solid, hatch, cross-hatch, or transparent

### Opacity

Adjust transparency from fully opaque to transparent.

### Edges

For shapes:

* **Sharp**: Pointed corners
* **Round**: Rounded corners

### Arrowheads

For lines and arrows:

* None, arrow, bar, dot, or triangle
* Set independently for start and end

## Working with Objects

### Selecting Multiple Objects

* **Drag selection**: Draw a box around objects
* **Shift + click**: Add objects to selection
* **Cmd/Ctrl + A**: Select all objects

### Transforming Objects

* **Move**: Drag selected objects
* **Resize**: Drag corner or edge handles
* **Rotate**: Drag the rotation handle (circle above object)
* **Maintain proportions**: Hold `Shift` while resizing

### Arranging Objects

Right-click or use the menu to:

* **Bring to front**: `Cmd/Ctrl + Shift + ]`
* **Send to back**: `Cmd/Ctrl + Shift + [`
* **Bring forward**: `Cmd/Ctrl + ]`
* **Send backward**: `Cmd/Ctrl + [`

### Aligning Objects

Select multiple objects and use alignment options:

* Align left, center, or right
* Align top, middle, or bottom
* Distribute horizontally or vertically

### Grouping

Combine objects to move and transform them together:

* **Group**: Select objects and press `Cmd/Ctrl + G`
* **Ungroup**: Select group and press `Cmd/Ctrl + Shift + G`

## Collaboration

### Real-Time Collaboration

Work together on boards:

* See teammates' cursors in real-time
* Watch as objects are created and modified
* Colored cursors show who's doing what

### Presence

The board shows:

* Avatars of everyone viewing the board
* Each person's cursor position
* Currently selected objects

## Images

Add images to your board:

<Steps>
  <Step title="Add an image">
    Drag and drop an image file onto the canvas, or use the image tool.
  </Step>

  <Step title="Position">
    Drag to move, use handles to resize.
  </Step>

  <Step title="Style">
    Adjust opacity or add a border if needed.
  </Step>
</Steps>

Supported formats: PNG, JPG, GIF, SVG

## Libraries

Save and reuse common elements:

### Using Libraries

1. Click the library icon in the toolbar
2. Browse available shapes and components
3. Click to add to your canvas

### Creating Library Items

1. Select the objects you want to save
2. Click **Add to library**
3. Name your library item
4. Use it across all your boards

## Exporting

Export your board in various formats:

### Export Options

Click the export button to:

* **PNG**: Image file with transparent background option
* **SVG**: Vector format for scalability
* **Copy to clipboard**: Paste into other apps

### Export Settings

* **Background**: Include or exclude
* **Scale**: 1x, 2x, or 3x resolution
* **Selection only**: Export just selected objects

## Keyboard Shortcuts

| Action    | Shortcut                |
| --------- | ----------------------- |
| Selection | `V`                     |
| Rectangle | `R`                     |
| Ellipse   | `O`                     |
| Diamond   | `D`                     |
| Line      | `L`                     |
| Arrow     | `A`                     |
| Freehand  | `P`                     |
| Text      | `T`                     |
| Delete    | `Delete` or `Backspace` |
| Duplicate | `Cmd/Ctrl + D`          |
| Copy      | `Cmd/Ctrl + C`          |
| Paste     | `Cmd/Ctrl + V`          |
| Undo      | `Cmd/Ctrl + Z`          |
| Redo      | `Cmd/Ctrl + Shift + Z`  |
| Group     | `Cmd/Ctrl + G`          |
| Ungroup   | `Cmd/Ctrl + Shift + G`  |
| Pan       | `Space` + drag          |
| Zoom in   | `Cmd/Ctrl + +`          |
| Zoom out  | `Cmd/Ctrl + -`          |

## Use Cases

<CardGroup cols={2}>
  <Card title="Brainstorming" icon="lightbulb">
    Use sticky notes and freeform drawing to capture ideas quickly during team sessions.
  </Card>

  <Card title="Flowcharts" icon="diagram-project">
    Create process flows with shapes and arrows to document workflows.
  </Card>

  <Card title="Wireframes" icon="window">
    Sketch out UI concepts and layouts before development.
  </Card>

  <Card title="Mind Maps" icon="brain">
    Organize thoughts and explore connections between ideas.
  </Card>
</CardGroup>

## Best Practices

<AccordionGroup>
  <Accordion title="Use colors meaningfully">
    Assign colors to categories or priorities to make your board easier to scan and understand.
  </Accordion>

  <Accordion title="Group related items">
    Group objects that belong together so they can be moved and scaled as a unit.
  </Accordion>

  <Accordion title="Use frames for sections">
    Create rectangles as frames to organize different sections of your board.
  </Accordion>

  <Accordion title="Add labels">
    Use text labels to add context and make your diagrams self-explanatory.
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Organizing Resources" icon="folder" href="/knowledge-base/organizing-resources">
    Learn how to organize all your resources effectively.
  </Card>

  <Card title="Sharing" icon="share" href="/knowledge-base/sharing">
    Share your boards with team members or externally.
  </Card>
</CardGroup>