そういう、モデルなんです。

ビジネスモデル、3Dモデル、設計図、模型などの現状と動向を考察、関連書籍の紹介

Visual Studio Code (VS Code) に Plant UML を追加

アレクサスキル Alexa Skill を開発するにあたって、UML か何かで設計できないかと思っていろいろ調べた。

  • VISIO ビジオ
    Microsoft に買収される前に使っていたが、最近使っていなかったので、今はどうなっているのか再調査。怪しげなサイトで格安のパチもんが多数販売されているようだが、本家のマイクロソフトのサイトを見ると買い切りの場合で4万円くらい。高い。
  • Plant UML
    フリーであり VS Code から Alt + D で呼び出せるとのこと。

出来上がりイメージ

サイコロ係

サイコロ係

 

シーケンス図

  • 出来てから仕様書を書くと楽だね w

f:id:tombi-aburage:20190418112157p:plain

Plant UML のインストール

  • VS Code から検索語 Plant UML で拡張 extension を検索し、見つかったものを導入 install
  • Graphviz をインストール
    安定バージョン 2.38 Stable Release 

するだけであり、そこまでは簡単だった。

シーケンス図のUML図を作成

テキストで書けるので、作図にマウスが必要なく、作画前提のUMLツールよりも楽。
スイムレーンの位置変更なども行をカット&ペーストすればできるので生産性高い。

@startuml
title サイコロ係に6D8を振らせる
actor Player
boundary LaunchRequest
boundary RollDiceIntent
boundary SayAgainIntent
Player -> LaunchRequest: アレクサ、サイコロ係
LaunchRequest --> Player: 何面体を何個振りましょうか?
Player -> RollDiceIntent: 六面体を八個振って
RollDiceIntent -> DiceRoller: 面数:6、個数:8
DiceRoller --> RollDiceIntent: <結果>, 合計
RollDiceIntent --> Player: 六面体を八個振ります。<結果>が出ました。
Player -> SayAgainIntent: もう一遍言って
SayAgainIntent --> Player: 先ほどの結果をお伝えします。<結果>が出ました。

@enduml

しかし  Alt + D しても図は表示されず。

Java が必要とのことだった。

PCには JDK が入っているが、パス PATH は通っていなかったようだ。
plantuml.javaJava 実行形式ファイルへのパスを設定するのでもいいらしい。

f:id:tombi-aburage:20190418171157p:plain

しかし plantuml.java での設定の仕方が分からなかったので、システム環境変数でパスを通すことにした。C:\jdk-11.0.2\bin を追加。

f:id:tombi-aburage:20190305111508p:plain

VS Code を終了させ、再起動したら ALT + D で図が表示されるようになった。

全く問題なし

AWSとAzureのシステム構成図のアイコン画像素材を入手

PlantUML とは関係ないが、設計作業上、使えそうなアイコンがありそうなのでダウンロードしておくこととした。

Amazon Web Services (AWS) シンプルアイコン

aws.amazon.com

Azure Cloud and AI Symbol Icon Set

アマゾンに対抗して用意しただけなので、ダウンロードページにやる気は感じられない。しかもなぜか SVG しかない。

Download Microsoft Azure Cloud and AI Symbol / Icon Set - SVG from Official Microsoft Download Center

SVG は標準のエクスプローラ explorer ではサムネイル表示できなくて不便。
エクスプローラ拡張を導入するほかない。

github.com

アイコンのサイズを中以上にすれば、プレビューが表示されるようだ。