---
title: "Viewing diagrams"
description: "The diagram screen, gestures, keyboard shortcuts, views, and presentation mode."
---

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

# Viewing diagrams

Open a document from Home or a project, and its first diagram appears.

## Screen layout

| Area | What it shows |
| --- | --- |
| Top | Project, document, and diagram names; the Live (ライブ) indicator; Present (プレゼン), Download (ダウンロード), and Share (共有); More actions (その他の操作) |
| Left | The diagram list: the document's name and description, the number of diagrams, and a numbered thumbnail for each diagram |
| Center | The diagram, with a toolbar at the bottom |
| Right | Tabs for Description (説明), Version history (バージョン履歴), and JSON |

The tabs on the right show:

- **Description (説明)**: The diagram's description, with assumptions and notes.
- **Version history (バージョン履歴)**: Past versions of the diagram. See [Version history](/en/versions).
- **JSON**: The diagram's content. Copy (コピー) copies the JSON; Copy for AI (AI 用にコピー) copies the content in a form that is easy to hand to an AI.

Drag the border of the side panels to resize them. On narrow screens such as phones, the diagram list and the description open as panels from the bottom of the screen, and Present, Download, and Share move into More actions (その他の操作).

### Toolbar

| Button | What it does |
| --- | --- |
| Diagram list (図の一覧) | Opens or closes the left panel |
| View (ビュー) | Picks a view (shown only when the diagram has views) |
| Hide other elements (ほかの要素を隠す) | Shows only the selected view's elements (shown only while a view is selected) |
| Zoom out / Zoom in (ズームアウト / ズームイン) | Zooms out or in |
| Zoom level (such as 100%) | Click to show at 100% |
| Fit to screen (画面に合わせる) | Fits the whole diagram on screen |
| Description (説明) | Opens or closes the right panel |

## Gestures

| To | Do this |
| --- | --- |
| Pan | Drag, or scroll with a mouse wheel or trackpad |
| Zoom | Hold Ctrl (⌘ on Mac) and scroll, or pinch |
| Select an element or arrow | Click. Right-click also selects. |
| Add to or remove from the selection | Shift-click |
| Select an area | Shift-drag |
| Clear the selection | Click the selection again, click an empty spot, or press Esc |

Selecting an element or arrow highlights the elements connected to it. Hovering over an element shows its name.

## Keyboard shortcuts

| Key | Action |
| --- | --- |
| ← / → | Previous / next diagram |
| + / − | Zoom in / out |
| Shift + 1 | Fit to screen |
| Shift + 0 | Show at 100% |
| Shift + drag | Select an area |
| Esc | Clear the selection (exits presentation when presenting) |
| ? | Show the list of shortcuts |
| ⌘ + K (Ctrl + K on Windows) | Search |

You can also open the shortcut list from More actions (その他の操作) → Keyboard shortcuts (キーボードショートカット).

To use the keyboard only, press Tab to move between elements, Enter to select, and Shift + Enter to add to the selection.

## Copy what you selected

When you select elements or arrows, a list of the selection appears with these buttons:

| Button | What it copies |
| --- | --- |
| Copy as AI instruction (AI への指示にコピー) | The opening of an instruction to your AI that identifies the document, diagram, and elements |
| Copy text (テキストをコピー) | The names of the selected elements |
| Copy ID (ID をコピー) | The IDs of the selected elements |

For how to use Copy as AI instruction, see [Asking your AI](/en/ask).

## Views

A view highlights some of the elements in a diagram. Your AI adds views to a diagram.

When a diagram has views, the toolbar shows View (ビュー). Pick a view to highlight its elements and dim the rest. Pick Show all (すべて表示) to go back.

While a view is selected, turn on Hide other elements (ほかの要素を隠す) to remove the other elements and lay out only the remaining ones. Some diagrams can't be shown this way, and the switch is disabled.

The selected view and the Hide other elements setting are kept in the page URL.

> **Note**
>
> Downloads always contain the whole diagram, even when a view is selected.

## Watch your AI's changes live

When your AI changes a diagram while you have it open, the change appears right away. No reload needed.

- Live (ライブ) at the top means changes appear immediately. If the connection drops, it changes to Reconnecting (再接続中) and reconnects automatically.
- When your AI updates a diagram you don't have open, a notification says the AI updated that diagram. Choose Show (表示) to go to it.
- Diagrams added while you have the document open are marked New (新規) in the diagram list.
- On Home and project pages, documents your AI just updated are marked Updating (更新中) for a short while.

In a steps document, switching diagrams animates in the parts added since the previous diagram.

## Present

Choose Present (プレゼン) at the top to show the diagram full screen.

- The bottom left shows the diagram name, its position in the document, Previous diagram (前の図), Next diagram (次の図), and End presentation (プレゼンを終了). It fades out when you stop using the mouse or keyboard and comes back when you move.
- Press ← / → to go to the previous or next diagram.
- Press Esc to end the presentation.

Only the document's owner can present. People viewing through a shared link can't.

Source: https://docs.dia.rakudeji.com/en/view/index.mdx