isoflow を試してみました

isofow とは

ネットワークの構成図を斜め上のパースで立体的にデザインすることに特化したユニークなWebアプリのオンラインサービスです。 はじめはオンラインサービスのみの提供だったと思いますが、MITライセンスのコミュニティエディションが公開されていたので試してみました。

実行環境

Windows10のWSL2に環境を作成しました。 使用したOSはUbuntu24.04です。

cat /etc/os-release
PRETTY_NAME="Ubuntu 24.04.1 LTS"
NAME="Ubuntu"
VERSION_ID="24.04"
VERSION="24.04.1 LTS (Noble Numbat)"
VERSION_CODENAME=noble
ID=ubuntu
ID_LIKE=debian
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
UBUNTU_CODENAME=noble
LOGO=ubuntu-logo

isoflow 環境構築の流れ

isoflow Community Edition の環境構築をするにはいくつか方法があるようです。

1. Reactコンポーネントをインポートする
   → node.jsの知識がないので今回はスキップしました。
2. Githubに公開されているDevelopment Mode をクローンする
   → 今回はこの手順で行います。
3. Dockerイメージを利用する
   → 提供されているイメージはArm向けです。おそらく”Raspberry Pi”等を対象にしていると思われます。少し手間がかかる予感がしたのでまだ試していません。

今回はGithubから”Development Mode”をクローンして実行する手順を紹介します。

node.js と npm のインストール

isoflow Community Edition を実行するために”node.js”が必要です。また、依存パッケージをインストールするために”npm” が必要となります。

”apt”コマンドでインストールします。

sudo apt install nodejs npm

githubからisoflowのシステムをclone

git clone https://github.com/markmanx/isoflow

cloneしたディレクトリに移動

cd isoflow

依存パッケージのインストール

npmのインストールコマンドで依存パッケージをインストールします。

npm i

isofow の実行

以下のコマンドで実行します。

npm run start

コンソールにURLが表示されるのでホストのWebブラウザからアクセスします。「On Your Network」の行に表示されているURLをWindowsのブラウザに入力しました。

isoflowを実行したコンソールの表示例

ブラウザからアクセスした例

まとめ

試しに自宅のネットワーク構成図を描いてみました
PNG画像ファイルにエクスポートするとキャンバス全体が含まれるので不要な部分をトリミングしています。

使用した所感としては、たくさんの情報を詰め込んだり複雑な図を表現するのではなく、できるだけシンプルに概要が伝わるようなデザインをすると効果的なツールだと思いました。 目を引くデザインが作成できるので資料冒頭の概念図やプレゼン資料に活用できると思います。