はじめに
GUI-DACは、GUI1とDaC2両方の特性を持つ構成図エディタだ。この記事では、GUI-DACの特徴と使い方を紹介するぞ。GUI-DACでアーキテクチャをビジュアルに楽しんで、クリエイティブな力を解放しよう。
1. GUI-DACとは
GUI-DACは、構成図をマウスで編集できて、作った構成図をテキストで保存ができるんだ。
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)ボタンをクリックすると構成図のテキストデータを編集できるぞ。編集後反映ボタンで構成図に反映できるぞ。
既にデータがあるならファイルを選択ボタンでインポートできるぞ。
3.3 カスタマイズ
GUI-DACは、アイコン、図形の線／色／サイズを指定できるぞ。だから工夫次第でフロー図やマインドマップも作れるぞ。
3.4 保存と読み込み
構成図をテキストデータで保存できるぞ。
コード(Code)ボタンのクリックで表示したテキストをコピーしテキストデータとして保存するだけだ。データの拡張子は.jsonがいいぞ。保存したデータはGUI-DACに読み込めば構成図を描画できるぞ。
4. 今すぐ使う
GUI-DACは今ここで使えるぞ。
↓ はGUI-DACそのものだ。とりあえずマウスドラッグで図を移動しまくってみてくれ。
- WebサーバのAWS構成図
-
0.5xで小さくすると使いやすいかも 
-
See the Pen gui-dac-aws構成図-WebApp by suo (@sosi-now) on CodePen.
- ETLのAWS構成図
- ETL(データの抽出・変換・書出し)をAWSで実装する構成図の例
See the Pen gui-dac-aws構成図-ETL by suo (@sosi-now) on CodePen.
- 業務フロー図
- 作図できるのはAWSの構成図だけじゃないぞ
See the Pen gui-dac-業務フロー図 by suo (@sosi-now) on CodePen.
5. スクリプト
GUI-DACの詳細な使い方、ソース、構成図のサンプルはここにあるぞ。
まとめ
GUI-DACは、GUIとDaC両方の特性を持つ構成図エディタだ。直感的なインターフェースとカスタマイズの自由度が楽しいぞ。GUI-DACを使えば、簡単に構成図を作図できるし、テキストで保存できるから、構成図をGitでバージョン管理することもできるぞ。
これで終わりじゃないんだわ
GUI-DACにとって今は通過点。構成図エディタの枠を超え更に進化するぞ！