T time

プログラミングや電子工作、各種ガジェットに関するブログです。

PlantUMLで描いたUMLをブログに埋め込む

先日、ブログに状態遷移図を載せる必要がありました。

状態遷移図なんて久々でした。 あまり状態が遷移するプログラムを作っていないので。 なかなか良い思考の訓練になりました。

しかし、状態遷移を考えたとして、どうやって描いて、どうやってブログに載せるか、という所が分かりませんでした。

UMLを描くツールは持ってますが、どれもWindows用のツールです。 ブログはネット上で書くのでUMLもネット上で描きたいです。 あわよくば「画像を出力して貼り付け」とか面倒なことはせずに終わらせたいです。 図のURLを貼れば表示されると嬉しいです。

そんな時に便利なのが PlantUML Server です。

PlantUML

PlantUMLをご存知でしょうか。 PlantUMLは UML をテキストベースで記述するための記法と、それを画像に変換するためのツールのことです。

www.plantuml.com

たとえば、以下のように書くと。

@startuml
[*] --> 空腹
空腹 --> 満腹 : ご飯を食べる
満腹 --> 空腹 : 「孤独のグルメ」を観る
@enduml

以下の画像が出力されます。

http://www.plantuml.com:80/plantuml/svg/YzQALT3LjLDuldBNYzQTN10ABF9iLmE8QQNmk77AoyNh7pTDUhbu_kF6dO-RkhcWSWYD86KDFK_NBddUlUPnuxh7JHiUDwz-tBpmSKClKEEBPPk1kW00

どうです? なんか良さそうでしょ? 特にプログラマーの手には馴染みそうです。 しかも、テキストベースなのでバージョン管理システムとの相性も抜群です*1

とりあえず、PlantUMLの紹介については割愛します。以下のブログが素晴らしいのでそちらを見てください。

yohshiy.blog.fc2.com

PlantUMLはローカルアプリだった

しかし、PlantUMLはJavaで書かれたアプリケーションで、基本的にローカルマシン上で動かすものです。 やりたいのはネット上で描いてブログにはリンクを貼り付けることなので使えません。

Javascriptを用いてコードをリアルタイムで画像に変換する jquery_plantuml.js というjQueryプラグインもあるのですが、はてなブログで「このページだけ jquery_plantuml.js を導入する」という方法が分からなかったので、これも断念しました*2

しかし、見つけたのです。PlantUML Server というサービスを。

PlantUML Server

f:id:tatur0u:20150619200208p:plain

PlantUMLServer

PlantUML Server は PlantUML 自身が運営しているサービスです。 フォームに PlantUML のコードを書くと、画像を生成します。

しかも、作成された画像はどこかに保存されるわけではありません。 URL自体にコードが埋め込まれており、ブログにそのURLを貼り付けると PlantUML Server 側で動的に画像を作成して返してくれます。

つまり、コード自体はブログに書かれており、それでも画像として表示されます。

コードをURLに変換する

PlantUML Server にアクセスすると、テキストエリアが現れます。

f:id:tatur0u:20150619204959p:plain

ここに PlanUML のコードを書いて [送信] ボタンを押すと、画像が出力され、一緒にURLも現れます。 このURLが画像へのURLとなります。 これをブログに貼り付けると画像が表示されます。

URLをコードに変換する

そのURLを下側のテキストエリアにコピペしてください。

f:id:tatur0u:20150619205007p:plain

そして [送信] ボタンを押すと、画像が出力され、一緒にコードも現れます。 これで、あとから状態遷移図を修正したい場合でも、URLからコードを再現し、コードを修正することができます。

出力形式を選べる

PlantUML Server はそれだけでも素晴らしいのに、さらに素晴らしいことがあります。

それは画像の出力形式を選べることです。 以下の3種類から選べます。

それぞれ貼り付けてみます。

PNG

http://www.plantuml.com:80/plantuml/png/YzQALT3LjLDuldBNYzQTN10ABF9iLmE8QQNmk77AoyNh7pTDUhbu_kF6dO-RkhcWSWYD86KDFK_NBddUlUPnuxh7JHiUDwz-tBpmSKClKEEBPPk1kW00

普通です。至って普通です。素晴らしい。

SVG

http://www.plantuml.com:80/plantuml/svg/YzQALT3LjLDuldBNYzQTN10ABF9iLmE8QQNmk77AoyNh7pTDUhbu_kF6dO-RkhcWSWYD86KDFK_NBddUlUPnuxh7JHiUDwz-tBpmSKClKEEBPPk1kW00

ベクタデータなので100倍に拡大しても滑らかに表示されます。 UMLを拡大してみたい需要は無さそうですが。

ASCII art

http://www.plantuml.com/plantuml/txt/YzQALT3LjLDuldBNYzQTN10ABF9iLmE8QQNmk77AoyNh7pTDUhbu_kF6dO-RkhcWSWYD86KDFK_NBddUlUPnuxh7JHiUDwz-tBpmSKClKEEBPPk1kW00

これはテキストデータなので(ASCIIアートを画像にしたものではないので)、ブログには貼り付けられませんね。 テキスト化したものをはりつけるとこんな感じです。

,------.
|*start|
|------|
|------|
`------'
    |   
    |   
  ,--.  
  |空腹|  
  |--|  
  |--|  
  `--'  

  ,--.  
  |満腹|  
  |--|  
  |--|  
  `--'  

状態遷移条件が表示されません。日本語だからかもしれません。 これは今回の目的には使えません。

でかいデータは無理

PlantUML Server は完璧です。 まったく文句のつけようがありません。

しかし…

はてなブログ はながーいURLは貼り付けられないぽいです。
ためしに、先日の記事で乗せた画像のURLを貼り付けてみます。

[http://www.plantuml.com/plantuml/png/YzQALT3LjLDuiclNuyQUfnjR7pUkUjpOmeN6HrFJrArW1U8-Qvd_k6dtu-RDZvksFcxUu-7XQ86Yy7OzRcvSN5XAapDAocgLD1NU3PbvxCvQnytJNevhVjnuqIWoLnSnIM99QceBghcYePwvcN3h9UDVNxkN306agY_Dz3auDBCv4IWWO-RzZzkRdxStAWG_MpQp9Vj4q6czJO-xMYBvO8h1-bzkg_rsShvgEP1nF2PzcH7xujjcsEve2gHdGRKPfESdvDVPAMSbcO017PFTZGyNJVhsSocbzCcFz_Q0rHbemzMOSTLoyM5f0zBi7G-Rfm12XOaBwPMP9PW3Ji0:image=http://www.plantuml.com/plantuml/png/YzQALT3LjLDuiclNuyQUfnjR7pUkUjpOmeN6HrFJrArW1U8-Qvd_k6dtu-RDZvksFcxUu-7XQ86Yy7OzRcvSN5XAapDAocgLD1NU3PbvxCvQnytJNevhVjnuqIWoLnSnIM99QceBghcYePwvcN3h9UDVNxkN306agY_Dz3auDBCv4IWWO-RzZzkRdxStAWG_MpQp9Vj4q6czJO-xMYBvO8h1-bzkg_rsShvgEP1nF2PzcH7xujjcsEve2gHdGRKPfESdvDVPAMSbcO017PFTZGyNJVhsSocbzCcFz_Q0rHbemzMOSTLoyM5f0zBi7G-Rfm12XOaBwPMP9PW3Ji0]

あーぁ、あーぁ…

URL短縮サービスで貼り付ける!

しかし昔の人は言いました。

長いURLが無理なら、短いURLを貼ればいいじゃない。

ということで、URL短縮サービスを使ってみました。

使ったのは Google url shortener です。

上のURLを短縮すると http://goo.gl/T0aJDA になりました。 これを貼り付けてみましょう。

http://goo.gl/T0aJDA

やった!
これで巨大なUMLも貼り付けられます。

<div></div> で囲む

ちょっとまて。

PlantUMLの利点は「コードはブログに書かれている」ことでした。 だから文章とコードが一元管理できるのです。 短縮URLを貼るのだったら画像を貼っても同じです。

まぁ、いくらURLにコードが書かれていると言っても、URL見たから何が書いてあるか分かるわけではないのでどのみち同じですが、一段階噛ませてるのが気に入りません。 それに「あ、ちょっと間違ってた」というとき、短縮URLから本物のURLを取り出して内容を修正するのは面倒です。

実は、ながーーいURLでも <div></div> で囲むとちゃんと認識してくれます。 先ほどの残念なやつを <div> で囲ってみましょう。

http://www.plantuml.com/plantuml/png/YzQALT3LjLDuiclNuyQUfnjR7pUkUjpOmeN6HrFJrArW1U8-Qvd_k6dtu-RDZvksFcxUu-_7XQ86Yy7OzRcvSN5XAapDAocgLD1NU3PbvxCvQnytJNevhVjnuqIWoLnSnIM99QceBghcYePwvcN3h9UDVNxkN306agY_Dz3auDBCv4IWWO-RzZzkRdxStAWG_MpQp9Vj4q6czJO-xMYBvO8h1-bzkg_rsShvgEP1nF2PzcH7xujjcsEve2gHdGRKPfESdvDVPAMSbcO017PFTZGyNJVhsSocbzCcFz_Q0rHbemzMOSTLoyM5f0zBi7G-Rfm12XOaBwPMP9PW3Ji0

こんどこそやった!!

これで、好きなだけUMLを描いてブログに貼り付けられます。

あとがき

UMLをブログに貼り付ける方法を紹介しました。

UMLは万能ではありません。 デビュー当時は、UMLがあれば設計図が動く!保守性も高そう!と思いましたが、なかなかうまくいきません。 業種によっては当初の思惑通りに役に立っているのかもしれませんが、そういう業種はまれでしょう。

それでもUMLは、自分の考えを多くの人が理解できる形で図示する方法として一定の地位を築いており、これからもお世話になるでしょう。

そのためには、UMLで描く技術を習得することも大切ですが、それ以上にUMLを保守する技術も大切になってきます。 PlantUMLはその一旦を担う重要な技術として、多くの場面で使われて行くでしょう。

そして PlantUML Server とともにブログでも活躍することと思います。


Plantuml

Plantuml

UMLモデリングの本質 第2版

UMLモデリングの本質 第2版

*1:職場でも、MarkdownとPlantUMLで仕様書を書いて、gitで管理できたら幸せだろうと思います。

*2:今でもこの方法が知りたいです。だれか教えてください。