鎌形 稔 6月/ 30/ 2019 | 0
「もしもの時に使えるサービス」で家系図作成機能を考えてます。
うまくプログラムで出力できないかと探してたら、うってつけのものが有りました。
kingraph とは？
JavaScriptとGraphvizを使って家系図を作成するNode.jsパッケージです。
リポジトリはこちら。
インストール
コンソールより以下を実行。
npm install -g rstacruz/kingraph
# or
yarn global add rstacruz/kingraph
使い方
インストールすると「kingraph」コマンドが使えるようになります。
家系図を以下のように yaml 形式で作り、kingraph コマンドの入力に指定すると、家系図を出力します。
families:
- parents: [Marge, Homer]
children: [Bart, Lisa, Maggie]
- parents: [Lisa, Milhouse]
children: [Zia]
people:
Marge:
fullname: Marjorie Bouvier Simpson
コンソールから以下のように実行。
kingraph family.yml > family.svg
なお、デフォルトは SVG 形式だが、以下のようにすると PNG 形式でも出力可能。
kingraph family.yml -F png > family.png
結果は以下の通り。
注意点
kingraph コマンドは PowerShell コンソールで実行しないほうが良いです。
日本語を含んだ yaml ファイルを処理すると文字化けします。
含まないなら PowerShell コンソールでも何も考えず実行して構いません。
日本語を含んだものの場合、素直にコマンドプロンプト（cmd.exe）で実行する方が良いです。
PowerShell でもやれば出来るんだと思いますが、私は面倒なので途中で投げました。
それにしても、未だに文字コード関係で悩まないといけない環境は、どうにかならないものですかね。
文字コードは触れたくないですね。。。本当に。
家系図を yaml で書いてみる
yaml って聞いたことあったけど、実際には触ったことはありませんでした。
yaml とは何かは以下のサイト等を参考にしました。
JSON 的なデータを表現するものですね。
配列、ハッシュの書き方を覚えて、インデントに気を付ければ何となく分かりますね。
[blogcard url=”https://magazine.rubyist.net/articles/0009/0009-YAML.html”]
[blogcard url=”https://qiita.com/tfrcm/items/5f8e4c5795ce41b214d1″]
磯野家を yaml で表現してみます。
families:
- parents: [namihei, fune]
children: [sazae, katuo, wakame]
結果。
磯野家に新たな家族が増えます。
マスオさんとタラちゃんを追加します。
families:
- parents: [namihei, fune]
children: [sazae, katuo, wakame]
- parents: [masuo, sazae]
children: [tarao]
日本語にしましょう。オプションが色々つかます。
families とは別のハッシュ people を定義します。
families:
- parents: [namihei, fune]
children: [sazae, katuo, wakame]
- parents: [masuo, sazae]
children: [tarao]
people:
namihei:
name: 波平
fullname: 磯野波平
fune:
name: フネ
fullname: 磯野フネ
sazae:
name: サザエ
fullname: フグ田サザエ
katuo:
name: カツオ
fullname: 磯野カツオ
wakame:
name: ワカメ
fullname: 磯野ワカメ
masuo:
name: マスオ
fullname: フグ田マスオ
tarao:
name: タラオ
fullname: フグ田タラオ
上記をコマンドの入力にすると以下になります。
色々スタイルも変更できるようです。
これは面白いですねー。