はじめに

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

1. GUI-DACとは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

GUI(Graphical User Interface)とは、アイコンやボタンなどを用いて直感的にわかりやすく操作できるようにしたユーザーインターフェースのこと。 ↩
DaC(Diagram as Code)とは、コードを使用して図を作成および管理し、視覚的なドキュメントの作成、管理を改善する手法のこと。 ↩