Help us understand the problem. What is going on with this article?

esa.ioで簡単に図を書きたい(UML記法)

More than 3 years have passed since last update.

導入

以前書いた記事でも少し触れましたが、先日、esa.ioUML記法に対応 (PlantUML)したようです。
これにより、簡単にUMLを書くことができるようになりました。

実際に利用してみると正しいUMLを書けているかが気になり躊躇してしまう部分もあったのですが、UMLの形式にはそこまでこだわらず、意思疎通を図るために図が書けるようになったとの認識で使っていこうと思っています。

1.png

```uml
node esa.io

:私: -> esa.io : 使う
:私: <- esa.io : 理解

esa.io <-up. (図) : +
esa.io <-up. (資料)

esa.io <-up. (Markdown - 構造化)
(Markdown - 構造化) <-up. (画像)
(Markdown - 構造化) <-up. (文章)

esa.io -> :誰か: : 意思疎通
```

UMLの種類と書き方

UMLに関しては、UML入門 - IT専科- UML超入門が大変参考になります。
UMLの種類使い方を上記サイトで見て、書き方PlantUMLで調べるのがよさそうです。

書き方ではPlantUML Cheat Sheet - Qiitaもわかりやすいです。
esa.ioではアクティビティ図に書きやすくなった表記を利用できるため、そちらは公式サイトを参考にした方がいいでしょう。

書き方

ここでは、

(にある要素)を利用して、自動販売機にかかわる行動/処理を図にしてみようと思います。

ユースケース図

ユースケース図は、以下が正しいUMLとなるようです。

2.png

```uml
left to right direction
:利用者:

rectangle 自動販売機 {
    :利用者: -- (商品を購入する)
}
```

引用: 良いユースケースを書くための発想法

ですが、各要素の使い方を無視し、表現したいことを重視して図を書くこともできます。

3.png

```uml
left to right direction
note top of 私 : **9pm** お風呂上がり
:私:

rectangle 自動販売機 {
    :私: .> (コーヒー) : 寝る前にコーヒーは……
    :私: .> (紅茶) : 甘くない方がいいな
    :私: .> (お茶) : もう少しスカッとしたい
    :私: -> (コーラゼロ) : これに決めた!
}
```

配置図 (Deployment Diagram) の要素を使って書いてもいいかもしれません。

6.png

```uml
frame 自動販売機の飲み物 {
    usecase コーヒー [
        **コーヒー**
        ---
        寝る前にコーヒーは……
    ]
    usecase 紅茶 [
        **紅茶**
        ---
        甘くない方がいいな
    ]
    usecase お茶 [
        **お茶**
        ---
        もう少しスカッとしたい
    ]
    node コーラゼロ [
        **コーラゼロ**
        ---
        お……?!
    ]
}

:私: -> コーラゼロ : これに決めた!
```

シーケンス図

時間の流れがわかりやすい図です。

4.png

```uml
私 -> Aさん : お金を渡す
activate Aさん

Aさん -> 自動販売機 : お茶を買う
activate 自動販売機

Aさん <-- 自動販売機 : お茶を出す
deactivate 自動販売機

私 x<-- Aさん : お茶を渡す
Aさん -> Aさん : お茶を飲む
deactivate Aさん

...5 分後...

私 -> Aさん : お金を渡す
activate Aさん

Aさん -> 自動販売機 : コーラを買う
activate 自動販売機

Aさん <-- 自動販売機 : コーラを出す
deactivate 自動販売機

私 <-- Aさん : コーラを渡す
activate 私

私 -> 私 : コーラを飲む
deactivate 私

私 <-- Aさん : お茶のお金を返す
deactivate Aさん
```

alt / loop / group を利用すると、より汎用的でわかりやすくすることができます。

アクティビティ図

一連の手続きを表現することができます。

8.png

```uml
:私がAさんにお金を渡す;
:Aさんが自動販売機で商品を購入する;
while (コーラゼロ?) is (違う)
    :Aさんが商品を飲みきる;
    -[#black,dotted]-> 5分後;
    :私がAさんにお金を渡す;
    :商品を購入する;
endwhile (あってる)
    :😊;
    :Aさんが飲んだ分のお金を私に返す;
```

おわりに

今までは、小さな図をSkitchOmniGraggleで書くのも、書いたデータを共有して管理するのも手間となっていました。
esa.io x PlantUMLでは、UMLないし図の共有/管理がしやすく、編集も簡単にでき、バージョン管理もされてしまいます。
今後はUMLについても学びながら、積極的に利用していきたいと思っています。

usagizmo
Next.js / PixiJS / Framer Motion / TypeScript / SCSS / Mac / Ubuntu / HHKB / ExpertMouse / Pixel 3a XL / EarFun / バランスボール
https://usagizmo.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした