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

# Editing Layouts, Modifying Colors, and Filtering Tables

> Organize diagram layouts, apply visual styling, and implement filtering to create create and insightful database diagrams.

<CardGroup cols={3}>
  <Card title="Reorder Diagram" icon="grid-2" color="#0f172a">
    Automatically reorganize your diagram for optimal readability.
  </Card>

  <Card title="Snap to Grid" icon="magnet" color="#0f172a">
    Align tables precisely to a grid for a cleaner diagram.
  </Card>

  <Card title="Overlap Highlighting" icon="triangle-exclamation" iconType="solid" color="#0f172a">
    Instantly identify and resolve table overlaps.
  </Card>

  <Card title="Zoom Controls" icon="magnifying-glass" iconType="solid" color="#0f172a">
    Navigate your diagram with zoom in, zoom out, show all, and 100% zoom options.
  </Card>

  <Card title="Sidebar Visibility" icon="sidebar" iconType="solid" color="#0f172a">
    Show or hide the sidebar to maximize your canvas workspace.
  </Card>

  <Card title="Table Colors" icon="palette" iconType="solid" color="#0f172a">
    Customize table colors to visually group and highlight elements in your diagram.
  </Card>

  <Card title="Filters" icon="filter" iconType="solid" color="#0f172a">
    Filter the table list in the sidebar to easily find specific tables.
  </Card>
</CardGroup>

## Reorder Diagram

The <Icon icon="grid-2" color="#0f172a" /> **Reorder Diagram** button helps you automatically arrange tables in your diagram based on their relationships, optimizing for visibility.
Use this feature to quickly structure your diagram after adding or moving tables.

<Steps>
  <Step title="Click the Reorder Diagram Button" icon="grid-2" color="#0f172a">
    Click the <Icon icon="grid-2" color="#0f172a" /> **Reorder Diagram** button in the top-left toolbar of the canvas.
  </Step>

  <Step title="Confirm Reordering" icon="check">
    In the confirmation dialog, click **Reorder** to proceed. ChartDB will intelligently rearrange your tables.
  </Step>
</Steps>

## Snap to Grid

The <Icon icon="magnet" color="#0f172a" /> **Snap to Grid** feature ensures tables align to a grid, creating a more organized and visually consistent diagram. Click the <Icon icon="magnet" color="#0f172a" /> **Snap to Grid** button in the toolbar to enable or disable grid snapping. When enabled, the button is highlighted, and dragging tables will automatically snap them to the grid. To temporarily snap tables to the grid while the feature is disabled, hold down the `Shift` key while dragging.

## Overlap Highlighting

<Icon icon="triangle-exclamation" iconType="solid" color="#0f172a" /> **Overlap Highlighting** helps you identify tables that are overlapping in your diagram. The button will automatically appear when at least two tables are overlapping. Clicking the <Icon icon="triangle-exclamation" iconType="solid" color="#0f172a" /> **Overlap Highlighting** button will navigate you to the area of the diagram where the overlap occurs, allowing you to manually resolve the overlap or use the <Icon icon="grid-2" color="#0f172a" /> **Reorder Diagram** feature.

## Zoom Controls

ChartDB provides intuitive zoom controls at the bottom center of the canvas to navigate your diagram effectively.

<Steps>
  <Step title="Show All Tables" icon="expand" iconType="solid">
    Click the <Icon icon="expand" iconType="solid" color="#0f172a" /> **Show All** button to fit the entire diagram within the viewport.

    **Shortcut:** Use **`Command + 0`**.
  </Step>

  <Step title="Zoom In and Out" icon="magnifying-glass-plus">
    Use the <Icon icon="magnifying-glass-plus" color="#0f172a" /> **Zoom In** and <Icon icon="magnifying-glass-minus" color="#0f172a" /> **Zoom Out** buttons for incremental zoom adjustments.
  </Step>

  <Step title="Zoom to 100%" icon="percent">
    Click the zoom level indicator (e.g., `66%`) to reset the zoom level to 100%.
  </Step>
</Steps>

## Sidebar Visibility

Maximize your canvas workspace by showing or hiding the sidebar as needed.

<Steps>
  <Step title="Using the View Menu" icon="eye">
    1. Click **View** in the top menu bar.
    2. Select **Hide Sidebar** or **Show Sidebar** to toggle visibility.
  </Step>

  <Step title="Using Keyboard Shortcut" icon="keyboard">
    Use the shortcut **`Command + B`** to quickly toggle the sidebar's visibility.
  </Step>
</Steps>

## Table Colors

Customize table colors to visually organize and highlight elements within your database diagram.

<Steps>
  <Step title="Select a Table" icon="hand-pointer" iconType="regular">
    Click on the table on the canvas or select it from the sidebar.
  </Step>

  <Step title="Access Color Picker" icon="palette">
    In the sidebar, within the table details, locate and open the color picker control.
  </Step>

  <Step title="Choose a Color" icon="swatchbook">
    Select your desired color from the color picker. The table color will update in real-time.
  </Step>
</Steps>

<Tip>
  Use color to visually group related tables or highlight key entities for better diagram comprehension.
</Tip>

## Sidebar Filters

Filter the table list in the sidebar to quickly locate and manage specific tables, especially in large database schemas.

<Note>
  Filtering in ChartDB currently only affects the table list in the sidebar. It does not filter tables directly on the canvas diagram.
</Note>

<Steps>
  <Step title="Open Filter Input" icon="filter">
    Click into the **Filter tables** input field at the top of the sidebar. Shortcut: **Command + F**
  </Step>

  <Step title="Enter Filter Term" icon="i-cursor">
    Type your filter term into the input field. The sidebar table list will dynamically update to show matching tables. **Delete the text in the filter input to clear the filter** and show all tables again.
  </Step>
</Steps>