はじめに
以下のような図を見たことはありませんか？
ITサービスやITソリューションの説明ページにおいて、システム構成やワークフローなどを描画するのに使われています。
そうした図をアイソメトリック図（等角投影図）と言い、従来はデザイナーがIllustratorやCADツールを使って描いていましたが、それを無料で非デザイナーでも簡単に作成できるツールがFossFLOWです。
FossFLOWはブラウザ上で動作するPWA（Progressive Web Apps）であり、ReactとIsoflowライブラリを使って開発されています。
ライセンスはUnlicenseライセンスとなっており、企業利用のハードルも低そうです。
使い方
Github Pagesにもデプロイすることが可能であり、以下のリンクから気軽に試すことができます。
FossFLOW
-
アイソメトリック図の作成
- ノードの追加
- 右上のメニューにある「+」ボタンを押すと、左側に様々な形のコンポーネントライブラリが表示されます。ライブラリからコンポーネントをキャンバスにドラッグ・アンド・ドロップして図に追加することができます。
- または、グリッド上で右クリックし、「Add Note」をクリックすることで、新規ノードを作成することができ、その後で形や色などを左側のメニュー欄から変更することもできます。
- ノード同士を接続する：右上のメニューにある右矢印ボタンを押し、ノード間をドラッグ・アンド・ドロップすると、コネクタで接続できます。
- カスタマイズ： ノードやコネクタをクリックすることでそれらのプロパティ確認でき、ノードの名前やコネクタの色、ノードの説明などを編集できます。
- ナビゲート： 左下側の拡大率設定から、ズーム具合を調節できます。
- ノードの追加
-
作成した図の保存
- 図は、5 秒ごとに自動的にブラウザのストレージに保存されていますが、ブラウザのセッションが保っている間しか保存されないため、後日も利用したい場合は「Export File」からJSONファイルとしてエクスポートしましょう。
ローカル環境でのインストール
Node.jsのパッケージマネージャであるnpmがインストールされている環境であれば、GithubからFossFLOWのプロジェクトをクローンしてきて、ローカルでFossFLOWサーバーを立ち上げることができます。
インストール手順
# Clone the repository
git clone https://github.com/stan-smith/FossFLOW
cd FossFLOW
# Make sure you have npm installed
# Install dependencies
npm install
# Start development server
npm start
デフォルトのコンフィグでは3000番ポートで立ち上がっていますので、以下のリンクをブラウザで開くことでローカルのFossFLOWを操作できます。
http://localhost:3000
おわりに
以上、アイソメトリック図作成ツールのFossFLOWの紹介でした。
まだ日本語で紹介されている記事が少ないですが、これからFossFLOWで作成された図をWebで目にする機会も増えるかもしれません。
Stan-smith氏が趣味で開発されているOSSのため、もし使って便利だなと思ったら以下のリンクからの寄付やGithubへのコントリビュートをしてみましょう。
https://coff.ee/stan.smith
Discussion