[ VSCode-UIFlow ] uiflowのvscodeプラグインを作ってみました

4387 ワード
TypeScript d3.js VSCode webpack uiflow d3.js テキストリンク

はじめに

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

使い方

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をクリックするとプレビューが開きます。

SVG・PNGのエクスポート

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

JSON・DOTのエクスポート

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

オートコンプリート

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

ページ名のリネーム

[ ]の中や ==>の後のページ名は簡単にリネームできます。
ページ名の上で右クリックしてRename Symbolするだけです。

Before

After

参照元のコード検索

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

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

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

ToDo

  • ~~プレビューとソースコードとの連携機能を実装する。~~v0.8.0で対応しました。
  • vscode-uiflow独自の機能の説明を記述する。

謝辞

いろいろと参考にさせていただいております。この場を借りて御礼申し上げます。
uiflow,guiflowの作者 @hirokidaichi さん
SVG Viewerの作者 @shoooo さん

3年ぶりリリース秘話公開しました。