joppot

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

プログラミング

Create plantUML with emacs using plantuml-mode

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


Autumn leaves on wood table

Abstract

Hello everyone it’s me candle.
In this time, we will introduce plantuml-mode of emacs supporting plantUML.
plantuml-mode has three functions.


  1. Syntax highlight
  2. Autocomplete
  3. Display UML preview

There are plenty of settings, so let’s do it patiently.

Precondition

You had plantuml command
I installed plantuml with brew. but it is ok you prepare jar file.

If you don’t have it yet, please refer to here.
Build PlantUML environment on Mac using brew

Install plantuml-mode

The latest version of plant-mode is not yet registered in el-get packages, so we will get it from github directly.

For Mepla user, please see the official site and install it.
https://github.com/skuro/plantuml-mode

For el-get user, open the ~/.emacs.d/init.el

emacs ~/.emacs.d/init.el

Write this code.

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

Then restart emacs and install the plantum-mode.

Check installation either success or fail.
Run this command on emacs.

M-x plantuml-mode


If command exsist, installation is ok.


Confirm jar file path of plantuml which installed by brew

If you had installed plantuml command by “brew”, you need a bit preparation.
Since plantuml-mode tries to execute a jar file, alias plantuml command can not be used.

You’ll confirm plantuml.jar file path.

First go to the /usr/local/bin

cd /usr/local/bin

And show plantuml alias file with this command.

cat ./plantuml

The path of the jar file is displayed.

This is the path in my case.

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

Let’s keep to remember this.

Setting for plantuml-mode

では設定をやっていきます。
Open ~/.emacs.d/init.el and write the below code.
You specify the absolute path of plantuml.jar to plantuml-jar-path.

[lisp]
;; Open the .pu extension file with plantuml-mode
(add-to-list ‘auto-mode-alist ‘("\.pu$" . plantuml-mode))
;; Write your absolute plantuml.jar path
(setq plantuml-jar-path "Here your plant.jar file path")
;; If you want to pass java options, write here.
(setq plantuml-java-options "")
;; Comment in here if you want to preview plantuml as svg, png
;; Display ASCII art by default
;;(setq plantuml-output-type "svg")
;; chart is utf-8
(setq plantuml-options "-charset UTF-8")
[/lisp]

Setting is over.


Let’s use it.

Create a folder and create a file.

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

Write this.

@startuml

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

@enduml

Type C-c C-c
A preview of plantuml is displayed at ASCII Art.

You can also open a preview with the below key bindings.

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

The basic usage is over.

Save png image in plantuml-mode

Although the preview can be displayed from the .pu file in the above method, it can not be saved with png.
When I saw the issue of github, developers are efforting to make it possible to save the image, so the next sentence may be unnecessary soon.

Edit ~/.emacs.d/init.el so that png can be saved.
I refer code from this site, I made it a little customise.

(ja lang)
https://abicky.net/2012/10/16/093737/

Open ~/.emacs.d/init.el and write this.

[lisp]
;; Execute plantuml-save-png function with C-c C-s at plantuml-mode
(add-hook ‘plantuml-mode-hook
(lambda () (local-set-key (kbd "C-c C-s") ‘plantuml-save-png)))

;; If you want to save png file when saving .pu file, comment in here
;; (add-hook ‘plantuml-mode-hook
;; (lambda () (add-hook ‘after-save-hook ‘plantuml-save-png)))

;; Function to save plantuml as 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)))
[/lisp]

Save it.
Let’s reopen the new.pu and execute C-c C-s

The new.png is created in the same place, let’s open it.

It seems good!


conclusion

Plantuml is now available in emacs.

スポンサードリンク

If you think this article is good, share it please

-プログラミング
-, ,

執筆者:


comment

Your email address will not be published. Required fields are marked *

関連記事

I created docker shortcut command with bash alias

Abstract Hello everyone it’s me candle. I will introduce easy operation of the docker command. Of course, I just created it thinking that it was useful, so please change it for much more useful. Precondition You use bash. ( Even though you use zsh or csh or something else, you edit a bit, it will work well) You use docker

Customize wordpress bogo plugin’s short code

English 日本語 Abstract Hello everyone, It’s me candle. In this time, I will show you how to customize wordpress bogo short code. The items to introduce are these. The flag display or hide Change the text Related article How to change the language form “en-US” to “en” by wordpres bogo Precondition WordPress bogo has been installed You can edit the theme of wordpress

Create the simplest drop down menu in React

Abstract Hello everyone it’s me candle. In this time we will make a most simple drop down menu. Condition Knowledge of react Preparation We create a react project with the below command. create-react-app hello-menu Open src/App.js and write this. import React, { Component } from 'react' class App extends Component { render() { return ( <div> <p>hello menu</p> </div> ) } } export default App Create a components directory in the src directory. mkdir src/components Create a DropDownMenu.js file in the src/components directory. touch src/components/DropDownMenu.js Now on ready. Create a Drop down menu Open the src/components/DropDownMenu.js and write these. import …

How to change the language form “en-US” to “en” by wordpres bogo

English 日本語 Abstract Hello everyone, It’s me candle. In this time, I will show you to customize bogo plugins. The bogo is wonderful plugin which can adapt the wordpress site to many languages as a simple. but, there is a problem that you can’t choose general English. When writing English articles, you may not always have to write it limited to country. However, you can choose ‘en-UK’, ‘en-CA’ and ‘en-US’, but ‘en’ can not be chosen in bogo. I checked the source code. The bogo got a language list from wordpress function, and there is no general English in it. …

Tutorial How to use GSAP animation with React

Abstract Hello everyone it’s me candle. In this time we will use GSAP in React. The famous js library which can easily use animation is jQuery. However, it seems that compatibility between jQuery and React is bad. And there are no functions Also, as far as I know, React has no animation function that is easy to use(Yeah, Transition is). But, all times and places, it is rare case that animation is not necessary when you have created a web service. There are many candidates when using animation with React. Of course, you can import only the necessary functions and use …


I work in the venture company as a CTO. I start to write program in University, first I learned java, C++ and PHP. In the company, I'm developing web services by Rails. I do like to automation.