構成図エディタ GUI-DAC (ジーユーアイ・ダック) の使い方と特徴 - アーキテクチャをビジュアルに楽しもう！

![guidac.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/1d4f5a38-488f-7532-915d-f6a60cf887ff.png)

## はじめに

GUI-DACは、GUI[^1]とDaC[^2]両方の特性を持つ構成図エディタだ。この記事では、GUI-DACの特徴と使い方を紹介するぞ。GUI-DACでアーキテクチャをビジュアルに楽しんで、クリエイティブな力を解放しよう。

## 1. GUI-DACとは

GUI-DACは、構成図をマウスで編集できて、作った構成図をテキストで保存ができるんだ。

[^1]:GUI(Graphical User Interface)とは、アイコンやボタンなどを用いて直感的にわかりやすく操作できるようにしたユーザーインターフェースのこと。

[^2]:DaC(Diagram as Code)とは、コードを使用して図を作成および管理し、視覚的なドキュメントの作成、管理を改善する手法のこと。



## 2. 特徴

### 2.1 直感的なインターフェース

GUI-DACは、マウスドラッグで簡単に配置を編集できるぞ。まとめて移動したい図形や、重ねたくない図形を自動で判別するぞ。

### 2.2 カスタマイズの自由度

GUI-DACで使用したいアイコンは、ユーザーが追加できるぞ。だから自分のアプリケーションやネットワークに合わせた構成図を作図できるぞ。

### 2.3 保存と読み込み

GUI-DACは、構成図をテキストデータで保存できるし、保存したデータを読み込むこともできるぞ。テキストデータだから構成図をGitでバージョン管理することもできるぞ。


### 2.4 キャンバスサイズ無限

キャンバスサイズが無限だから、キャンバスの端に悩まされることがないぞ。だから余白を作るために文字サイズや図を小さくしたり、配置調整が不要だぞ。


## 3. 使い方

### 3.1 インストール

GUI-DACはインストール不要だぞ。
ソースをダウンロードして`gui-dac.html`をブラウザソフトで開くだけだ。

### 3.2 構成図の作成

`コード(Code)`ボタンをクリックすると構成図のテキストデータを編集できるぞ。編集後`反映`ボタンで構成図に反映できるぞ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/785f5fcd-c5b3-04b4-0437-97b855eb5af0.png)

既にデータがあるなら`ファイルを選択`ボタンでインポートできるぞ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/b401e10c-30d0-85a7-953c-629804189172.png)


### 3.3 カスタマイズ

GUI-DACは、アイコン、図形の線／色／サイズを指定できるぞ。だから工夫次第でフロー図やマインドマップも作れるぞ。

### 3.4 保存と読み込み

構成図をテキストデータで保存できるぞ。
`コード(Code)`ボタンのクリックで表示したテキストをコピーしテキストデータとして保存するだけだ。データの拡張子は`.json`がいいぞ。保存したデータはGUI-DACに読み込めば構成図を描画できるぞ。


## 4. 今すぐ使う

GUI-DACは今ここで使えるぞ。
↓ はGUI-DACそのものだ。とりあえずマウスドラッグで図を移動しまくってみてくれ。

- WebサーバのAWS構成図
    - `0.5x`で小さくすると使いやすいかも
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/dfb277af-e552-3293-0980-fbf3e57e3f6d.png)

<p class="codepen" data-height="900" data-default-tab="result" data-slug-hash="QWXMxJy" data-pen-title="gui-dac-aws構成図-WebApp" data-user="sosi-now" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sosi-now/pen/QWXMxJy">
  gui-dac-aws構成図-WebApp</a> by suo (<a href="https://codepen.io/sosi-now">@sosi-now</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- ETLのAWS構成図
    - ETL(データの抽出・変換・書出し)をAWSで実装する構成図の例

<p class="codepen" data-height="700" data-default-tab="result" data-slug-hash="Yzorpxa" data-pen-title="gui-dac-aws構成図-ETL" data-user="sosi-now" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sosi-now/pen/Yzorpxa">
  gui-dac-aws構成図-ETL</a> by suo (<a href="https://codepen.io/sosi-now">@sosi-now</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- 業務フロー図
    - 作図できるのはAWSの構成図だけじゃないぞ

<p class="codepen" data-height="900" data-default-tab="result" data-slug-hash="BagwQZM" data-pen-title="gui-dac-業務フロー図" data-user="sosi-now" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sosi-now/pen/BagwQZM">
  gui-dac-業務フロー図</a> by suo (<a href="https://codepen.io/sosi-now">@sosi-now</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 5. スクリプト

GUI-DACの詳細な使い方、ソース、構成図のサンプルはここにあるぞ。

https://github.com/zgw426/GUI-DAC


## まとめ

GUI-DACは、GUIとDaC両方の特性を持つ構成図エディタだ。直感的なインターフェースとカスタマイズの自由度が楽しいぞ。GUI-DACを使えば、簡単に構成図を作図できるし、テキストで保存できるから、構成図をGitでバージョン管理することもできるぞ。

---

## これで終わりじゃないんだわ

GUI-DACにとって今は通過点。構成図エディタの枠を超え更に進化するぞ！