Mermaid記法 | REST API経由で画像を作成しよう

2023.02.23
開発系

みなさん、こんにちは！

今回は Mermaid記法を用いて記載した図案を、REST APIを使って画像として出力する方法を検証します。

1. MermaidのREST APIとは？
2. base64へのエンコード方法
3. 実際に使ってみよう
4. 他にもMermaidの機能はありますか？

MermaidのREST APIとは？

MermaidはMarkdownの中でダイアグラムやチャートなどの図を記述できる記法です。

詳しくは以下のブログを参照ください↓

魅せるIT編集部

2023.02.23

Mermaid記法 | テキストから様々な図を作成する | BingAI/ChatGPT

https://miseruit.com/2023/02/23/post-4265

みなさん、こんにちは！今回はテキストから様々な図を作成することができる「Mermaid記法」について取り上げます。Mermaid記法とは？ Mermaid記法はテキストで様々な図を描ける記法です。フローチャートやシーケンス図、ガントチャートなどを表示できます。テキストであれば検索が容易で、かつ修正も手軽に行えます。公式サイトは以下からアクセスできます↓Mermaid記法を利用できるアプリケーションMermaid記法は多くのサービスやツールがサポートしています。例えば、Github、Notion、VS Code、esa.io、qiita などです。基本的な書き...

MermaidのREST APIは、base64でエンコードしたMermaid記法のテキストを「https://mermaid.ink/img/」に渡すと画像が返ってくるサービスです。

このサービスを使うと、ブログやドキュメントに簡単に図を挿入できます。

base64へのエンコード方法

base64とは、データを64種類の印字可能な英数字に変換するエンコード方式です。

base64にエンコードすると、バイナリデータやマルチバイト文字も扱えるようになります。

base64へのエンコードは、オンラインツールやプログラミング言語などで行えます。

文字列をbase64に変換するオンラインツールはいくつかあります。

例えば、以下のサイトがあります。

Base64 Encode and Decode – Online: このサイトでは、base64のエンコードとデコードを簡単に行えます。テキストやファイルを入力すると、base64の文字列が表示されます。
DenCode | エンコード＆デコードオンラインツール: このサイトでは、base64だけでなく、他のエンコードやデコードも行えます。HTMLエスケープやURLエンコーディングなど様々なフォーマットに対応しています。
Base64 Encode – Online Tool: このサイトでは、base64のエンコードを行えます。テキストを入力すると、base64の文字列が表示されます。

実際に使ってみよう

それでは、実際にMermaid記法で図を作成し、base64にエンコードしてURLに埋め込んでみましょう。

ここでは、シーケンス図を作成してみます。

シーケンス図は以下のようなMermaid記法で書けます。

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+Bob: Hello Bob, how are you?
    John-->>-Alice: Great!
    Bob-->>-Alice: Great!

これをbase64にエンコードすると、

c2VxdWVuY2VEaWFncmFtCkFsaWNlLT4-K0pvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91PwphbGljZS0-PitCb2I6IEhlbGxvIEJvYiwgaG93IGFyZSB5b3U_CkpvaG4tLT4-LUFsaWNlOiBHcmVhdCEKQm9iLS0-Pi1BbGljZTogR3JlYXQh

となります。これをhttps://mermaid.ink/img/ の後ろにつけると、

https://mermaid.ink/img/c2VxdWVuY2VEaWFncmFtCkFsaWNlLT4-K0pvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91PwphbGljZS0-PitCb2I6IEhlbGxvIEJvYiwgaG93IGFyZSB5b3U_CkpvaG4tLT4-LUFsaWNlOiBHcmVhdCEKQm9iLS0-Pi1BbGljZTogR3JlYXQh

というURLが生成されます。このURLをブログやドキュメントに貼り付ければ、以下のような画像が表示されるようになります。

他にもMermaidの機能はありますか？

Mermaidはシーケンス図だけでなく、フローチャートやガントチャート、クラス図など様々な種類の図を作成できます。

また、テーマやカラー、フォントなどの設定も可能です。

Mermaid記法の基本的なルールは以下の通りです。

図の種類を指定するために、最初にgraphやsequenceDiagramなどのキーワードを書きます。
図の要素や関係を表すために、矢印や記号、テキストなどを使います。
コメントは%%で始まる行に書きます。
複数行にわたるテキストはバッククォート(“`)で囲みます。

例えば、フローチャートは以下のように書けます。

graph TD
    A[Start] --> B{Is it raining?}
    B -->|Yes| C[Take an umbrella]
    B -->|No| D[Enjoy the sun]

これをbase64にエンコードしてURLに埋め込むと、

https://mermaid.ink/img/Z3JhcGggVEQKICAgIEFbU3RhcnRdIC0tPiBCe0lzIGl0IHJhaW5pbmc_fQogICAgQiAtLT58WWVzfCBDW1Rha2UgYW4gdW1icmVsbGFdCiAgICBCIC0tPnxOb3wgRFtFbmpveSB0aGUgc3VuXQ

というURLが生成されます。

このURLをブログやドキュメントに貼り付ければ、以下のような画像が表示されます。