１．yEd の概要

yEd は、yFiles を元に作成されたグラフエディタ・アプリケーションです。ダイアグラム、ネットワーク図、組織図などの自動生成や編集を行うことができます。また、ダイアグラム等を見やすく自動レイアウトを行えます。大規模なグラフや複雑なネスト・グラフ (階層構造を持ったグラフ) も取り扱うことができます。

２．起動準備

1. 別途ダウンロードしていただいた “yed-2.2.1.1.zip” を解凍します。
2. まず、日本語環境に設定します。
   作成された “yed.jar” をダブルクリックして起動してください。
3. プルダウンメニューの「File」から「Preferences...」を選択します。
   「General」タブの「Language」を “English” から “日本語” に変更し、「OK」ボタンを押します。
   
4. 再起動を促すダイアログが表示されますので、「了解」ボタンを押し、yEd を終了します。
   
5. “yed.jar” をダブルクリックし yEd を再度起動してください。
   一部を除き日本語でメニューやツールチップが表示されます。

サンプル (クリックすると拡大図を表示します。)

組織的レイアウト	階層レイアウト
直交レイアウト	円環レイアウト

３．使用例

1. “yed.jar” をダブルクリックして起動してください。
2. まず、ノードを配置します。
   画面の左上の位置をクリックしてください。
   
3. さらに、空いている位置をクリックし、合計で 15個のノードを配置してください。
   
4. ノード間をエッジで接続します。
   1. ノード１上でクリックしながらマウスを動かしてください。ノード２上でマウスボタンを離します。
   2. ノード１から２に向けて矢印付きのエッジが描かれます。
   3. この場合、ノード１を開始 (ソース) ノード、ノード２を終端 (ターゲット) ノードと呼びます。
      
5. 再度ノード１上でクリックしながらマウスを動かしてください。空いている場所でマウスボタンを離しノード３上でクリックしてください。
   1. 折れ曲がったエッジが描かれます。
   2. ノード１から４の場合はノード４上でクリックする前に空いている場所でもクリックしています。
   3. 下図のようにエッジを作成してください。
      
6. 一旦保存をします。任意のフォルダに保存してください。
   1. ファイルタイプは “YGF Format(*.ygf)” を使用してください。
   2. この形式は yFiles 固有のグラフフォーマットです。
7. 自動レイアウト機能を確認してみます。
   1. 最初に、階層 (Hierarchic) レイアウトを実行します。
   2. プルダウンメニューから「レイアウト」−「階層レイアウト」を選択し、表示されたダイアログの数値は初期値でかまいませんので、「OK」ボタンを押してください。下図のように変形されます。
      
8. 次に、直交 (Orthogonal) レイアウトを実行します。
   1. プルダウンメニューから「レイアウト」−「直交レイアウト」を選択し、表示されたダイアログの「Layout Style」を “Normal + Trees” に変更し、「OK」ボタンを押してください。下図のように変形されます。
      
9. 今度は、円環 (Circular) レイアウトを実行します。
   1. プルダウンメニューから「レイアウト」−「円環レイアウト」を選択し、表示されたダイアログの「Layout Style」は “BCC Compact” のまま、「OK」ボタンを押してください。下図のように変形されます。
      
10. 円環レイアウトの別パターンを確認します。
    1. プルダウンメニューから「レイアウト」−「直交レイアウト」を選択し、表示されたダイアログの「Layout Style」を “Single Cycle” に変更し、「OK」ボタンを押してください。下図のように変形されます。
       
11. 以上のように、各種レイアウトの自動配置が可能です。
    1. ノードやエッジの変更も行う事が可能です。
    2. まず、エッジを変更します。エッジの直線部分をクリックし、右クリックメニューから「属性」を実行してください。
    3. 「曲げ」タブで、「滑らかな曲げ」にチェックを付けます。
    4. 「ラベル」タブで、「テキストの色」を青に変更します。
    5. 「基本」タブで、「ラベルのテキスト」欄に“変更”という文字を入力します。「線の色」を赤に、「ターゲットの矢印」を白抜きの矢印に、「線のタイプ」を破線(点線)にそれぞれ変更します。
       
       
12. 「Apply」 (適用) ボタンを押すと画面に反映されます。「OK」ボタンを押して終了してください。
    （下図では、変更後に文字位置を移動しています。）
13. 次に、ノードを変更します。ノード２をクリックし、右クリックメニューから「属性」を実行してください。
    1. 「形状」タブで、「形状」を “Ellipse” に変更します。
    2. 「ラベル」タブで、位置を “Bottom” に、「テキスト色」を黄色にそれぞれ変更します。
    3. 「全般」タブで、「ラベル・テキスト」欄に “改” という文字を入力します。「描画色」を青に、「描画色 2」をピンクに、「線の色」をオレンジに、「線のタイプ」を太線にそれぞれ変更し、「高さ」を “50.0” に打ち変えてください。
    4. 「Apply」 (適用) ボタンを押すと画面に反映されます。「OK」ボタンを押して終了してください。
       
    5. 形状は下記に変更することができます。
       1. Hexagon(六角形)
       2. Diamond(ひし形)
       3. Parallelogram(平行四辺形)
       4. Octagon(八角形)
       5. Ellipse(楕円) … 「横幅」と「高さ」を同じ値にすることで円になります。
       6. Trapezoid(上辺の短い台形)
       7. Rectangle 3D(枠線のない立体四角形)
       8. Round Rect(角を丸めた四角形)
       9. Trapezoid 2(底辺の短い台形)
       10. Triangle(三角形)
       11. Rectangle(四角形)
           最上部の「タイプ」欄を“画像”に変更することで、JPEG 等のイメージファイルに置き換えることが可能です。

前のページに戻る