mermaid.jsを使ってDoxygen用の図を描く

概要

Doxygenとmermaidの組み合わせがみつからなかったのでメモします。

ソースコード（.hファイルとか）にmermaidで描く

doxygenが検出するコメントに@htmlonlyと@endhtmlonlyで挟んで書く。

server.h

#pragma once
/**
 * @file           server.h
 * @brief          サーバー
 *
 * このモジュールの使い方
 * @htmlonly
 *  <div class="mermaid">
 *      sequenceDiagram
 *          participant cl as クライアント
 *          participant sv as サーバー
 *          participant db as データベース
 *          cl->>+ sv : データ取得要求
 *          sv ->>+ db : select発行
 *          db -->>- sv : select結果
 *          sv -->>- cl : データ取得要求結果
 *  </div>
 *  <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
 *  <script>mermaid.initialize({startOnLoad:true});</script>
 * @endhtmlonly
 *
 *
 * Copyright (c) tanabata11 Sample Inc. All Rights reserved.
 */


/**
 * \brief select発行
 */
void select();

//　いろんなコード

こんな風になる。

Doxygen用のマークダウン(.md)にmermaidで描く

同じく@htmlonlyと@endhtmlonlyで挟んで書く。

　server.md

# サーバー

## このモジュールの使い方

@htmlonly
<div class="mermaid">
  sequenceDiagram
      participant cl as クライアント
      participant sv as サーバー
      participant db as データベース
      cl->>+ sv : データ取得要求
      sv ->>+ db : select発行
      db -->>- sv : select結果
      sv -->>- cl : データ取得要求結果
</div>
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
@endhtmlonly

こんな風になる。

他の環境で同じファイルを使うと@htmlonlyが見えちゃいます。
これに限らずマークダウンは環境で動きが変わるのがな。

参考

シーケンス図のソースはこちらからお借りしました。
mermaidを使ってMarkdownでシーケンス図を作成
その他の書き方
HTMLの埋め込み
Doxygenのマークダウン形式ファイル
Doxygenチートシート