Edited at

uiflowのvscodeプラグインを作ってみました


はじめに

もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作ったに感銘を受けて、Visual Studio Codeのプラグインを作ってみました。 :smile:

Visual Studio Marketplaceにて公開しています。GitHubで開発しています。


スクリーンショット

vscode-uiflowのスクリーンショット


使い方

vscodeを立ち上げて拡張機能からvscode-uiflowを探して、インストールしてください。インストール後はvscodeを再起動して、右下の言語選択からuiflowを選択します。

エディタタブの右側にあるOpen Preview to The Sideをクリックします。

以下のようなソースを打つと右側にダイアグラムのプレビューが表示されます。


サンプルソース

[Home]

welcome
news
--
click signin
==> SignIn

[SignIn]
--
submit
==> Dashboard

[Dashboard]
inbox
--
click signout
==> Home



主な機能


プレビュー

エディタタブの右側のOpen Preview to the Sideをクリックするとプレビューが開きます。

preview.png


SVG・PNGのエクスポート

ダイアグラムをSVGまたはPNGにエクスポートできます。

※ v0.1.0からPNGエクスポートを強化し、いままで動かなかった環境でも動作するようになりました。


JSON・DOTのエクスポート

JSONまたはDOTをエクスポートできます。


オートコンプリート

==>の後ろはCtrl+Spaceでオートコンプリートできます。

autocompletion.png


ページ名のリネーム

[ ]の中や ==>の後のページ名は簡単にリネームできます。

ページ名の上で右クリックしてRename Symbolするだけです。


Before

before-rename2.png


After

after-rename.png


参照元のコード検索

[ページ名]の上で右クリックし、Find All Referencesをクリックすると参照元を検索でき、該当するソースコードが表示されます。

find-all-references.png


ソースコードの折りたたみ

ページごとにソースコードを折りたためます。

folding-feature.png


ToDo



  • プレビューとソースコードとの連携機能を実装する。v0.8.0で対応しました。

  • vscode-uiflow独自の機能の説明を記述する。


謝辞

いろいろと参考にさせていただいております。この場を借りて御礼申し上げます。

uiflow,guiflowの作者 @hirokidaichi さん

SVG Viewerの作者 @shoooo さん