こんにちは、コンテナソリューション事業部の髙井です。
つい先日、GitHubのMarkdown上でmermaidのレンダリングがサポートされましたね。
エンジニアのための情報共有コミュニティ「Zenn」でも、以前から同様のサポートがありました。
Azure DevOps Wikiでもmermaidが使える
実は、Azure DevOps Wiki でも mermaid をレンダリングしてくれたりします。
ただ、GitHubやZennと同じノリで使おうとするとハマるので少し注意が必要です。
Azure DevOps Wiki では記述方法が異なる
GitHubなどでmermaidを記述する際は、コードブロックをそのまま記載すればよかったのでした。
```mermaid
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
```
ですが、Azure DevOpsだとこのままやってもレンダリングされません。
（※単なるコードブロックとして処理されます）
どうやら、コードブロックではなく::: mermaidで囲むと書いてありますが、その通りにしても以下のようなエラーが出てしまいます。
Azure DevOps Wiki での mermaid の書き方
いろいろ試してみた結果、以下のことが分かりました。
具体的には以下のように書きます。
::: mermaid
graph TD;
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B ---->|No| E[End];
:::
※公式は半角1字下げかつ行末をコロン区切りで書いており、それに従っています。
が、
この2点には従わなくても描画はされるようです……。
（私が最初に試したときは、そっちがクリティカルなのかと思ってかなりハマりました…）
こちらの画像の通り、公式ページにFlowchartsをサポートすると記述があり、まさか「サポートはしてるけどgraphじゃないとダメだぜ！」のパターンとは思いませんでした。
ちなみに、上記のコードは以下のように表示されます。
編集ボタンからのアクセス
編集画面の上側に、サンプルのmermaidダイアグラムを挿入するボタンがあります。
テンプレートは以下のようになっています。
::: mermaid
graph LR;
A[Wiki supports Mermaid] --> B[Visit https://mermaidjs.github.io/ for Mermaid syntax];
:::
おわりに
Azure DevOps Wikiでは、他にもビデオ埋め込みやYAMLタグによるテーブルの埋め込みなどがサポートされていたりします。
GitHubに慣れているとちょっと戸惑ったりもしますが、いろんなことができるようになっていますので、ぜひぜひ活用してみてください。
それではみなさんのAzureライフがもっと楽しくなりますように！エンジョイ！
