Redmine draw.io plugin がすごい便利そうなので紹介したい

# はじめに

Redmine のチケットや Wiki にちょっとした図を埋め込みたいときって、皆さんどのようにされていますでしょうか？いちいち描画ツールを起動して、図を描いてファイル保存してアップロードするのも面倒ですよね。最新の Redmine 4.1 でしたらクリップボードから直接貼り付けることができますし、それ以前のバージョンでも [Redmine clipboard_image_paste plugin](https://github.com/peclik/clipboard_image_paste) を使えば同じことができますが、それでも描画ツールを起動する手間はかかります。

ところで皆さん、描画ツールは何を使っていますか？僕は draw.io （今は [diagrams.net](https://www.diagrams.net/) に変わろうとしているそうです[^1] ）を好んで使っています。ブラウザ上でいろんな図を描くことができる優れものです。でも、このツールを使って描いた図を Redmine に貼り付けるときには、ファイルかクリップボードを経由しなきゃいけないので、いつも面倒に感じていました。（面倒なので図を添えないこともよくあります。）

そこで、何かいい方法はないものかと探してみたところ、すごいものを見つけました。それが [Redmine draw.io plugin](https://github.com/mikitex70/redmine_drawio) です。調べてみたところ、どうやら日本語の紹介記事がなさそうでしたので、クソザコメンタルな僕がなけなしの勇気を振り絞って先陣を切って紹介してみます。

# Redmine draw.io plugin

## どんなプラグイン？

Redmine のチケットや Wiki に draw.io の図を直接埋め込めるプラグインです。しかも、ただ埋め込むだけじゃなく、添付ファイルや [Redmine DMSF Plugin](https://github.com/danmunn/redmine_dmsf) のファイルとして管理することができます。埋め込んだ図はダブルクリックすると draw.io のエディタが起動して直接編集することができます。

## どんな感じで動くの？

実際に動かした結果を、チケットを例にしてキャプチャ付きで説明します。

環境は、 [以前の記事](https://qiita.com/juno-nishizaki/items/45ff4186feb75d512306) で紹介した「 Docker Compose で作る Redmine 」に Redmine draw.io plugin を追加して構築しました。（あわせて GitHub で公開している [Dockerfile](https://github.com/juno-nishizaki/myfav-redmine/blob/master/redmine/Dockerfile) を更新しました。）

### マクロの埋め込み

Redmine draw.io plugin をインストールすると、テキスト入力エリア上部のツールバーにアイコンが追加されます。

* Attach a Drawio diagram
* Use Drawio diagram stored in DMSF module

前者がチケットの添付ファイル、後者が Redmine DMSF Plugin の文書管理のファイルとして保存されます。

今回は、文書管理のファイルで試してみます。 [README](https://github.com/mikitex70/redmine_drawio#drawio_dmsf-macro) によると、 Redmine DMSF Plugin の設定で WebDAV を有効にしてアクセス制御を読み書き可能にする必要があるそうです。（なぜか読み取り専用でも保存できましたが…どうも怪しいので読み書き可能にした方が無難かと思います）

![マクロの埋め込み-1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295482/3175cadb-f597-ab8c-6070-307c6e8b9576.png)

アイコンをクリックするとダイアログが表示されるので、画像の名前、形式、幅を入力します。

![マクロの埋め込み-2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295482/b2595735-5ce7-60e7-f8e7-d3b5aad07c02.png)

「Insert macro」ボタンを押すとマクロが埋め込まれます。

![マクロの埋め込み-3](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295482/c273fe6e-43b0-5c7e-dbc5-0a90579a0c8f.png)

この状態でチケットを作成すると「 Double click to start drawing 」と書かれたボタン画像が埋め込まれます。

![マクロの埋め込み-4](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295482/e20c1918-3d61-2313-256b-74decd21cb6a.png)

### 図の編集

ボタン画像をダブルクリックすると draw.io のエディタが起動します。

![図の編集-1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295482/1aab17f0-393a-8f49-a1dd-008482aa9ee1.png)

あとは、ボタン画像を消して、好きな図を描くだけです。

![図の編集-2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295482/2109cbe5-3a52-be13-8b8c-7e3892f60c59.png)

図が描けたら右上の「 Save 」ボタンを押します。 このときユーザー／パスワードの入力が必要ですので、うっかりキャンセルしないように気を付けてください。せっかく描いた図が保存されず消えてしまいます。（ 1 敗）

![図の編集-3](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295482/ab5de6f4-674e-8864-69da-5b6753466ddf.png)

「文書管理」タブを開くと、マクロ埋め込み時に指定した名前で画像が保存されていることを確認できます。

![図の編集-4](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295482/acdc14ba-d133-1218-692c-cedf6074db46.png)

## おわりに

文章だけよりも図が添えてある方が伝わりやすいケースは多いと思います。Redmine draw.io plugin を使うと、Redmine に図を埋め込むのが簡単になります。（まるで僕のように）これまでは図を埋め込むのが面倒で文章だけで済ませていた方々が、このプラグインを使ってどんどん図を描くようになって、今まで以上にコミュニケーションが円滑で活発になればとても喜ばしいことだと考えています。

![こいつはりんごろう（ンゴー）](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295482/0c592a68-9fa9-9d69-f5f5-96afe14dbe90.png)

あと、 Redmine ってまだまだ知らないことが多くて、触っていてとても面白いです。これからも色々と試していきたいなと思います。

[^1]: https://www.diagrams.net/blog/move-diagrams-net