こんにちは結構太った山根です。

社内歩いてると「太りました？」って言われます。ラーメンは白米のおかずです。

「yaml」ではなく「yUML」というのをご存知でしょうか？

私は初めて知りました。テキストで書いて出力すると、図1のような図が出力されます。

(幅どうやって変更するんだろう)図1：初めてのyuml

このyUMLでは、

クラス図、ユースケース図、状態遷移図、シーケンス図等が描画できます。

この環境と拡張機能で使えます！

使用する環境：VScode

使用する拡張機能：yUML(図2)

図2：拡張機能

やったこと

「yumltest.yuml」というファイルを作り、図３を記述

図3：作成したyUML

1.「type」で図のタイプ(クラス図、状態遷移図、シーケンス図等)を選択します。

(今回はシーケンス図)

2.「generate」で「.svgファイルを生成するかどうか」

3.フロー図を描いていく

4.作成したら、VScodeの右上にあるボタンを押す(図4参照)

図4：右上にあるボタン

5.図が出てくる！(図5参照)「yumltest.yuml」と同じディレクトリに「yumltest.svg」(図1)が生成されている！

図5：生成された図

図３に戻りますが、「>」で→に、「.>」で左に行きます。

[pc]2.クロームのhome画面を表示.>[server]

[pc]2.クロームのhome画面を表示>[server]

図6：変更した図

図５と図６を比べて、「—->」が変わっているのがわかりました。

yUMLのwikiです(あんまり見てなかった…)

https://github.com/jaime-olivares/yuml-diagram/wiki

次回はwikiを見ながら別の図や、もう少し深堀してみたいと思います。