## 概要 [Pleasanter Site Visualizer](/ja/manual/pleasanter-site-visualizer-overview)のER図表示機能について説明します。ログイン中のプリザンターのサイトのER図表示を行います。 ### Pleasanter Site VisualizerにおけるER図 ER図（Entity Relationship Diagram）は、テーブル同士の関連性やテーブルに含まれる項目を可視化する図です。ER図の記法にはいくつかの種類がありますが、Pleasanter Site Visualizerは以下のようなER図を表示します。サイトを構成するデータを、エンティティ（＝テーブル）、リレーションシップ（＝リンク）、属性（＝項目）の3要素でモデル化しています。  リレーションシップ（＝**リンク**）を示す線上には外部キー（＝**リンク項目**）が、線の両端には多重度を示すカーディナリティが表示されます。多重度は、あるテーブルの1件あたりのデータが、他のテーブルのいくつのデータに関連するかを表したものです。Pleasanter Site Visualizerでは「0または1」と「0以上」のみが表示されます。 各エンティティ（＝テーブル）表示の意味は、以下の表のとおりです。 | No | 意味 | 説明 | | :-: | --- | --- | | 1 | タイトル(サイトID) | テーブルのタイトルとサイトIDです。 | | 2 | カラム名 | 「ClassA」などデータベース上のカラム名称です。 | | 3 | 項目名 | 「分類A」などのデフォルト名称です。 | | 4 | PKまたはFK | PKはID項目を、FKはリンク項目を表します。 | | 5 | 表示名 | [テーブルの管理：エディタ：項目の詳細設定：表示名](/ja/manual/table-management-label-text)で設定した名称です。 | ## 前提条件 1. 「サイトの管理権限」が必要です。 ## 1. 操作手順（共通 画面を表示・ファイルをDL） 1. サイトの管理者権限のあるユーザでログインします。 1. 設定情報表示したいサイトに遷移します。 1. [Pleasanter Site Visualizer](/ja/manual/pleasanter-site-visualizer-overview)ブラウザ拡張アイコンをクリックします。 | アイコン状態 | 説明 | |--|--| |  | 青色アイコン時は操作が可能です。 | |  | 灰色アイコン時は操作が不可能です。 （ログインしていない、またはサイト管理が開けないページを開いている場合にこの状態となります。） | 1. [Pleasanter Site Visualizer](/ja/manual/pleasanter-site-visualizer-overview)の操作画面が表示されます。  ## 2. 操作手順（画面を表示） 1. 「画面を表示」をクリックします。  1. 「ER図画面」が開きます。ER図の部分は、カーソルキーまたはマウスドラッグによるスクロール操作が可能です。  画面左上には5つのボタンが並んでいます。5つのボタンの機能は以下の通りです。 | アイコン | ボタン名 | 機能 | |:--|:--|:--| | | Zoom-in | クリックすると、ER図を1段階拡大表示します。 | |  | Zoom-out | クリックすると、ER図を1段階縮小表示します。 | |  | Zoom-Reset | クリックすると、ER図をウィンドウサイズで最大化します。 | |  | Save PNG | クリックすると、「PNG画像出力」ダイアログ（[下記](#png-output)参照）が開きます。 | |  | Text Search | クリックすると、「ER図検索」ダイアログ（[下記](#er-diagram-d)参照）が開きます。 | <a id="png-output"></a> <br> ### 「PNG画像出力」ダイアログ ER図をPNG形式の画像としてダウンロードできます。  このダイアログでは、出力するPNG画像の縦横サイズを指定できます。 |オプションの選択|効果| |---|---| |「幅優先」を選択|・「幅(px)」を変更すると、縦横比を固定して「高さ(px)」を自動計算します。<br>・「高さ(px)」を変更すると、縦横比を無視します。| |「高さ優先」を選択|・「高さ(px)」を変更すると、縦横比を固定して「幅(px)」を自動計算します。<br>・「幅(px)」を変更すると、縦横比を無視します。| <a id="er-diagram-d"></a> <br> ### 「ER図検索」ダイアログ 「Text Search」ボタンをクリックすると、「ER図検索」ダイアログが開きます。 検索結果とこのダイアログが重なって見づらい場合には、ドラッグして移動できます。  #### テーブル名で検索する テーブル名で検索すると、テーブル名(ID)が黄色でハイライトされ、テーブルがウィンドウにフィットするように拡大表示されます。  #### カラム名で検索する カラム名の一部で検索して複数ヒットした場合、最初に選択したカラムを含むテーブルがウィンドウにフィットするように拡大表示されます。続けて別のカラムを選択しても、拡大率は変わりません。  #### その他の検索 文字列「PK」または「FK」を検索すると、IDまたはリンク項目を確認できます。  ## 3. 操作手順（ファイルをDL） 1. 「ファイルをDL」をクリックします。  ER図をMermaid形式のテキストファイルとしてダウンロードできます。 ### ダウンロードしたMarmaid形式（.mmd）ファイルの利用方法 ダウンロードしたファイルは、[Mermaid Live Editor](https://mermaid.live/)などでプレビューできるほか、Markdownドキュメントにコードブロックとして埋め込むなどして活用できます。 以下の図はVS Codeに拡張機能[Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)をインストールして表示させています。  ## 対応バージョン |対応バージョン|内容| |:--|:--| |プリザンター1.4.21.0以降|新規作成| ## 関連情報 <div id="ManualList"><ul><li><a href="/ja/manual/pleasanter-site-visualizer-overview">Pleasanter Site Visualizer：機能概要</a><span>2025/10/27 up</span></li> <li><a href="/ja/manual/pleasanter-site-visualizer-setup">Pleasanter Site Visualizer：セットアップ、事前準備</a><span>2025/10/27 up</span></li> <li><a href="/ja/manual/pleasanter-site-visualizer-how-to-use-sites">Pleasanter Site Visualizer：使い方：サイト設定表示</a><span>2025/10/27 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />