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);
ワークフロー（１）シンプルなフロー
kintoneのプロセス管理機能で初期設定されているフローを適用したアプリで、上記のコードを実行するとこうなります。
よしよし、フローが表示されました。
ワークフロー（２）レビュー、差し戻しを追加する
（１）のワークフローにレビュー、差し戻しを追加してみます。
差し戻しがあっても正しく表示されました。
表示できたとは言え実用的か
とりあえず上記の例では正しく表示されましたが、ステータス、アクションの分岐が増えてくると見づらくなるかも知れないです。この辺り、オブジェクトの配置は自動でやってくれるので、タッチできない事が楽でもあり、もどかしくもあります。
レーンの表示
業務フローで使用するレーンの表示が難しい所はネックかもしれない。厳密に言えばレーンぽいものは表示できるのですが・・・
引用：公式リファレンス
これは3つのレーンで独自のフローが流れているので、ちょっと特殊かも。また、前述の通り複雑な場合にどう表示されるのかも少し不安。
使えそうな場面
フローが想定通りに設定されているか。つまり途中で途切れたりしていないかの確認、という用途では使えるかも知れないです。
例えばプロセス管理の設定画面でこの様な設定をします。処理中⇒レビュー中のフローが定義されていません。
すると、
こんな感じで表示されるので、フローが正しく流れていない事がわかります。
おわりに
密かに企んでいたライブラリを使ってお手軽にフローを表示！とは行かなかったです･･･。実用的な業務フローを作る場合はもう少しゴリゴリする必要がありそう。
