プログラムで家系図を出力する | kingraph

「もしもの時に使えるサービス」で家系図作成機能を考えてます。
うまくプログラムで出力できないかと探してたら、うってつけのものが有りました。

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 的なデータを表現するものですね。
配列、ハッシュの書き方を覚えて、インデントに気を付ければ何となく分かりますね。

magazine.rubyist.net

プログラマーのための YAML 入門 (初級編)

https://magazine.rubyist.net/articles/0009/0009-YAML.html

Qiita

YAML 基本記法まとめ - Qiita

https://qiita.com/tfrcm/items/5f8e4c5795ce41b214d1

# 概要最近YAMLファイルで書かれている設定ファイルを目にする機会が増えた為、最低限の記法だけまとめてみた。# YAMLの基本## YAMLの概要- 構造化されたデータの表現記法。* フレームワーク・ツールの設定フ...

磯野家を 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: フグ田タラオ

上記をコマンドの入力にすると以下になります。