kintoneのプロセス管理を図で表示する方法の解説

kintoneのプロセス管理を図で表示する方法の解説

kintoneではプロセス管理という機能でワークフローを実装できます。作業者やワークフローを進める条件も柔軟に設定でき、非常に便利なのですが、複雑なワークフローになってくると、「どの順番で進むんだっけ?」というケースがありました()。

 

そこで、プロセス管理機能で定義したワークフローを図で表したら意外と嬉しいんじゃないか、ということでやってみます。

 

※社内で運用しているワークフローをそのままプロセス管理機能に適用したら見にくくなった、というケースの場合、そもそものワークフローを見直す、という事も有効な手ですが、今回はJavaScriptでゴリゴリする事が目的なので、そこは置いておきます。

準備

使用するライブラリ

JavaScriptで作図ができるmermaid.jsを使用します。

フローチャート、シーケンス図、クラス図、ステートメント図、ガントチャートなど、色々な形式の作図が可能なライブラリです。

今回はフローチャートで表示します。

mermaid.js自体の詳しい使い方は情報が重複してしまうので、公式のリファレンスを確認して頂ければと思います。

使用するコード

プロセス管理の設定取得APIで設定を取得し、mermaid.jsのフォーマットで出力する。

注意としては、初期表示をオフとし、グラフ描画ソースが生成完了次第、描画処理を行う点でしょうか。

(function($) {
    "use strict";

    kintone.events.on("app.record.index.show", function(e) {
       mermaid.initialize({startOnLoad:false});
        var body = {
            "app": kintone.app.getId()
        };
        
        kintone.api(kintone.api.url('/k/v1/app/status', true), 'GET', body, function(resp) {
            const actions = resp.actions;
            if (!actions) {
                return;
            }
            let graph = "graph LR\n";
            actions.forEach(function(action) {
                graph += action.from + " --> " + action.to + "\n";
            });
            $(kintone.app.getHeaderSpaceElement()).html(
                    "<div class=\"mermaid\">"
                +   graph
                +   "end\n"
                +   "</div>"
            );

            mermaid.init();
        });
    });
})(jQuery);

ワークフロー(1)シンプルなフロー

kintoneのプロセス管理機能で初期設定されているフローを適用したアプリで、上記のコードを実行するとこうなります。

よしよし、フローが表示されました。

ワークフロー(2)レビュー、差し戻しを追加する

(1)のワークフローにレビュー、差し戻しを追加してみます。

差し戻しがあっても正しく表示されました。

表示できたとは言え実用的か

とりあえず上記の例では正しく表示されましたが、ステータス、アクションの分岐が増えてくると見づらくなるかも知れないです。この辺り、オブジェクトの配置は自動でやってくれるので、タッチできない事が楽でもあり、もどかしくもあります。

レーンの表示

業務フローで使用するレーンの表示が難しい所はネックかもしれない。厳密に言えばレーンぽいものは表示できるのですが・・・

引用:公式リファレンス

これは3つのレーンで独自のフローが流れているので、ちょっと特殊かも。また、前述の通り複雑な場合にどう表示されるのかも少し不安。

使えそうな場面

フローが想定通りに設定されているか。つまり途中で途切れたりしていないかの確認、という用途では使えるかも知れないです。

例えばプロセス管理の設定画面でこの様な設定をします。処理中⇒レビュー中のフローが定義されていません。

すると、

こんな感じで表示されるので、フローが正しく流れていない事がわかります。

おわりに

密かに企んでいたライブラリを使ってお手軽にフローを表示!とは行かなかったです・・・。実用的な業務フローを作る場合はもう少しゴリゴリする必要がありそう。

kintoneカテゴリの最新記事