概要

シーケンス図をテキストで記述するのに、昔少しだけ使ってみたことがあるPlantUMLを調べていたら、ブラウザのみで使用できてMarkdownで記述できるmermaid.jsというJavaScriptライブラリがあることが分かった。他にmarked.js、hilight.jsというJavaScriptライブラリと連携して、シーケンス図を含むMarkdownファイルを記述してブラウザだけで表示できることが分かったので、メモしておく。

コード

コードは以下の通り。「MarkedとMermaidを連携ができずうがー！ってなって微調整した - Qiita」のコードをベースに、各ライブラリのドキュメントを参照しながら、動かない箇所を修正したもの。
marked.html#sample.mdのように、URLの末尾に#に続けて記述したMarkdownファイルを読み込んで表示する。

marked.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="robots" content="none">
    <title>MARKED</title>
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <!-- CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.5.1/build/styles/github.min.css">
    <!-- JS -->
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.5.1/build/highlight.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@9.1.1/dist/mermaid.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked@4.0.16/marked.min.js"></script>
    <script>mermaid.initialize({startOnLoad:false});</script>
  </head>

  <body id="content">
    <script>
      //Markedのレンダリング設定
      //参考  https://mermaid-js.github.io/mermaid/#/usage?id=example-of-a-marked-renderer
      var renderer = new marked.Renderer();
      renderer.code = function (code, language) {
        if (language == 'mermaid') {
          //mermaid.js処理対象設定
          return '<div class="mermaid">' + code + '\n</div>';
        } else {
          //hilight.js処理
          return '<pre><code>\n' + hljs.highlightAuto(code).value + '\n</code></pre>';
        }
      }
      marked.use({ renderer });

      //Markdownファイル読み込み
      $(document).ready(function(){
        if (location.href.split("#").length > 1) {
          var urlParam = location.href.split("#")[1];
          $.get( urlParam, function( data ) {
            //marked.js処理
            $('#content').html(marked.parse(data));
            //mermaid.js処理
            mermaid.init();
          });
        } else {
          $('#content').html('please url#any.md');
        }
      });
    </script>
  </body>
</html>

補足

コードブロックの内容がmermaid.js対象か判定する条件を、コード内のキーワードではなくlanguageに修正した。
Rendererオブジェクトの設定方法をmarked.use({ renderer })に修正した。
marked.jsの処理をmarked(data)からmarked.parse(data)に修正した。

参考