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

- 公開日: 2026-02-11
- カテゴリ: Power Apps
- 著者: tan（@kama_bizdev）
- URL: https://flow-with-tech.com/power-apps-mermaid-pcf-preview/
- サイト: 改善紀 — 好奇心の赴くままに。

---

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

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

### こんなことができます

![](https://flow-with-tech.com/media/wp/2026/02/CleanShot-2026-02-11-at-20.32.09.gif)

---

## 前提知識について

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

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

> **Mermaid公式サイト** テキストベースでフローチャートやシーケンス図を描ける記法です。 [https://mermaid.js.org/](https://mermaid.js.org/)
>
> **キャンバス アプリのコード コンポーネント — Microsoft Learn**
>
> [https://learn.microsoft.com/ja-jp/power-apps/developer/component-framework/component-framework-for-canvas-apps](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/](https://pcf.gallery/mermaid-js/)

---

## 実際にやってみた

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

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

![](https://flow-with-tech.com/media/wp/2026/02/CleanShot-2026-02-11-at-19.56.34@2x.png)

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

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

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

![](https://flow-with-tech.com/media/wp/2026/02/CleanShot-2026-02-11-at-19.56.55@2x.png)

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

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

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

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

![](https://flow-with-tech.com/media/wp/2026/02/CleanShot-2026-02-11-at-19.16.48@2x.png)

![](https://flow-with-tech.com/media/wp/2026/02/CleanShot-2026-02-11-at-19.17.21@2x.png)

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

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

![](https://flow-with-tech.com/media/wp/2026/02/CleanShot-2026-02-11-at-19.18.25@2x.png)

インポートが完了すると

![](https://flow-with-tech.com/media/wp/2026/02/CleanShot-2026-02-11-at-19.21.28@2x.png)

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

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

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

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

![](https://flow-with-tech.com/media/wp/2026/02/CleanShot-2026-02-11-at-19.23.09@2x.png)

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

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

![](https://flow-with-tech.com/media/wp/2026/02/CleanShot-2026-02-11-at-19.25.17@2x.png)

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

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

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

```
TextInput1.Text
```

![](https://flow-with-tech.com/media/wp/2026/02/CleanShot-2026-02-11-at-19.27.02@2x.png)

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

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

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

![](https://flow-with-tech.com/media/wp/2026/02/CleanShot-2026-02-11-at-19.30.31@2x.png)

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

## まとめ

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

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

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

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

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

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

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