Graphviz: 今日のさえずり: 傘を取りに戻ってきた人を見かけて傘を取りに戻った

Graphviz

AT&T オープンソースのグラフ描画ソフトウェア。 DOT言語でグラフを記述する。

doxygen では、クラス間の関係のグラフの生成に利用している。

 rankdir="LR"

やはり Wiki のページ間のグラフが見られるようにしたいな。 emacs-wiki では Graphviz と連携してグラフを描かせてみているんだけど、NaneyOrgWiki のあるレンタルサーバではサーバサイドでやるのは辛いかな。

Java Web Start な Java アプリケーションと連携するなら簡単かも。ということで、以前からチェックしていた JGraph を使ってみる(といっても HelloWorld)。

が、実際には日本語フォントの設定になだれ込む事に。

MacBook Pro (Retina, 15-inch, Mid 2014) から MacBook Pro (13-inch, 2018, Four Thunderbolt 3 Ports) にリプレース。

今はデータをほぼ Google ドライブや Dropbox に置いているので、やるのは macOS の設定と Mac アプリケーションのインストール & 設定がほとんど。今は自分でビルドしていれているものもほとんど無いので楽だ。

Mac アプリケーションは先に入れた方が捗るもの (Google Chrome・Google 日本語入力・Dropbox・Google ドライブや Karabiner-Eements・Alfred など)があるので、入れたい順序のグラフを Graphviz で書きながら進めていった。

プリンタと Chrome 拡張機能の個別設定以外は概ね移行完了。数日に分けてやる感じかなと思っていたけれど、夕方に仕事の気分切り替え的に始めたら一気にやってしまった。

あ Emacs まだ入れてないなー。

 $ cd ~/local
 $ git clone https://github.com/tpope/rumember.git
 $ GEM_HOME=$HOME/local/rumember gem install launchy

~/.rtm.yml は前のものをコピー。

昨日 HTML ページ中の mermaid 定義を自動的にクライアント側で SVG 変換し表示させるようにしたらいい感じなので、勢いで Graphviz の DOT 言語で書かれたグラフ定義も Viz.js を使って SVG 変換できるようにしてみた。

mermaid では HTML ページ中の mermaid クラスをもつ要素を SVG 要素に変換するコードが入っているのだけれど Viz.js にはそれは無さそう。なので mermaid の実装を参考に dot クラスの要素を変換するようにしてみた。

 <div class="dot">
 digraph {
   graph [rankdir = LR];
   a -> b;
   a -> c;
 }
 </div>

と書いたら以下のように変換される。

digraph { graph [rankdir = LR]; a -> b; a -> c; }

mermaid よりずっとメジャーな Graphviz (互換)が使えるとさらに捗って嬉しいぞ。

Viz.js は mermaid よりさらに大きいので、さすがに全ページで読み込ませるのはまずい。なので Viz.js と mermaid についてそれぞれの定義があった場合のみ動的ロードするようにしておいた。

で、まずます動くようになったのでちょっとしたノートを置いておくスペース nNote だけでなく nDiki でも動くように設定しちゃった。Viz.js や mermaid が使えなくなった時のことを考えて記事の寿命が長い nDiki の方では多用はしないつもりではある。

Qiita:Team で PlantUML を使ってダイアグラムを書くのにまず手元で編集したいと思い、 Visual Studio Code (VS Code) に PlantUML 拡張を入れた。

 ext install plantuml

で拡張をインストール。

Mac (macOS) では Graphviz (それに必要な Java ランタイム)も入れておく。

 brew cask install java
 brew install graphviz

これで Alt-D で PlantUML プレビューができるようになる。

08:25 本線合流 #photography RICOH GR III #GR #GRIII #GR3 https://t.co/eyxfSErlmb
13:05 昼休みに渋谷駅近くのクリニックでインフルエンザ予防接種を受けてきた。昨日の健康診断に続き2日連続の注射だ。
19:27 「インフルエンザワクチンってこんなに量あったっけ?」ってぐらいの量をチューっとされた。
19:43 傘を取りに戻ってきた人を見かけて傘を取りに戻った。
21:24 Obsidian Publish サイトで Viz.js を使えるようにしたのだけれど、 Viz.js は v2.1.2 で開発が止まっているみたい。別の JavaScript 版 Graphviz にそのうち変えよう。