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

にほんブログ村 IT技術ブログへ

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

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

結果は以下の通り。

family.png

注意点

kingraph コマンドは PowerShell コンソールで実行しないほうが良いです。
日本語を含んだ yaml ファイルを処理すると文字化けします。
含まないなら PowerShell コンソールでも何も考えず実行して構いません。

日本語を含んだものの場合、素直にコマンドプロンプト(cmd.exe)で実行する方が良いです。
PowerShell でもやれば出来るんだと思いますが、私は面倒なので途中で投げました。

それにしても、未だに文字コード関係で悩まないといけない環境は、どうにかならないものですかね。
文字コードは触れたくないですね。。。本当に。

家系図を yaml で書いてみる

yaml って聞いたことあったけど、実際には触ったことはありませんでした。
yaml とは何かは以下のサイト等を参考にしました。
JSON 的なデータを表現するものですね。
配列、ハッシュの書き方を覚えて、インデントに気を付ければ何となく分かりますね。

磯野家を yaml で表現してみます。

families:
  - parents: [namihei, fune]
    children: [sazae, katuo, wakame]

結果。

sazae1.png

磯野家に新たな家族が増えます。
マスオさんとタラちゃんを追加します。

families:
  - parents: [namihei, fune]
    children: [sazae, katuo, wakame]
  - parents: [masuo, sazae]
    children: [tarao]
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: フグ田タラオ

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

色々スタイルも変更できるようです。
これは面白いですねー。

sazae4.png

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

wpmaster
  • wpmaster
  • フリーランスシステムエンジニアの鎌形です。
    鎌形システムエンジニアリングとして都内で活動中です。

%d人のブロガーが「いいね」をつけました。