読者です 読者をやめる 読者になる 読者になる

Shibaで図を書いてTracで共有する

Shibaというマークダウンをプレビューしてくれるアプリがあるのですが、

と言ってみたところ

翌日にはmermaid.jsを利用した図が表示できるようになっていました。

これでちょっとした打ち合わせなどで図を見せつつ箇条書きでメモを書いていく、 なんて使い方ができそうです。
そうなると今度はその内容を共有したくなったりしますが、 毎回Shibaを起動して表示してもらうのは嫌がられそうだし、 そもそも全員がShibaをインストールしてくれるとは限らないのでWebに置けると良さそうです。

といっても専用のホストを用意するほどではないので今のチームで一番使われているTracで共有する方法を考えてみました。

  1. プラグインを作る
  2. Tracが稼働しているホストのHTMLを直接編集してmermaid.js(依存しているD3.jsやcssも含む)を追加する
  3. ThemeEnginePlugin をインストールしてCustomize: Advancedからmermaid.js(依存しているD3.jsやcssも含む)を直接埋め込む

http://trac-hacks.org/raw-attachment/wiki/ThemeEnginePlugin/admin_advanced.png

1は正直面倒、2は権限が無くて不可能、消去法的に3でやってみましたが、 Shibaで次のように図を書き、

```mermaid
gantt
    title A Gantt Diagram

    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    anther task      : 24d
```

TracWikiなどでhtmlプロセッサを利用して同じように図を表示させることができるようになりました。

{{{
#!html
<div class="mermaid">
gantt
    title A Gantt Diagram

    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    anther task      : 24d
</div>
}}}

コードブロックとdivの変換はvimで編集していればそんなに手間ではないでしょう。

ちなみにドキュメントには明示されていませんでしたがShibaでもガントチャートを表示させることが可能です。