2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

VSCodeでシーケンス図を作成する方法

Posted at

VScodeの拡張機能を使ってシーケンス図を作成する方法

前提: javaがインストールされていること
  1. VScodeを開く
  2. Extensionsから「PlantUML」を検索する
  3. インストールする(公式 jebbs.plantUML)
  4. VScodeで「sample.puml」ファイル作成
  5. 以下をコピーして貼り付ける
@startuml
Alice -> Bob: Hello
Bob --> Alice: Hi
@enduml

6 .ファイルを右クリックして「Preview Current Diagram」を選択
7. 図画表示されれば成功

※Preview Current Diagramが表示されない場合、以下を試してみる
ctrl + shift + P でコマンドパレット検索
「PlantUML Preview」を入力
PlantUML: Preview Current Diagramを選択

ユーザーのログイン機能のシーケンス図 例

image.png

@startuml
actor User
participant Screen
participant Server
participant DB

User -> Screen: Enter username/password
Screen -> Server: Send login request
Server -> DB: Authenticate
DB --> Server: Result
Server --> Screen: Return result
Screen --> User: Display result

@enduml
2
2
0

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
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?