joppot

コピペで絶対動く。説明を妥協しない

プログラミング

emacsでplantUMLをplantuml-modeを使って作成する

投稿日:2017年10月30日更新日:

Pocket

Autumn leaves on wood table

概要

みなさんこんにちはcandleです。今回はplantUMLをサポートするemacsのplantuml-modeを導入して使ってみましょう。
plantuml-modeは以下の3つの機能があります。

  1. シンタックスハイライト
  2. 自動補完
  3. プレビューの表示

結構設定することがあるので根気よくやって来ましょう。

前提

plantumlコマンドがある
私はbrewでplantumlを入れましたが、jarファイルを用意してもOKです。

まだの人はこちらを参照してください。
MacにPlantUML環境をbrewを使って構築する

plantuml-modeをインストールする

plantuml-modeの最新版はel-getにまだ登録されておらず、古い方のplantuml-modeが入ってしまうので直接githubから持って来ます。

Melpaを使っている人は公式サイトをみてインストールしてください。
https://github.com/skuro/plantuml-mode

el-getの方は~/.emacs.d/init.elを開きます。

emacs ~/.emacs.d/init.el

以下を書き込みます。

(el-get-bundle plantuml-mode
  :type github
  :name plantuml-mode
  :pkgname "skuro/plantuml-mode"
  :branch "master")

そしたら、emacsを再起動してplantuml-modeをインストールします。

ちゃんとインストールできたか確認します。
以下を実行してみましょう。

M-x plantuml-mode



brewで入れたplantumlのjarファイルのパスを確認する

もしもbrewでplantumlコマンドを入れた場合は少し準備が必要です。
plantuml-modeはjarファイルを実行しようとするとので、そのエイリアスであるplantumlコマンドは使えません。
plantuml.jarのパスを確認します。

まず、/usr/local/binに移動します。

cd /usr/local/bin

そして、以下のコマンドでplantumlを表示します。

cat ./plantuml

するとjarファイルのパスが表示されます。

私の場合はこれになります。

/usr/local/Cellar/plantuml/1.2017.18/libexec/plantuml.jar

これを控えておきましょう。

plantuml-modeの設定

では設定をやっていきます。
~/.emacs.d/init.elを開きます。
以下を記述します。
plantuml-jar-path はplantuml.jarの絶対パスを指定します。

;; .pu拡張子のファイルをplantuml-modeで開く
(add-to-list 'auto-mode-alist '("\.pu$" . plantuml-mode))
;; あなたのplantuml.jarファイルの絶対パスをかく
(setq plantuml-jar-path "Here your plantuml.jar file path")
;; javaにオプションを渡したい場合はここにかく
(setq plantuml-java-options "")
;; plantumlのプレビューをsvg, pngにしたい場合はここをコメントイン
;; デフォルトでアスキーアート
;;(setq plantuml-output-type "svg")
;; 日本語を含むUMLを書く場合はUTF-8を指定
(setq plantuml-options "-charset UTF-8")

設定は以上です。


実際に使って見る

適当なフォルダを作り、ファイルを作成します

mkdir test
touch test/new.pu
emacs test/new.pu

以下を書き込みましょう。

@startuml

developer -> emacs: "Draw me a diagram"
emacs -> developer: "Here you are, sir"
developer -> world: "Woooooohooooo"

@enduml

ここで、C-c C-c を押してみましょう。
アスキーアートでplantumlのプレビューが表示されます。

他にも以下のキーバインドでプレビューを開くことができます。

C-c C-c plantuml-preview: renders a PlantUML diagram from the current buffer in the best supported format

C-u C-c C-c plantuml-preview in other window

C-u C-u C-c C-c plantuml-preview in other frame

基本的な使い方は以上です。

plantuml-modeでpng画像を保存する

上の方法では.puファイルからプレビューは表示できるものの、pngで保存ができません。
ちなみに、githubのissueを見た所、画像を保存できるようにしようという取り組みが進行中なので、そのうちここの辺は必要なくなるかもです。

~/.emacs.d/init.elを編集してpng保存できるようにしましょう。
コードは以下のサイトのものを参考にさせてもらい、少し改造しました。

https://abicky.net/2012/10/16/093737/

~/.emacs.d/init.elを開いて以下を記述します。

;; plantuml-modeの時にC-c C-sでplantuml-save-png関数を実行
(add-hook 'plantuml-mode-hook
  (lambda () (local-set-key (kbd "C-c C-s") 'plantuml-save-png)))

;; もしも.puファイルを保存した時にpngファイルを保存したい場合はこちらをコメントイン
;; (add-hook 'plantuml-mode-hook
;;    (lambda () (add-hook 'after-save-hook 'plantuml-save-png)))

;; plantumlをpngで保存する関数
(defun plantuml-save-png ()
  (interactive)
  (when (buffer-modified-p)
    (map-y-or-n-p "Save this buffer before executing PlantUML?"
      'save-buffer (list (current-buffer))))
  (let ((code (buffer-string))
         out-file
         cmd)
    (when (string-match "^\\s-*@startuml\\s-+\\(\\S-+\\)\\s*$" code)
      (setq out-file (match-string 1 code)))
    (setq cmd (concat
                "java -Djava.awt.headless=true -jar " plantuml-java-options " "
                (shell-quote-argument plantuml-jar-path) " "
                (and out-file (concat "-t" (file-name-extension out-file))) " "
                plantuml-options " "
                (buffer-file-name)))
    (message cmd)
    (call-process-shell-command cmd nil 0)))

これでplantuml-modeとの時にC-c C-sでpngが保存できるようになりました。

先ほどのnew.puを開き直して、C-c C-sを実行しましょう

同じ場所にnew.pngが作成されるので、開いてみましょう。

いい感じです。


まとめ

emacsでplantumlが使えるよになりました。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

wordpress skeletonを使った開発環境の構築

はじめに みなさんこんにちはcandleです。wordpressは大変便利なのですが、いまいちgitで管理するのが難しいものです。 というのも、wordpress全体をgit管理対象にしてしまうと、w …

railsのform_forとstrong parametersを使用して画像をアップロードする

概要 みなさんこんにちはcandleです。今回はrailsのform_forを使って、railsプロジェクトのpublicディレクトリに画像をアップロードしてみましょう。 form_forは基本的にデ …

phpでcompassを使った開発の仕方

概要 みなさんこにちはcandleです。今回はphpでcompassを使いたいと思います。 compassは別名scssともいいます。 compassはphpのライブラリが既にあります。 しかし、その …

ruby on railsのckeditorの画像のアップロード先をcarrierwaveとfogを使ってS3にする

概要 railsのckeditorはデフォルトでrailsのuploadsフォルダにアップロードしますが、 それだとサーバの容量を取ってしまうので、画像のアップロード先をS3に上げてみたいと思います。 …

ruby on rails のckeditor gemの機能ボタンをカスタマイズする

概要 みなさんこんにちはcandleです。今回はruby on rails のckeditor gemのショートカットボタンをカスタマイズして自分が必要な機能のみを表示してみましょう。 前提 cked …

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ