reveal-ck-mermaid-plugin

最近発表用スライドを作るのには reveal-ck を使ってMarkdownで書いてます。

この前の Club MySQLでシーケンス図を描きたくて、テキストベースで簡単に書けるツールが無いかなーと探したら mermaid というのを見つけました。

HTML中に次のように書けばシーケンス図が生成されます。

<div class="mermaid">
    sequenceDiagram
        Client -->> Server: Connection
        Server ->> Client: Initial
        Client ->> Server: Authentication
        Server ->> Client: OK
</div>

ただMarkdownでこれは冗長なので、次のように簡単に記述できるGemを作りました。

 ```mermaid
     sequenceDiagram
         Client -->> Server: Connection
         Server ->> Client: Initial
         Client ->> Server: Authentication
         Server ->> Client: OK
 ```

reveal-ck-mermaid-plugin Gem をインストールして、slides.md ファイルがあるディレクトリで reveal-ck-mermaid-plugin コマンドを実行するとセットアップされます。

% gem install reveal-ck
% gem install reveal-ck-mermaid-plugin
% mkdir foo
% cd foo
% touch slides.md
% reveal-ck-mermaid-plugin
% reveal-ck generate

Chromeだとちゃんと表示できるのですが、Firefoxだとうまく表示できなかったので、ページ切替時に再描画するようにしてあります。