Help us understand the problem. What is going on with this article?

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 さん

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away