はじめに
Mermaidは、簡単なテキストを書くだけでフローチャートやシーケンス図といったダイアグラムを動的に作成できるJavaScriptプラグインです。例えば、簡単なフローチャートを作図したい場合は以下のような構文を記述します。
flowchart LR
A["Local Computer"] --SSH--> B
subgraph Remote Computer
B[("Database (MySQL)")]
end
Mermaidは上記のような構文を以下のような図に変換してくれます。
詳しい記述方法については以下の公式サイトを参照してください。
以下のLive Editorを使って体験することもできます。
導入方法
MermaidはMarkdownに触発されて開発されたJavaScriptプラグインですが、Markdownを導入していないWebサイトでも簡単に導入することができます。まず、CDNでMermaidのソースファイルを読み込みます。
HTML
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
次に、JavaScriptでMermaidの初期化を行います。
JavaScript
mermaid.initialize({ startOnLoad: true });
最後に、mermaidクラスを持つ要素内にMermaid記法を記述すれば完了です。
HTML
<div class="mermaid">
flowchart LR
A["Local Computer"] --SSH--> B
subgraph Remote Computer
B[("Database (MySQL)")]
end
</div>
Markdownの拡張記法
GitHubなどのWebサイトでは、Markdownの拡張記法としてMermaid記法をサポートしています。以下のようにコードブロックにmermaidとつけることで、Mermaid記法として解釈されレンダリングされます。
Markdown
```mermaid
flowchart LR
A["Local Computer"] --SSH--> B
subgraph Remote Computer
B[("Database (MySQL)")]
end
```
このように、Markdownの拡張記法としてMermaid記法が書けるようにします。なお、前提としてRedcarpetなどを使用してMarkdownからHTMLへ変換できる状態であるとします。Redcarpetについて詳しくは以下の記事を参照してください。
上記のMarkdownをRedcarpetでHTMLに変換すると以下のようになります。
HTML
<pre>
<code class="mermaid">
flowchart LR
A["Local Computer"] --SSH--> B
subgraph Remote Computer
B[("Database (MySQL)")]
end
</code>
</pre>
Mermaid記法をダイアグラムに変換するにはMermaidAPIを使用します。まず、MermaidAPIを初期化します。
JavaScript
// MermaidAPIの初期化
mermaid.mermaidAPI.initialize({ startOnLoad: false });
次に、mermaidクラスを持つすべての要素に対して処理を行います。
JavaScript
// `mermaid`クラスを持つすべての要素
document.querySelectorAll('.mermaid').forEach(element => {
// ...
});
次に、ブロック内でMermaid記法のテキストを取得し、ダイアグラムを生成します。
JavaScript
// Mermaid記法のテキストを取得し、ダイアグラムを生成
const code = element.innerText;
const svg = mermaid.mermaidAPI.render('mermaidCode', code);
次に、新しい要素を作成し、生成したダイアグラムを設定します。
JavaScript
// 新しい要素を作成し、生成したダイアグラムを設定
const mermaidElement = document.createElement('div');
mermaidElement.classList.add('mermaid');
mermaidElement.innerHTML = svg;
最後に、作成したダイアグラムを含む要素をDOMに追加し、不要な要素を削除します。
JavaScript
// ダイアグラムを含む要素をDOMに追加し、不要な要素を削除
const targetElement = element.parentElement;
targetElement.after(mermaidElement);
targetElement.remove();
以上の処理をまとめると、以下のようになります。
JavaScript
// MermaidAPIの初期化
mermaid.mermaidAPI.initialize({ startOnLoad: false });
// `mermaid`クラスを持つすべての要素
document.querySelectorAll('.mermaid').forEach(element => {
// Mermaid記法のテキストを取得し、ダイアグラムを生成
const code = element.innerText;
const svg = mermaid.mermaidAPI.render('mermaidCode', code);
// 新しい要素を作成し、生成したダイアグラムを設定
const mermaidElement = document.createElement('div');
mermaidElement.classList.add('mermaid');
mermaidElement.innerHTML = svg;
// ダイアグラムを含む要素をDOMに追加し、不要な要素を削除
const targetElement = element.parentElement;
targetElement.after(mermaidElement);
targetElement.remove();
});
上記の処理が実行されると、最終的に以下のようなDOMになります。
HTML
<div class="mermaid">
<svg ...>
<!-- 変換した図 -->
</svg>
</div>
まとめ
Mermaidを簡単に導入する方法と、Markdownを拡張してMermaid記法が書けるようになる方法を紹介しました。本記事を参考にしてMermaidを導入していただければと思います。
JWTについて
【React】React イチから学習《発展編》
【React】React イチから学習《基礎編》
強力なUIコンポーネントライブラリ「MUI（Material-UI）」について《トラブルシューティング編》
強力なUIコンポーネントライブラリ「MUI（Material-UI）」について《テーマ・スタイリング編》
強力なUIコンポーネントライブラリ「MUI（Material-UI）」について《コンポーネント編》
強力なUIコンポーネントライブラリ「MUI（Material-UI）」について《概要編》
インフラストラクチャ自動化ツール「Terraform」について《ベストプラクティスとトラブルシューティング編》
【CSS+JS】背景画像の視差効果（パララックス）を実装する方法
【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む
【Rails】アプリケーションサーバー「Unicorn」の基本情報と実装方法
【Git】マージにおけるfast-forwardとnon-fast-forwardの違い
MySQL Workbenchでリモートサーバー上のMySQLにSSH接続する方法【接続できない場合の対処法あり】
【Rails】忘れがちなルーティングの書き方を総復習
【Rails】忘れがちなGemfileの書き方を総復習
【Rails】M1チップ搭載MacでRuby on Railsの開発環境構築