FrontPage

目次

設計書作成

シーケンス図

Visual Studio Codeを開きます。 左側のメニューに拡張機能があるので PlantUMLと入力してください
検索すると一番上に出てくると思うのでクリックしてインストールします。 インストールが終えたら
左上のメニューにあるファイルから新規作成を選択してください。 Untitled-1が作成されるのでCTRL + SHIFT + S を押します。
任意のファイル名を入力し、ファイルの種類をPlantUMLに選択して保存します。 .wsdという形式のファイルができればOKです。 下記がUMLのサンプルになります。

@startuml Update
mainframe ユーザー編集
actor User
participant "ユーザー一覧画面" as View
participant "編集モーダル" as Modal
participant "エンコード" as encode
participant "更新処理" as Update
database "データベース" as DB
alt 権限あり
User -> View : 編集したい
activate View
else 権限なし
User <-- View : エラー
end
View -> Modal : 一覧から選択する
activate Modal
Modal <-- DB : ユーザーID,変更前の名前,メールアドレス,パスワード
activate DB
Modal -> Update : 入力(名前,メールアドレス)
activate Update
Modal -> encode : 入力(パスワード)
deactivate Modal
activate encode
encode -> Update : 暗号化したパスワード
deactivate encode
Update -> DB :更新
deactivate Update
View <-- DB : 更新したユーザー情報を反映
deactivate DB
deactivate View
@enduml

ALT+Dを押すとプレビューに図が表示されます。
図を画像ファイルとして保存したい場合は ファイル内で右クリックすると ファイル内のダイアグラムをエクスポートとあるのでクリックします。
pngを選択するとのファイルを作成した場所にフォルダが作成されているのでフォルダ内に画像ファイルがあります。

環境構築

Eclipse

MySQL

Spring

ログイン


トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS