# 【Power Apps】構造化データをMermaid記法に変換して、アプリ内で組織図をプレビューする方法

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

---

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

- Power Fxで構造化データをMermaid記法に変換するロジックの書き方
- PCFコンポーネントを使ってアプリ内で組織図をリアルタイムにプレビューする方法

---

## 今回つくるもの

Power AppsでMermaid記法を使えるなら何に使いたいですか？

そうです、組織図の自動作成ですよね。（ね！）

今回は、**体制情報を構造化データで持ち、Power Appsの中でMermaid記法に自動変換して組織図をプレビューできる**仕組みを作ってみました。

全体の仕組みはとてもシンプルです。

1. **コレクション**に組織データ（名前・役職・上司）を持つ（今回はサンプルなのでコレクションにしています。本運用するならDataverseなどになります）
2. **Power Fx**でMermaid記法の文字列に変換する
3. **PCFコンポーネント**がMermaid記法を受け取って図を描画する

「テキスト to グラフィカル」これが思いのままに定義できるという素晴らしさ。たとえ元が構造化データであってもMermaid記法に変換してしまえばいいのさ。

### 実際のアプリ画面

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

---

## コレクションの設計

まず、組織データをどう持つかを考えます。今回は最小限の3カラム＋IDで設計しました。

| カラム名 | 型 | 説明 |
| --- | --- | --- |
| ID | Number | レコードの識別用 |
| Name | Text | メンバーの名前（表示名） |
| Role | Text | 役割（Manager / Leader / Staff） |
| Manager | Text | 上司のName（トップは空白） |

**Managerカラムに「上司のName」をそのまま入れ**てみました。これによって、「誰が誰の部下か」という親子関係がシンプルに表現できます。Dataverseでやるなら、自らのテーブルを検索する検索列を作る感じでしょうか？

サンプルデータをボタンのOnSelectで作る場合は、こんな感じです。

```
// ボタンのOnSelect
ClearCollect(
    colOfficeOrg,
    {ID: 1, Name: "営業部長", Role: "Manager", Manager: ""},
    {ID: 2, Name: "営業1課長", Role: "Leader", Manager: "営業部長"},
    {ID: 3, Name: "営業2課長", Role: "Leader", Manager: "営業部長"},
    {ID: 4, Name: "田中営業1課", Role: "Staff", Manager: "営業1課長"},
    {ID: 5, Name: "佐藤営業1課", Role: "Staff", Manager: "営業1課長"},
    {ID: 6, Name: "鈴木営業2課", Role: "Staff", Manager: "営業2課長"},
    {ID: 7, Name: "高橋営業2課", Role: "Staff", Manager: "営業2課長"}
)
```

---

## Power FxでMermaid記法に変換する

コレクションのデータを、Power Fxだけで**Mermaid記法の文字列に変換**します。（魔法みたい・・）

### Mermaid記法とは？

Mermaid記法は、テキストベースで図を描くための記法です。たとえば、こういうテキストを書くと：

```
graph TD
営業部長 --> 営業1課長
営業部長 --> 営業2課長
営業1課長 --> 田中営業1課
```

ツリー状の組織図が自動生成されます。「`A --> B`」が「AからBへの線」を意味するので、上司と部下の関係をそのまま書けばOKです。

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

> Mermaid記法の詳細は公式ドキュメントを参照してください。 [https://mermaid.js.org/](https://mermaid.js.org/)

### 変換コード

```
Set(
    varMermaidCode,
    "graph TD" & Char(10) &
    Concat(
        Filter(colOfficeOrg, !IsBlank(Manager)),
        Manager & " --> " & Name,
        Char(10)
    )
)
```

**`"graph TD" & Char(10)`** Mermaid記法のヘッダーです。`graph TD`は「上から下（Top-Down）に流れるグラフ」という意味。`Char(10)`は改行コードです。（flowchart TDでもいいみたいです）

**`Filter(colOfficeOrg, !IsBlank(Manager))`** コレクションから**Managerが空でないレコード**だけを取り出します。つまり、トップの「営業部長」は除外されます。なぜかというと、トップには「上司→自分」の線が不要だからです。

**`Manager & " --> " & Name`** 各レコードを「`上司名 --> 自分の名前`」の形式に変換します。これがMermaid記法の1行になります。

**`Concat(..., Char(10))`** Concat関数で全レコードを改行区切りで結合します。

### 生成される結果

上のコードを実行すると、変数`varMermaidCode`にはこんな文字列が入ります。

```
graph TD
営業部長 --> 営業1課長
営業部長 --> 営業2課長
営業1課長 --> 田中営業1課
営業1課長 --> 佐藤営業1課
営業2課長 --> 鈴木営業2課
営業2課長 --> 高橋営業2課
```

**データの親子関係が、そのままMermaidの矢印になる。** いい感じですね〜。

---

## PCFコンポーネントでプレビューする

生成したMermaid記法の文字列を、PCFコンポーネント（Power Apps Component Framework）に渡すと、アプリ内でリアルタイムに組織図が描画されます。

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

Mermaid記法をプレビューするPCFコンポーネント自体の作り方や導入手順については、別の記事で詳しく解説しています。

> PCFコンポーネントの導入方法はこちら
>
> https://flow-with-tech.com/power-apps-mermaid-pcf-preview/

---

## まとめ

今回は、Power Appsのコレクションに持った構造化データを、Power Fxで**Mermaid記法に変換して組織図をプレビュー**する方法を紹介しました。

やっていることを振り返ると：

- **Power Fxで変換**: `Filter`で上司がいるレコードだけ抽出 → `Concat`で「上司 --> 部下」の文字列を結合
- **PCFで描画**: 変換した文字列をPCFコンポーネントに渡すだけ

Mermaid記法は組織図だけでなく、フローチャートやシーケンス図、ER図なども書けます。データの持ち方を工夫すれば、**業務フローの可視化**や**システム構成図の自動生成**にも応用できそうですね〜（夢が広がる！）

「構造化データを持っていれば、図は自動で作れる」——この考え方、いろんな場面で使えるんじゃないかなと思います。

皆さんもぜひ試してみてください。

（皆さんからのアイデア募集したいですが、コメント欄がまだないので見送ります・・）