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

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

みなさん、こんにちは!

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

MermaidのREST APIとは?

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

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

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記法の基本的なルールは以下の通りです。

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

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

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をブログやドキュメントに貼り付ければ、以下のような画像が表示されます。

以上がMermaidのREST APIの使い方について記事で紹介しました。

Mermaidは簡単かつ便利なツールですので、ぜひ試してみてください。

本日のAmazonおすすめ_Top10

2024-04-19 05:27:05時点