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

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

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

今回つくるもの

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

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

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

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

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

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

実際のアプリ画面

コレクションの設計

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

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です。

Mermaid記法の詳細は公式ドキュメントを参照してください。 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）に渡すと、アプリ内でリアルタイムに組織図が描画されます。

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

PCFコンポーネントの導入方法はこちら

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

まとめ

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

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

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

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

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

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

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

tantan_tech

淡々と改善している人

XContact

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