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 *

関連記事

Lazy load image with react-lazyload

Abstract Hello everyoen it’s me candle. This time let’s make a delayed loading of images with react-lazyload. The problem of SPA is the delay at the time of initial loading. Among them, we feel that the site with many images is even late. Let’s try it. Condition Nothing Prepare If you have already developing react project, use it. But you don’t have yet or try to test. Generate it with this command. create-react-app imageloader-sample cd imageloader-sample We will prepare images for samples with Faker.js, so install it. yarn add faker Ready to develop. Make a sample code Open the src/App.js …

Tutorial to create a modal using react-modal

Abstract Hello everyone it’s me candle. In this time, let’s create a modal with react-modal. React-modal is a library which can create and handle a modal easily. But However, react-modal is not easy if you try to actually use it. it is necessary to incorporate state management, action, design etc. In this article, I will explain it like a tutorial and we will make a modal together. Condition You have a react knowledge. You installed create-react-app. Set up development env If you already have a some react project, you would use it. Otherwise, you don’t have a any project, please …

Using sphinx how to generate documents of python classes and functions

Abstruct Hello everyone it’s me candle. In this article I will explain how to make documents about classes and functions with Sphinx automatically. condition I will explain it using Python 3, but I think that it will probably work with python 2 as well. Prepare test files Create a main.py and dog.py. touch main.py dog.py Write this to the main.py from dog import Dog def main(): dog = Dog() dog.show_name() if __name__ == "__main__": main() Open the dog.py and write it. class Dog(object): def __init__(self, name="bob"): self.name = name def bark(): print("Bow Wow") def show_name(self): print(self.name) def get_name(self): return self.name …

Hiragino Sans How to write to change weight in css

Abstract Hello everyone it’s me candle. In this time I will show you how to write css of Hiragino Sans.The feature of Hiragino Sans is to be able to change the weight of font from 1 to 9 levels. On the other hand, there are various ways of writing css of Hiragino Sans and I did not know exactly how to write it, so I wrote a program and test it. It will help you who will use Hiragino Sans. The quick reference is released here. http://hiragino.joppot.info Condition Nothing SPONSORED LINK How to write css of Hiragino Sans From the …

React creates dummy data using Faker.js

Abstract Hello everyone it’s me candle. Let’s try to use Faker.js in React. I think that there are various purposes for using Faker.js. In many cases you will use it for testing, but this time I’d like to create a dummy react state using Faker.js. Condition You have a basic react skill create-react-app was installed Create new project First of all, create a react project. Execute the below command in your favorite directory and create a new react project. create-react-app faker-demo cd faker-demo Installation of faker Install faker with this coommand. yarn add –dev faker it’s over. Generate dummy data …

PREV
Build PlantUML environment on Mac using brew
NEXT
Using vc to manage git on emacs25

sponsored link

Search

Translation

2018/12/10

Remove or allow the html tag with javascript + React and take measures against XSS

2018/12/07

Use react-simple-format in React web

2018/12/05

Hiragino Sans How to write to change weight in css

2018/12/03

Lazy load image with react-lazyload

2018/11/30

React + S3 + Route53 + CloudFront HTTPS connection using SSL

Profile


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.

Recent Comments

スポンサードリンク

Archives

タグクラウド

apache Aptana studio 3 atom aws bash bogo CakePHP centos css docker ec2 emacs eslint fabric faker fluentd gem git import-js iphone javascript mac macports MAMP mysql nginx node php plantuml python rails react redmine ruby ruby on rails s3 ssl td-agent uml vagrant wordpress インストール ターミナル 正規表現 環境設定

sponsored link