プログラムで家系図を出力する | kingraph
![](https://kmgt-system.work/wp/wp-content/uploads/2019/06/sazae4.png)
![システムエンジニアランキング](https://blog.with2.net/img/banner/c/banner_1/br_c_9115_1.gif)
![にほんブログ村 IT技術ブログへ](https://b.blogmura.com/it/88_31.gif)
「もしもの時に使えるサービス」で家系図作成機能を考えてます。
うまくプログラムで出力できないかと探してたら、うってつけのものが有りました。
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
結果は以下の通り。
![](https://kmgt-system.work/wp/wp-content/uploads/2019/06/family.png)
注意点
kingraph コマンドは PowerShell コンソールで実行しないほうが良いです。
日本語を含んだ yaml ファイルを処理すると文字化けします。
含まないなら PowerShell コンソールでも何も考えず実行して構いません。
日本語を含んだものの場合、素直にコマンドプロンプト(cmd.exe)で実行する方が良いです。
PowerShell でもやれば出来るんだと思いますが、私は面倒なので途中で投げました。
それにしても、未だに文字コード関係で悩まないといけない環境は、どうにかならないものですかね。
文字コードは触れたくないですね。。。本当に。
家系図を yaml で書いてみる
yaml って聞いたことあったけど、実際には触ったことはありませんでした。
yaml とは何かは以下のサイト等を参考にしました。
JSON 的なデータを表現するものですね。
配列、ハッシュの書き方を覚えて、インデントに気を付ければ何となく分かりますね。
磯野家を yaml で表現してみます。
families:
- parents: [namihei, fune]
children: [sazae, katuo, wakame]
結果。
![](https://kmgt-system.work/wp/wp-content/uploads/2019/07/sazae1.png)
磯野家に新たな家族が増えます。
マスオさんとタラちゃんを追加します。
families:
- parents: [namihei, fune]
children: [sazae, katuo, wakame]
- parents: [masuo, sazae]
children: [tarao]
![](https://kmgt-system.work/wp/wp-content/uploads/2019/07/sazae2.png)
日本語にしましょう。オプションが色々つかます。
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: フグ田タラオ
上記をコマンドの入力にすると以下になります。
![](https://kmgt-system.work/wp/wp-content/uploads/2019/07/sazae3.png)
色々スタイルも変更できるようです。
これは面白いですねー。
![](https://kmgt-system.work/wp/wp-content/uploads/2019/06/sazae4.png)
コメントを投稿するにはログインが必要です。