Interactive shell for blockdiag 用のキーワード補完拡張 for google chrome

最近

他人が作った仕様とかを理解したり整理したりするのに、UML や状態遷移図やらと図を書くことが多くなった訳で、これまでは Excel、次に Cacoo を使って作っていました。でも、やはりしんどいんですね。。ちょっと仕様変更があった時に、図の調整がしんどくて結局初版以降は更新されないままになってしまったり。。
加えて、 Cacoo なんかは特に個人的に使っているので、メンテ用に共有する事もできないわけです。(もちろん Cacoo には共有機能が付いているので皆が使ってくれれば問題ないですが、使い込むと有料なので強制は。。)

そこで

出会った、というか同僚に紹介されたのが blockdiag シリーズでした。blockdiag シリーズに関しては公式サイトや作者様のスライドがたくさん上がっているので割愛しますが、とにかく素晴らしい。最初は物足りないかなと思いましたが、私程度が書く図では全く問題がなく途中の挿入も楽々できるので図の修正も苦労もだいぶ軽減されそうです。Windows 環境へのインストールも Sphinx とのワンクリックインストーラーが作られていたので、ものの数分で使い始める事ができました。

もっと早く書きたい

まだ初心者という事もあって Interactive shell for blockdiag で図をライブ編集して作り、それを最終的にコンパイルして画像にしているのですが、まだまだ不慣れなのでキーワードも覚えきれていませんし、何より打つのが遅い。。visual studio の intellisence に慣らされたゆとりのせいで、せっかくの blockdiag の生産性が十分に発揮できません。

で作りました。

最初はサクラエディタ用のキーワードファイルを作ったのですが、前述の通り Interactive shell を使うのでサクラエディタからいちいち貼るのは面倒です。

なので、google chrome extension にして、そこで補完ができるようにしました。

補完用のスクリプト

こちらは、通常サジェストに使用されるスクリプトをそのまま使わせてもらいました。
Content assist for textarea - github

chrome extension 用のファイル

上記のスクリプトと、以下のファイルを揃えれば大丈夫です。ほとんどコード書いてませんが。。

こんな感じ

はい、スタイルも全部サジェスト用のライブラリのを使わせてもらってますので、まんまです。

課題

  • サジェスト用なので一文字目を入力した瞬間に出てしまう。Ctrl+space 等で出るようにする。
  • (ついでにインデントも付けて欲しい)
  • (ついでにフォーマットもして欲しい)

まあ、実際問題打ち間違い減らしてキーワードをちゃんと覚えればいらない拡張機能なんですよね。目標は早く使わなくて良いようになるかな。