okuzawatsの日記

Android / Kotlin Enthusiast 🤖

はじめてのMermaid

Hugo で作っている当ブログに Mermaid を導入しようとしていたのですが、どうにも上手くできませんでした。まずは初歩に立ち返って、素の Html に Mermaid を導入するところから始めます。

ここから始めていきます。

<html>
  <head>
    <!-- 省略 -->
  </head>
  <body></body>
</html>

公式のドキュメント(Reference 1 を参照)に従い、script を読み込みます。

<html>
  <head>
    <!-- 省略 -->
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  </body>
</html>

div class="mermaid" 要素の下に、Mermaid 記法で書いたグラフを追加します。ここで、フォーマッタに Mermaid 記法を整形されてしまうと Mermaid 記法 が Syntax Error となってしまうことが考えられます(なりました)。自分は VSCode に Prettier のプラグインを入れいるので、Prettier を ignore しています。

<html>
  <head>
    <!-- 省略 -->
  </head>
  <body>
    <!-- prettier-ignore -->
    <div class="mermaid">
      graph TD
      A[fun] --> B[fun]
      B[fun] --> A[fun]
    </div>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  </body>
</html>

ここまでで、 Mermaid による図が表示されるようになりました。最後に、Mermaid にテーマなどを適用して終わります。

<html>
  <head>
    <!-- 省略 -->
  </head>
  <body>
    <!-- prettier-ignore -->
    <div class="mermaid">
      graph TD
      A[fun] --> B[fun]
      B[fun] --> A[fun]
    </div>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>
      mermaid.initialize({
        theme: "neutral",
        logLevel: 3,
        securityLevel: "loose",
        flowchart: { curve: "basis" },
        gantt: { axisFormat: "%m/%d/%Y" },
        sequence: { actorMargin: 50 },
      });
    </script>
  </body>
</html>

🎉

この記事の内容は、以下のリポジトリに公開しています。

Reference

  1. Deployment, retrieved from https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted (last access: 2022/07/02)

#Mermaid

書いている人 😎

profile

茨城県つくば市在住のソフトウェアエンジニア。柏の葉キャンパスと新潟にオフィスのある某社にて、Androidアプリ開発のテックリードをしています。モバイルアプリのアーキテクチャ、自動テスト、技術書の執筆に興味があります。

Jetpack ComposeによるAndroid MVVMアーキテクチャ入門の著者です。

👉 もっと詳しく

Android MVVMアーキテクチャ入門 📝

Androidアプリ開発の初学者に向けた、MVVM(Model-View-ViewModel)アーキテクチャの入門書を書きました。初学者の方を確実にネクストレベルに引き上げる技術書です。