読者です 読者をやめる 読者になる 読者になる

はしくれエンジニアもどきのメモ

情報・Web系技術の勉強メモ・備忘録です。

Atom にPlantUML を導入

Atom にPlantUML を導入

こちらで紹介されているRedmine でPlantUMLプラグインを導入してUML図を描くというのものをみて、ATOMでもプラグインで使えるようなのでメモ。

Redmine で技術仕様書を書こう | Aiming 開発者ブログ

環境

  • Windows7 64bit

    • Chocolatey

    • Atom

PlantUMLとは

PlantUMLは、 アクティビティ図や状態遷移図などのUML図をコードで書くことができる。

コードの書き方は、公式サイトにあり、 日本語にもなっているのでわかりやすい。 

http://ja.plantuml.com/

AtomにPlantUMLを導入

内部ソフトのインストールとAtomプラグインをインストールしておくことで使える。

内部ソフトのインストール

内部でJavaとGraphviz を使っているので2つをインストールしておく。chocolatey でインストールできる。


choco install jdk

choco install graphviz

※Graphviz なしでも、動作するが、図の種類によっては描画できない。

※Graphviz 公式サイトが重いので、インストールできないときは時間帯を変えてみる。

プラグインのインストール

Atomでは、 「language-plantuml」 と「plantuml-viewer」をインストールする。

「plantuml-viewer」 の設定

  • Settings で「charset」 を「UTF-8」にしておく。

  • 「GraphViz Dot Executable」にパスを設定しておく。

Settings

PlantUMLのプレビュー

PlantUMLのファイルの拡張子は、 .puml.pu などが使える。

デフォのキーバインディングでは、 Ctrl + Alt + P でプレビューできる。

プレビューした画面は、 右クリック->「SaveAs」で、SVG, EPSやPNG形式で保存できる。


@startuml

[*] --> ログイン前

ログイン前: please input id, pass.

ログイン前 -> ログイン後: input id, pass

ログイン後 --> ログイン前: logout
ログイン後 --> [*]

@enduml
ログイン前please input id, pass.ログイン後input id, passlogout
状態遷移図サンプル
広告を非表示にする