mermeidのサポート状況

今までgitlabのこと微妙なやつだと思ってたんですが、markdownでmermaidをサポートしてたんですね!!

docs.gitlab.com

普段使っているbitbucket & githubでどうなるかというと、こんな感じでただのコードブロックとして表示されます。*1

bitbucketの場合

githubの場合

ところがgit labだとこんな感じでグラフとして表示されます。

ちなみに、はてなだと

graph

graph TD
    A-->B;
    A-->C;
    B-->D;
    C-->D;

sequence diagram

sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!

gantt chart

gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

やっぱ駄目かー

今だと簡単な図を作るのにも、画像として挿入する必要があるので、本文は更新されてるのに図だけ古いままなんて状況になることが多くて困ってるので、ぜひgithubやbitbucketにも追従してもらいたいところです。 ついでに、はてなの脚注機能(はてな記法と同じく二重括弧でくくると中の分が脚注として表示される機能)も便利なので、他のサイトでもサポートしてくれると有り難いなー*2

*1:各グラフはmermaidの公式ページにあるサンプルです

*2:Quiitaの脚注が使い難いのでアカウントは作ったけど、ついついはてなに書いちゃうんですよね・・・