31
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

WEB上でシーケンス図を描けるツールUML Sequence Diagram Online Toolを使おう!

Last updated at Posted at 2022-01-03

シーケンス図をWeb上で簡単に描けるツールの紹介です。

画面

左ペインに入力をすると、右ペインにシーケンス図が描画されます。

sequence_intro.png

入力補完も効いていて便利です。

snap_09_interporation.PNG

基本的な入力の仕方

タイトル

titleに続けてタイトルを入力します。

title 商品購入シーケンス

sequence_title.png

メッセージ

メッセージを入力するには、オブジェクトとオブジェクトの間に-><--の記号を入力し、そのあとにコロン:に続けてメッセージを入力します。

フロント->バックエンド:ユーザ情報の問い合わせ
フロント<--バックエンド:ユーザ情報

と入力すると、このようなシーケンス図が作成されます。

sequence_message.png

オブジェクトのアイコン

オブジェクトのアイコンを変えるにはオブジェクトの種類を指定します。

actor ユーザ
participant アプリ
database 顧客DB

sequence_actor.png

opt

opt ログイン済み
アプリ->顧客DB:メッセージ
end

sequence_opt.png

alt

alt 6時から10時
ユーザ<--アプリ:おはよう
else 10時から18時
ユーザ<--アプリ:こんにちは
else 18時から翌6時
ユーザ<--アプリ:こんばんは
end

sequence_alt.png

loop

loop 1, 商品数
A->B:消費税の計算
A<--B:消費税込み価格
end

sequence_loop.png

その他

他にもいろいろな記述方法があります。詳しくはHelpを参照ください。

保存、ロード

左メニューのsave source textを選択すると、左ペインに入力した内容がテキストファイルとして保存されます。編集を再開したい場合は、open source textをクリックし、ファイルを選択します。

snap_text_save.PNG

画像として保存

左メニューのexport diagramで、作成したシーケンス図を図として保存できます。

sequence_save.png

31
16
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
31
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?