リノシス開発者ブログ

株式会社リノシスのエンジニアブログです。

Diagram Generation Tool

f:id:hiromichinomata:20200812171039p:plain:w200

概要

Diagram.codesってのは凄く便利なオンラインツールで本当に小数行のコードだけで様々な図を作ることができ、作り上げた図もエクスポートできます~!すごくない?!:o 

まあ、何でこんな地味なことにあんなにうれしいかと思われる方がいらっしゃると思いますが、一般のソフトウェア開発プロジェクトではプロジェクト開発が終わった後メンテの為、ドキュメンテーションを書く必要がありますね。

そうなったら、アプリの流れをフロチャートで叙したりすることなどがあります。普段は図を作る時にはPowerPointなどを使用しますが、えらく時間が掛かってしまいますし、何度も形をドラグ&ドロップをするのもつまらなくなるし、形をアラインするのもめんどくさい。要するに楽しくないですね~!。

そんな時には上記のツールを使ったことで図を作ることが楽しくなり図を作る時間も短くなります。

コードサンプル

下記は自分が作成したフローチャート図のコードサンプルとフローチャートです。※プルリクのワークフローを示てます。

コード

"start task"
"create pull request with [WIP] tag"
"push commit"
IF "task is finished"
  "assign reviewer"
  IF "review okay"
    "check for merge conflicts"
    IF "no merge conflicts"
      "merge to develop branch"
    ELSE
      "resolve merge conflicts"
      "check for merge conflicts"
    END IF
  ELSE 
    "address change request"
    "push commit"
  END IF
ELSE
  "push commit"
END IF

フローチャート

f:id:hiromichinomata:20200812170804p:plain

利点

図を作るのがより簡単により早くなる。

欠点

ちゃんとしたドキュメンテーションはウエブサイト上に記載されてないので、例文で使われたコードを再現することしかほかやるのはしんどいですね。やり方わからないから。

個人的に困ったのはフローチャート上のリカーシブの作り方。色々弄ってからやり方をなんとか掴めました。 コードで作った図は弄れない。シンプルなワクフローであれば、手しごと図を弄ることが不要かもしれませんガ、今回の場合、幾つかリカーシブを使って、図が汚くなったので、手仕事できれいにしたかったけど、できなかった。

候補

習ったコツ

リカーシブを利用したい際、戻りたい箇所(事前定義した箇所)を参照すればできる。 例えば、今回の場合:

IF "task is finished"
    "assign review"
ELSE
 "push commit"

上記の「push commit」は事前定義した「push commit」を参照してます。

結論

結論としてはより便利なツールだと思いますが、ドキュメンテーションを書いてほしいなと。。。今のところ、例文で示されたもの以外なにができるかのはわかりにくいですね。

宣伝

Renosysはエンジニアを募集中です

Written by seun