【Power Apps】PCFコントロールでMermaid記法をプレビューする方法

この記事を読んでわかること

• Power AppsでMermaid記法をプレビューする方法
• PCFコントロールのインポート手順

こんなことができます

前提知識について

本記事では、Mermaid記法そのものの解説やPCFコントロールの基礎的な説明は省略します。

「Mermaid記法って何？」「PCFコントロールって何？」という方は、以下を先にご覧ください。

Mermaid公式サイト テキストベースでフローチャートやシーケンス図を描ける記法です。 https://mermaid.js.org/

キャンバス アプリのコード コンポーネント — Microsoft Learn

https://learn.microsoft.com/ja-jp/power-apps/developer/component-framework/component-framework-for-canvas-apps

今回使うPCFコントロール

今回使うのは、Iona Varga氏が作成した 「Mermaid JS」 というPCFコントロールです。ページ下部のDownloadからGit Hub レポジトリにアクセスできます。

PCF Gallery — Mermaid JS https://pcf.gallery/mermaid-js/

実際にやってみた

ここからは実際の手順を説明していきます。やることは大きく3ステップです。

1. 環境でPCFコントロールを有効化する
2. ソリューションをインポートする
3. キャンバスアプリに追加する

事前準備 — 環境でPCFコントロールを有効化

まず、PCFコントロール（コードコンポーネント）をキャンバスアプリで使えるようにする必要があります。

1. Power Platform管理センターにアクセス
2. 左メニューから「環境」を選択し、対象の環境をクリック
3. 「設定」→「機能」を開く
4. 「キャンバス アプリの Power Apps Component Framework」をオンにする
5. 「保存」をクリック

ソリューションをインポートする

次に、Mermaid JSコントロールのソリューションファイルをダウンロードしてインポートします。

1. GitHubからソリューションZIPをダウンロード

ソリューションファイル（.zip）をダウンロードします。

2. Power Appsにソリューションをインポート

1. make.powerapps.com にアクセス
2. 左メニューから「ソリューション」を選択
3. 上部の「ソリューションのインポート」をクリック
4. 「参照」からダウンロードしたZIPファイルを選択
5. 「次へ」→「インポート」をクリック

インポートが完了すると

キャンバスアプリに追加する

いよいよ、キャンバスアプリにMermaidコントロールを追加します。

1. コードコンポーネントをインポート

1. キャンバスアプリを新規作成、または既存のアプリを編集モードで開く
2. 左ペインの「＋」（追加）をクリック
3. 「コンポーネントをさらに取得」を選択
4. 「コード」タブを開く
5. 一覧から mermaids コードコンポーネントを選択し、「インポート」をクリック

2. アプリにコントロールを配置

1. 左ペインの「＋」→「コードコンポーネント」セクションを展開
2. mermaids コントロールをクリックしてスクリーンに追加
3. テキスト入力コントロール（TextInput）も一つ追加する

3. Mermaid記法をプレビューしてみる

Mermaidコントロールのプロパティに、Mermaid記法のテキストを渡します。

たとえば、テキスト入力コントロール（TextInput1）の値をMermaidコントロールに紐付ける場合は、Mermaidコントロールの該当プロパティに以下のように設定します。

TextInput1.Text

テキスト入力コントロールに以下のようなMermaid記法を入力してみてください。

graph TD
    A[開始] --> B{条件分岐}
    B -->|Yes| C[処理A]
    B -->|No| D[処理B]
    C --> E[終了]
    D --> E

すると、テキストがそのままフローチャートとして描画されます！

初めて動いたときはちょっと感動しました。テキストを書き換えるとリアルタイムで図が更新されるので、「テキストだけでダイアグラムが描ける」というMermaidの良さをそのままPower Appsの中で体験できます。

まとめ

今回は、PCFコントロール「Mermaid JS」を使って、Power Apps内でMermaid記法のダイアグラムをプレビュー表示する方法を紹介しました。

手順をまとめると、以下の3ステップだけです。

1. 環境でPCFコントロールを有効化
2. ソリューションをインポート
3. キャンバスアプリにコントロールを追加してテキストを紐付け

コードは一切書いていません。 ソリューションをインポートして、プロパティを設定するだけ。市民開発者でもすぐに試せるのが嬉しいポイントです。

Power Appsのアプリ内で、データソースをMermaid記法に変換してプレビュー、なんて使い方もできそうです。活用の幅はかなり広いので、アイデア次第でいろいろ面白いことができそうです。

皆さんもぜひ試してみてはいかがでしょうか。

（最近、Mermaid記法にハマっています。）

tantan_tech

淡々と改善している人

XContact

建設会社にて、現場の施工管理からDX推進、データ利活用や機械学習を経て、現在は社内の市民開発（Power Platform）を推進しています。