作成したアプリケーションは以下のように動作します。簡単なアプリケーションですが、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に入力します。タイプにテキスト領域を選択し、複数行の入力ができるようにしています。
送信するページ・アイテムとして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
こちらの記事ではデータベースのスキーマ情報よりER図を生成していたり、別のオープン・ソースのライブラリsvg-pan-zoomを使用して、ダイアグラムの拡大表示なども実装しています。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/sample-mermaid-diagram-drawer.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
