#kintone100日チャレンジ Day089：kintoneレコードにMermaid図を直接表示！Gemini AIで自動生成も「Mermaid for kintone」を作ってみた

記事

IT・テクノロジー

森田ユウゴ

2026/06/28 16:31

面倒解決エンジニアの森田ユウゴです。

台湾からお届けする「#kintone100日チャレンジ」の89日目。

kintoneと全く関係ないのですが、最近はAnkiのカスタマイズをより積極的に行っています。

#kintone100日チャレンジを通じて個人的に培ったAIエージェントの組織作りが、技術的に横展開出来ています。

さて、本日は、業務フローや組織図をkintoneで一元管理したい現場担当者・プロジェクト管理担当者向けの「Mermaid for kintone」を開発しました！

「Mermaid for kintone」について

🎯 なぜ開発したか？（現場の課題とベネフィット）

現場の「不」: フローチャートや組織図をMermaid記法で書いても、kintoneのテキストフィールドでは図として見えない。確認するたびに別ツールへコードを貼り付けてレンダリングする手間がかかり、kintoneだけで業務が完結しない。

導入後の世界（ベネフィット）: レコード詳細画面を開くだけでMermaid図がそのまま描画される。Gemini AIがレコード内の情報を読み込んで図を自動生成してくれるため、「どんな図を書けばいいか分からない」ゼロからのスタートも不要になる。

✨ これで出来ること（機能概要）

まずはこちらをご覧ください。

Mermaid図のレコード内自動描画: 詳細・印刷画面では、文字列（複数行）フィールドに書いたMermaid記法を図として自動描画。「拡大」ボタンまたは図のダブルクリックで全画面モーダルを開き、ホイールズーム・ドラッグパン・Escキーで閉じることができる。

作成・編集画面でのプレビューとテンプレート挿入: 「Preview Diagram」ボタンでMermaidコードを即時プレビュー。別アプリで管理したテンプレートをワンクリックで挿入でき、毎回ゼロから記法を書く手間を省く。

Gemini APIによる図の自動生成・修正: 指示文を入力するだけで、現在のレコード内容（フィールド値・サブテーブルを含む）を読み込んで図を自動生成または修正。生成結果はそのままフィールドへ即反映されるため、「結果を適用」ボタンの押し忘れがない。

課題

現時点では下記のような課題が残っています。

表示イベントハンドラーでPromiseを返さない

kintoneの表示イベントではPromiseを返すことで描画完了まで画面遷移を待機させられるが、詳細画面から編集画面へ素早く遷移すると「Processing event handler exists.」エラーが出て次のUIが壊れる問題が発生した。Mermaid描画はUI副作用であり、kintoneのレコード値やイベントフローには影響しないため、即座に event を返してバックグラウンドで描画する設計を選択した。

モバイル非対応

テンプレート上書き確認に使用している kintone.showConfirmDialog がPC専用APIであるため、モバイル画面での動作は保証していない。