2024年2月15日木曜日

MermaidJSを使ってダイアグラムを描画する

Oracle APEXのアプリケーションにMermaidJSを組み込んで、ダイアグラムを描画してみます。

作成したアプリケーションは以下のように動作します。簡単なアプリケーションですが、Mermaidを組み込む手順の参考になります。


以下より、組み込み方法について紹介します。MermaidのAPIの使い方については、主にAPI-Usageの説明を参照しています。


空のAPEXアプリケーションを作成し、ホーム・ページにすべての機能を実装します。

最初に、ページにMermaidをロードします。

ページ・プロパティのJavaScriptのファイルURLに、以下を指定します。

https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid#MIN#.js

ページ・ロード時に実行に以下を記述します。ダイアグラムはmermaid.runを呼び出して描画するため、startOnLoadはfalseにします。

mermaid.initialize({ startOnLoad: false });

startOnLoad以外のmermaidAPIのConfigurationについては、以下のページが参考になります。



ダイアグラムのソースとなるデータは、ページ・アイテムP1_DIAGRAM_DEFINITIONに入力します。タイプにテキスト領域を選択し、複数行の入力ができるようにしています。


Mermaidによるダイアグラムを描画するリージョンとして、タイプが動的コンテンツのリージョンを作成します。ソースのCLOBを返すPL/SQLファンクション本体として、以下を記述します。ダイアグラムのソースはpre要素のテキストとし、IDにDIAGRAMを割り当てています。

declare
l_clob clob;
begin
l_clob := '<pre id="DIAGRAM">' || :P1_DIAGRAM_DEFINITION || '</pre>';
return l_clob;
end;
view raw mermaid-diagram.sql hosted with ❤ by GitHub
送信するページ・アイテムとしてP1_DIAGRAM_DEFINITIONを設定します。今回の実装ではMermaidが解釈できるデータをP1_DIAGRA_DEFINITIONより受け取って、それをそのまま描画に使用しています。一般的な実装では、他のデータからMermaidが解釈できるデータを生成するようなコードを記述することになると思います。

リージョンの修飾を減らすために、外観のテンプレートとしてBlank with Attributesを選択しています。


ボタンRENDERをクリックしたときに、動的コンテンツのリージョンMermaid Diagramをリフレッシュしています。動的コンテンツのリージョンの送信するページ・アイテムとしてP1_DIAGRAM_DEFINITIONが設定されているため、ボタンをクリックした時点のP1_DIAGRAM_DEFINITIONの内容が動的コンテンツの表示に反映されます。


動的コンテンツのリージョンのリフレッシュが完了した後にMermaidによる描画が実行されるように、動的アクションを作成します。タイミングのイベントはリフレッシュ後です。


リフレッシュ後に実行されるTRUEアクションとして、JavaScript コードの実行を選択します。設定のコードとして以下を記述します。IDがDIAGRAMの要素はMermaidの描画データを保持しているpre要素であり、その要素の位置にダイアグラムが描画されます。
mermaid.run({
  nodes: [document.getElementById("DIAGRAM")],
});

Oracle APEXのアプリケーションへのMermaidの組み込み方法の紹介は以上になります。

Oracle CorporationのAPEX開発チームのメンバーであるSteve Meunchさんが、Mermaidに関するブログ記事を書いています。

Data-Driven Diagrams
https://diveintoapex.com/2023/01/02/data-driven-diagrams/

こちらの記事ではデータベースのスキーマ情報よりER図を生成していたり、別のオープン・ソースのライブラリsvg-pan-zoomを使用して、ダイアグラムの拡大表示なども実装しています。

今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/sample-mermaid-diagram-drawer.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完
投稿者 時刻:
ラベル: ,