LoginSignup
3
0
@ksgiksg(おいしみ)

Power Automate フローをもとに Mermaid API で画像化したフローチャート図を作成する

Posted at

1. はじめに

注意
この記事はアイデア段階での投稿になります。
後述します一部の形式（制御構造）には対応していないため、ご注意ください。

このフローでは、作成済みのPower Automate フローを取得して、画像化した単純なフローチャート図を作成するフローです。

例えばこんな感じです。

  • Power Automate フロー
    2024-01-28_11h23_16.png
  • 画像化したフロー(OneDriveに保存)
    2024-01-28_11h22_09.png

分岐のあるフローも画像化できます

  • Power Automate フロー
    2024-01-28_11h23_39.png

  • 画像化したフロー(OneDriveに保存)
    2024-01-28_11h23_51.png

2. このフローではまだできないこと

入れ子となっているような複雑に構造化されたフローはまだ取得できず、外側の構造のみを取得します。
そのため、スコープや繰り返しの中のアクションは取得できません。
こちらについてはアイデアはあるものの、1つの記事にまとめるのは封雑なため、今後の課題としておきます。

長いので折りたたみます

  • Power Automate フロー
    make.powerautomate.com_environments_Default-b794cd83-44cc-447c-856e-a27e55624c65_flows_61195529-bb64-4836-8f1f-ef21bb7b2fa3_v3=true(PowerAutomate).png

  • 画像化したフロー(OneDriveに保存)
    image.png

3. Mermaid について

フローチャートを画像化するために使っているMermaid について、簡単に説明しておきます。

詳しくはこちらの記事を参考にさせていただきました。

3-1. Mermaid とは？

以下はCopilotに生成してもらった説明文です。

Mermaidは、特定の記法で記述したテキストから図を生成するツールです。このツールを利用すると、コードで簡単に様々な図を作成できます。主要なサービスやツール、例えばGithubやNotion、VS CodeなどがMermaid記法をサポートしています。

Mermaidでは以下のような種類の図を生成することができます：

  • フローチャート
  • シーケンス図
  • クラス図
  • 状態遷移図
  • ER図
  • ガントチャート
  • ユーザジャーニー
  • パイチャート
  • その他

これらの図は、Mermaidの記法に従ってコードで記述し、それを元に図が生成されます。これにより、図を手書きする必要がなく、コードで管理できるようになります。これは、ドキュメンテーションの作成や情報の視覚化に非常に便利です。また、MermaidはJavaScriptをベースとしているため、Webページに組み込んで動的に図を生成することも可能です。

3-2. このフローでの使い道

要するに、決められた形式のテキストを図にしてくれるツールですので、例えばフローの詳細からこういったテキストを生成できれば、画像を作成できるということになります。

image.png

ちなみにQiita記事の中でも書ける

↑

mermaid
```mermaid
graph TB
manual-->作成
変数を初期化する-->終了
manual-->現在の時刻
作成-->変数を初期化する
現在の時刻-->変数を初期化する
変数を初期化する-->変数の設定

3-3. 画像化のためのAPI

画像として出力するために、こちらのサービスを利用します。

使用方法など、詳しくは上記ページを参照していただきたいのですが、https://mermaid.ink/img/に続けてbase64に変換したMermaid記法のテキストを入力してできたURLにアクセスすると、画像を取得することができます。

4. フローの解説

ということで、Power Automate フローの中でフローの詳細をMermaid記法で記述し、先のAPIから画像を取得してみたのが今回の内容です。
ちなみに、プレミアムコネクタは使用せず、標準コネクタのみで実現可能です！

フローの全体像

image.png

4-1. 結果を記録するための変数

最初に、Mermaid記法でフローの中身を記録していくための文字列変数を定義します。
初期値としてフローチャート形式であり、上から下方向に記述するという意味のgraph TBを設定しています。
image.png

4-2. フローの取得

次にフローの定義を取得するためのアクションを実行します。
これによって、フローにどんなアクションが設定されていて、どんな順序になっているかを確認することができます。

image.png

4-3. トリガー名の取得

取得したフロー定義のうち、トリガーはこのようなオブジェクトで取得できます。
image.png

このmanualというのが手動トリガーを意味するトリガー名なのですが、このトリガー名は値ではなくキーになっているため、単純に取得することができません。

Xpath関数を使えばいい感じに取得できそうな気がしますが、あまり詳しくなくどうにもできなかったため、単純にダブルクォーテーションで区切った値を取得するという方法を取りました。
image.png

trigger
split(
    string(
        outputs('フローの取得')?['body/properties/definition/triggers']
    ),
    '"'
)?[1]

4-4. アクション名の取得

取得したフロー定義のうち、アクションはこのようなオブジェクトで取得できます。
image.png

これもトリガーと同じように、キーで表現されているため、簡単にアクション名を取得することができません。

さらに、トリガーとは違って項目が複数あるため、すべてのアクション名を取り出すにはさらに工夫が必要です。

自力でのキーの取得は複雑なロジックが必要になるため、既存のアクションを使って省力化します。

CSVテーブルの作成アクションに、先ほど取得したアクションの一覧を入力します。
ただし、このCSVテーブルの作成アクションは配列のみを受け付けるため、[]で囲って配列化しておきます。
image.png

作成した結果がこちらです。
重要なのは、キーだったアクション名が、列の見出しとして1行目にまとまっているところです。
image.png

この結果を改行で区切って1行目のみを取り出し、さらにカンマで区切ることでそれぞれのアクション名が取得できます。
image.png

actions
split(
    split(
        body('CSV_テーブルの作成'),
        decodeUriComponent('%0D%0A')
    )?[0],
    ','
)

4-5. アクションごとにループ

取得できたアクションごとにループを回します。
image.png

ループの対象になっているのはアクション名ですが、アクション全体を取り出すために、アクション名をキーとしてオブジェクトを取り出します。
image.png

action
outputs('フローの取得')?['body/properties/definition/actions']?[item()]

item()というのが、今のループで使われているアクション名です。
取り出した結果は以下のようなオブジェクトです。
image.png

4-6. ひとつ前のアクションの取得

先ほど取り出したactionのうち、runAfterで定義されているのがひとつ前のアクションです。
今ループを回しているアクション名と、ひとつ前のアクション名を取得して、文字列変数にMermaid記法でフローの定義をメモしていきます。

メモしたい内容
ひとつ前のアクション名-->今のアクション名

4-6-1. ひとつ前のアクションがない場合

トリガーの直後やスコープの中の最初のアクションなど、その階層での最初のアクションでは、このrunAfterが空になっています。
空になっているとアクション名が取得できないので、条件分岐で空かどうかを確認し、空の場合は先に取得しておいたトリガー名をひとつ前のアクションとして扱います。
image.png

条件
empty(outputs('action')?['runAfter'])

image.png

文字列変数に追加

@{outputs('triggerName')}-->@{outputs('actionName')}

※新しい行にメモするため、最初に改行しているのがポイントです。

4-6-2. ひとつ前のアクションがある場合

前のアクションがある場合は、単純にそのアクション名を使えばOKです。
ただし、分岐がある場合など、1つ前のアクションが複数存在する場合があります。
image.png

そのため、アクション名を取得したのと同様の方法で、1つ前のアクションをすべて取得し、それぞれに対して処理を実行します。
image.png

4-7. 画像化のためのURLの作成準備

フローの定義が取得し終わったので、最後に画像を取得していきます。
うまくいっていれば、文字列変数の中身はこのようになっています。
image.png

これをBase64に変換します。
image.png

base64
base64(variables('mermaid'))

しかし、Base64形式のテキストには/が混ざる可能性があります。
image.png

URLとしては特別な意味を持つ記号であり、そのままでは使えないため、アンダーバー_に置換する必要があります。
image.png

置換
replace(outputs('base64'),'/','_')

4-8. URLにアクセスして画像を取得

URLのために必要な要素が作成できたので、実際に画像を取得して保存します。

認証の必要のないAPIや単純なWebコンテンツであれば、OneDriveコネクタのURL からのファイルのアップロードアクションを利用することで結果を取得することが可能です。

image.png

URLのみで定義できる、疑似的なHTTPリクエストアクションとして使用することが可能です。

ソース URL
https://mermaid.ink/img/@{outputs('置換')}

保存場所やファイル名は、取得したフローの表示名などを使って適当に設定しています。

対象ファイルのパス
/フロー図/@{outputs('フローの取得')?['body/properties/displayName']}_@{outputs('フローの取得')?['body/name']}.jpeg

5. さいごに

このフローではまだ、スコープやApply to eachなどの構造化したフローを表現することができません。
各アクションのtypeを確認して構造化したアクションごとの処理を定義することで可能ですが、今回は長くなったのでここまでにしておきます。
（Power Automate で複雑なフローを無理やり画像化するよりも、新しいデザイナーで単純にスクショ取る方がきれいに見えそうですし）

フローをフローチャートにすることにはあまり意味がありませんが、Mermaid記法を使って様々な図を生成できるというのは、Power Automate と連携して何かまだ面白いことができるのでは？ と思い、執筆してみました。

皆さんのアイデアを待っています！

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
0