ノート間の[[内部リンク]]のグラフ表現を表示します。
より多くのノートから参照されているノートは、グラフ上でより大きなノードとして表現されます。
![[Pasted image 10.png]]
### ビジュアル化のヒント
- 各ノードにカーソルを合わせることで連結をハイライトし、他のノードすべてを暗くします。
- ノードをドラッグすることでグラフを再配置できます。これは、いくつかのノードが他のノードに被さっている場合に役立つかもしれません。
### ナビゲーションのヒント
- `+` や `-` キー、マウスホイールでズームできます。
- バックグラウンドをドラッグするか、キーボードの矢印キーでパンを行うことをできます。
- 速く移動するには、キーボードを使って移動する際に `Shift` をホールドしてください。
### カスタムCSS
グラフは `<canvas>` とWebGLを利用してレンダリングを行っているため、ノードやリンクといったものについて[[CSSのカスタマイズ|CSS]]から影響を与えられません。グラフビューをカスタマイズするために、CSSカラーをWebGLコマンドに変換するための方法を提供しています。
#### 次のCSSクラスがサポートされています
```
.graph-view.color-fill
.graph-view.color-fill-tag (theme-dependent)
.graph-view.color-fill-attachment (theme-dependent)
.graph-view.color-arrow
.graph-view.color-circle
.graph-view.color-line
.graph-view.color-text
.graph-view.color-fill-highlight
.graph-view.color-line-highlight
.graph-view.color-fill-unresolved
```
\* theme-dependentとは、異なるテーマに対応するため `.theme-dark` か `.theme-light` を追加する必要があるかもしれないということです。詳しくは[[グラフビュー#デフォルト]]を参照してください。
#### 次のCSSルールがサポートされています
```css
.graph-view.color-class {
/* #HEX、rgb、rgbaといったCSSのすべてのカラーディレクティブをサポートしています */
color: #FFF;
color: #FFFFFF;
color: rgb(0, 0, 0);
color: rgba(0, 0, 0, 1);
/* Opacity(rgbaに似た)は色を透明にします */
opacity: 0.5;
}
```
#### デフォルト
これらのCSSルールはObsidianがデフォルトで使用しているものです。同一のものや[より具体的な](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)CSSルールを使ってオーバーライドできます。これは特に `.color-fill-tag` と `.color-fill-attachment`に適用されます。最終手段としては `!important` をルールの終わりに追加してください。
```css
.graph-view.color-fill,
.theme-dark .graph-view.color-fill-tag,
.theme-light .graph-view.color-fill-tag,
.theme-dark .graph-view.color-fill-attachment,
.theme-light .graph-view.color-fill-attachment,
.graph-view.color-arrow,
.graph-view.color-circle,
.graph-view.color-line,
.graph-view.color-text,
.graph-view.color-fill-highlight,
.graph-view.color-line-highlight,
.graph-view.color-fill-unresolved {}
```