ひとりマーメイド22日目
Mermaid APIを使ってみる
概要
マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。
この記事ではMermaid APIの使い方を紹介します！
↓↓前回の記事はこちら
Mermaid APIとは
Mermaid API はマーメイドの記述を文字列で受け取り、レンダリングされたダイアグラムを svg で返します。
この記事では最も簡単に Mermaid API を呼び出す方法を紹介します。
Mermaid API を使ったレンダリング
HTMLに<pre>タグを配置し、その中にマーメイドを記述します。
index.html
<pre class="mermaid">
flowchart
A([start])-->B{true?}
B--Yes-->C[process]
B--No-->D[exception]
C-->E([end])
D-->E
</pre>
Mermaid.jsをインポートします。
スクリプトが実行されると全ての<pre>タグに記述されたマーメイドを取得し、Mermaid APIをコールします。
index.html
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
const config = { startOnLoad: true }
mermaid.initialize(config);
</script>
Mermaid APIはレンダリングされたダイアグラムをsvgで返します。このsvgが記述元の<pre>タグに埋め込まれます。
複数のダイアグラムを埋め込む場合はも同じclass名で記述します。全て同時にレンダリングされます。
index.html
<pre class="mermaid" style="text-align: center;">
flowchart
A([start])-->B{true?}
B--Yes-->C[process]
B--No-->D[exception]
C-->E([end])
D-->E
</pre>
<pre class="mermaid" style="text-align: center;">
flowchart LR
A --> B & C --> D
</pre>
<pre class="mermaid" style="text-align: center;">
flowchart TB
A & B & C --> D & E & F
</pre>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
const config = { startOnLoad: true }
mermaid.initialize(config);
</script>
startOnLoad
startOnLoadにtrueを指定するとロードと同時にレンダリングされます。
falseを指定するとレンダリングされないため、マーメイドのコードがそのまま表示されます。
const config = { startOnLoad: false }
とりあえず試したい場合は以下のコードだけで動きます。
プレビューはこちら
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Mermaid Test</title>
</head>
<body>
<h1 style="text-align: center;">Mermaid Page</h1>
<pre class="mermaid" style="text-align: center;">
flowchart
A([start])-->B{true?}
B--Yes-->C[process]
B--No-->D[exception]
C-->E([end])
D-->E
</pre>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
const config = { startOnLoad: true }
mermaid.initialize(config);
</script>
</body>
</html>
まとめ
Mermaid API をコールして HTML にダイアグラムを埋め込むだけであれば、API の知識がなくても実装することができます。
さらに詳しい仕様は以下を参照してください。
↓↓ 次回の記事はこちら！！
参考