【Markdown拡張記法】テキストを書くだけでフローチャートなどが作図できる「Mermaid」の導入方法

はじめに

Mermaidは、簡単なテキストを書くだけでフローチャートやシーケンス図といったダイアグラムを動的に作成できるJavaScriptプラグインです。例えば、簡単なフローチャートを作図したい場合は以下のような構文を記述します。

flowchart LR
    A["Local Computer"] --SSH--> B
    subgraph Remote Computer
        B[("Database (MySQL)")]
    end

Mermaidは上記のような構文を以下のような図に変換してくれます。

%%{init:{'theme':'base'}}%% flowchart LR A["Local Computer"] --SSH--> B subgraph Remote Computer B[("Database (MySQL)")] end

詳しい記述方法については以下の公式サイトを参照してください。

以下の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を導入していただければと思います。

関連記事

【Rails】UIkit - HTML editorを使って簡単にマークダウンエディターを実装
# はじめに Ruby on RailsではAction Textという機能を使うことで簡単にリッチテキストエディターを実装することができます。 <iframe class="hatenablogcard" style="width:100 [...]
2021年4月6日 22:59
【CSS】CSSだけでMarkdownのコードにファイル名をつける
# はじめに Markdownのコードに、そのコードがどのファイルのものなのかを示すためにファイル名が書いてあるとわかりやすいです。以下はQiitaの記事でコードを書いたときの一例です。 <img data-src="https://i.i [...]
2021年4月6日 14:39
【Rails】Markdownで記事を書く!「Redcarpet + Rouge」の導入・使用方法
# はじめに 当ポートフォリオサイトの記事投稿画面では、長らくRails6から導入されたAction Textを使っていました(Action Textについては下記の記事をご覧ください)。 <iframe class="hatenablog [...]
2019年12月9日 19:58