Skip to content

Instantly share code, notes, and snippets.

@sahara-ooga
Last active January 23, 2020 06:02
Show Gist options
  • Save sahara-ooga/fdc130572298e8d6f595454f4d20cf69 to your computer and use it in GitHub Desktop.
Save sahara-ooga/fdc130572298e8d6f595454f4d20cf69 to your computer and use it in GitHub Desktop.
plantumlをVS Codeで使う

やってみる

code:

@startuml
alice->bob:hello
@enduml

output:

@startuml
alice->bob:hello
@enduml

plantuml_vs_code-1

セキュリティを犠牲に�すれば、markdownの中にplantumlを�入れて図を表示できる。

@startuml

class ユーザー {
  ユーザー名
  パスワード
  +ログイン()
}

class グループ {
  グループ名
}

class メンバー {
  役割
}

ユーザー .. メンバー
グループ .. メンバー

@enduml

ITエンジニアが組織図を作ろうとするとこうなる PlantUML - Qiita

@startuml 組織図
object 代表

package グループA {
  object A#ccffe5 {
    #リーダーA
  }
  object B#ccffe5 {
    #リーダーB
  }
  object TeamA {
    +メンバー
    +メンバー
  }
  object TeamB {
    +メンバー
    +メンバー
    +メンバー
  }
}

package グループB {
  object C#ccffe5 {
    #リーダーC
  }
  object D#ccffe5 {
    #リーダーD
  }
  object TeamC1 {
    +メンバー
    +メンバー
  }
  object TeamC2 {
    +メンバー
    -メンバー
  }
}

代表 --> A部
代表 --> B部
代表 --> C部
代表 --> DA--> TeamA
B--> TeamB
C--> TeamC1
C--> TeamC2

A-[hidden]r- BC-[hidden]r- D@enduml

画像�URLの生成

  • コマンドパレットを出す (Command + Shift + P) command pallet

  • 「plant」を入力して、[カーソル位置のダイアグラムをURLに変換]を選択

��select command

  • 画像の拡張子を選ぶ

select extension

  • [出力]にmarkdownが表示される

markdown link

Reference

PlantUML - Visual Studio Marketplace

PlantUMLで気軽にUML作成 - Qiita

PlantUML Cheat Sheet - Qiita

�VS code関連

Visual Studio Codeでmarkdownを書くときに便利な組み合わせ見つけたから晒す - Qiita

Visual Studio Codeチートシート - Qiita

Visual Studio Codeでmarkdownを書くときに便利な組み合わせ見つけたから晒す - Qiita

やってみる

code:

@startuml
alice->bob:hello
@enduml

output:

@startuml
alice->bob:hello
@enduml

セキュリティを犠牲に�すれば、markdownの中にplantumlを�入れて図を表示できる。

Plantumlの構成要素

@startuml

package package
folder folder
artifact artifact
node node
frame frame
cloud cloud
database database
storage storage

@enduml
@startuml

title Title

( )
note left : Note

[  ]
note right : Note

' single-line comment

/'
  block comment
'/

@enduml
@startuml

actor actor
:Actor alias:

agent agent
usecase usecase
component component
boundary boundary
control control
entity entity
interface interface

@enduml

�ウィジェット

@startuml
salt

{
  Just plain text
  [This is my button]
  ()  Unchecked radio
  (X) Checked radio
  []  Unchecked box
  [X] Checked box
  "Enter text here   "
  ^This is a droplist^
}

@enduml

ツリー図

@startuml
salt

{
  {T
   + World
   ++ America
   +++ Canada
   +++ USA
   ++++ New York
   ++++ Boston
   +++ Mexico
   ++ Europe
   +++ Italy
   +++ Germany
   ++++ Berlin
   ++ Africa
  }
}

@enduml

コンポーネントの関連図

@startuml

actor "User"

node "Application" {
  [Client]
}

node "API" {
  [Resource]
}

node "Authentication" {
  [AuthN]
}

node "Authorization" {
  [AuthZ]
}


[User].[Client]
[User]..[AuthN]
[User]..[AuthZ]

[AuthN]..[AuthZ]

[Client]..[AuthN]
[Client]..[AuthZ]
[Client].[Resource]

@enduml
@startuml

cloud "Cloud" {
  package "Package" {
    [register]
    frame "frame" {
      [backup]
    }
  }
}

node "Node" {
  database "Database" {
    [store]
  }
  folder "Folder" {
    [File]
  }
}

[register] .. [store] : HTTP
[backup] .. [File] : FTP

@enduml

オブジェクト図

@startuml

object User
object Group
object Member

object Event
object Ticket

User . Group
User o.. Member
Group o.. Member

Group o. Event
Event o.. Ticket
Member . Ticket

@enduml

クラス図

@startuml

class ユーザー {
  ユーザー名
  パスワード
  +ログイン()
}

class グループ {
  グループ名
}

class メンバー {
  役割
}

ユーザー .. メンバー
グループ .. メンバー

@enduml

組織図

ITエンジニアが組織図を作ろうとするとこうなる PlantUML - Qiita

@startuml 組織図
object 代表

package グループA {
  object A#ccffe5 {
    #リーダーA
  }
  object B#ccffe5 {
    #リーダーB
  }
  object TeamA {
    +メンバー
    +メンバー
  }
  object TeamB {
    +メンバー
    +メンバー
    +メンバー
  }
}

package グループB {
  object C#ccffe5 {
    #リーダーC
  }
  object D#ccffe5 {
    #リーダーD
  }
  object TeamC1 {
    +メンバー
    +メンバー
  }
  object TeamC2 {
    +メンバー
    -メンバー
  }
}

代表 --> A部
代表 --> B部
代表 --> C部
代表 --> DA--> TeamA
B--> TeamB
C--> TeamC1
C--> TeamC2

A-[hidden]r- BC-[hidden]r- D@enduml

アクティビティ図

@startuml

(*) --> "Find Event"
"Find Event" -> "Attend Event"

if "Capacity?" then
  ->[ok] "Create Ticket"
else
  -->[full] if "Standby?" then
    ->[ok] "Standby Ticket"
  else
    -->[no] "Cancel Ticket"
    "Cancel Ticket" --> (*)
  endif
endif

"Create Ticket" --> ==show==
"Standby Ticket" --> ==show==
==show== --> "Show Ticket"
"Show Ticket" --> (*)

@enduml

ステートマシン図

@startuml

[*] --> active

active -right-> inactive : disable
inactive -left-> active  : enable

inactive --> closed  : close
active --> closed  : close

closed --> [*]

@enduml

シーケンス図

@startuml

actor Entrant

Entrant -> Ticket : Attend Event Request

activate Ticket
Ticket -> Member : Create Member Request

activate Member
Member -> Member : Create Member
Ticket <-- Member : Create Member Response
deactivate Member

Ticket -> Ticket : Create Ticket
Entrant <-- Ticket : Attend Event Response
deactivate Ticket

@enduml

�実例:OAuth2

@startuml

actor User

== Initial ==

User -> Client : Request Client Sign In
note right : GET /user/sign_in

activate Client
Client -> Client : Access Token?

== Authentication ==

Client -> AuthN : Redirect
note right : GET /oauth/authorize
deactivate Client

activate AuthN
AuthN -> AuthN : Current User?
AuthN -> AuthN : Redirect
note right : GET /user/sign_in
User <- AuthN : Response AuthN Sign In
deactivate AuthN

User -> AuthN : Request AuthN Sign In (ID, Pass)

activate AuthN
note right : POST /user/sign_in
AuthN -> AuthN : Redirect
note right : GET /oauth/authorize

== Authorization ==

AuthN -> AuthZ : Redirect
note right : GET /oauth/authorize
deactivate AuthN

activate AuthZ
User <- AuthZ : Response AuthZ Application
deactivate AuthZ

User -> AuthZ : Request AuthZ Application (Allow)
note right : POST /oauth/authorize

activate AuthZ
AuthZ -> AuthZ : Generate Code

Client <- AuthZ : Redirect
note right : GET /callback
deactivate AuthZ

activate Client
Client -> AuthZ : Request Access Token
note right : POST /oauth/access_token

activate AuthZ
AuthZ -> AuthZ : Authorization Code?
AuthZ -> AuthZ : Generate Token

Client <-- AuthZ : Response Access Token
deactivate AuthZ

Client -> Client : Redirect
note right : GET /user/sign_in

Client -> Client : Access Token?

== Resource ==

Client -> Resource : Request User (Access Token)
note right : GET /api/user

activate Resource
Client <-- Resource : Response User
deactivate Resource

== Final ==

Client -> Client : Redirect
note right : GET /

User <- Client : Response Client Sign In
deactivate Client

@enduml

Reference

PlantUML - Visual Studio Marketplace

PlantUMLで気軽にUML作成 - Qiita

PlantUML Cheat Sheet - Qiita

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment