立体的な表現で見やすいネットワーク図がブラウザ上で作成できる「Isoflow」

立体的な表現で見やすいネットワーク図がブラウザ上で作成できる「Isoflow」

  • GIGAZINE
  • 更新日:2021/07/22
No image

ネットワークの構成を視覚的に把握しやすいアイソメトリック図で表現でき、作成した図面を共有して相手に見せることができるオンラインサービスが「Isoflow」です。

Isoflow

https://isoflow.io/

まずはお試しですぐに図面の作成画面に行くことができます。「CREATE A DIAGRAM」をクリック。

No image

表示されたキャンバス上の好きな位置のマス目をクリックするとノード部品が設置されます。

No image

ノードが設置されると左側にダイアログが出現するので、Label入力欄で名前を付けます。ノードのアイコンを変更するため「Node icon」をクリック。

No image

アイコン一覧が表示されるので目的のアイコンの絵をクリックして変更します。

No image

さらにノードを増やした後、ノードアイコンをクリック。

No image

ノードのサブメニューが表示されるので「Connect」をクリック。

No image

ノードを接続するためのポインタをマウスで動かしてつなげたい相手のノード上に重ねてクリック。

No image

ノード同士がつながりました。

No image

これらの作業を繰り返し図面を作成していきます。

No image

動きのあるデモも可能、右上メニューにある「Present」ボタンをクリック。

No image

ノードをつなぐラインにマウスを合わせると……

No image

線から丸い点に変わりアニメーションで動きます。通信の方向などを動きのある絵で見せることが可能です。

No image

PNG画像などでの出力も可能です。右上のメニューから「Export」をクリック。

No image

図面の全体が入る大きさに自動的にトリミングされたPNG画像が保存されます。

No image

作成した図面のプロジェクトを保存するには「Save」をクリック。

No image

保存するためには、登録が必要です。「SIGN UP NOW」をクリック。

No image

必要項目を入力して「Register」をクリック。登録が完了すると自動的に保存されます。

No image

シェア機能を利用するには、右上のメニューから「Share」をクリック。

No image

公開用リンクを作成してみます。「Share this project publicly」をクリック。

No image

ブラウザ上でインタラクティブな状態で見せる場合は上部の「COPY」をクリック、画像だけで紹介する場合は下部の「COPY」をクリックします。

No image

コピーしたURLを別のブラウザにペーストしアクセスすると、プレゼンテーションの状態で図面を確認することができました。

No image

無料版では「設置できるノードは8個」「保存できるプロジェクトは3件」「画像出力した際にウォーターマークが挿入される」という制限がありますが、簡単なネットワーク図であれば十分使えるものとなっています。

No image

この記事をお届けした
グノシーの最新ニュース情報を、

でも最新ニュース情報をお届けしています。

外部リンク

  • このエントリーをはてなブックマークに追加