【Mermaid.js連携】kintoneで「組織図」や「業務フロー」を直接表示する方法。脱・添付ファイルで「変更の履歴」も一目瞭然に

/**
 * kintone × Mermaid.js Visualization
 * Description: 別アプリからテンプレートを取得し、選択・上書き挿入する
 * License: MIT
 * Copyright (c) 2026 Yugo Morita
 * Author: Yugo Morita
 */

(function() {
    'use strict';

    const CONFIG = {
        FIELD_CODE: 'mermaid_text', // Mermaid記法を記載する文字列複数行フィールド
        SPACE_ID: 'mermaid_space'  // Mermaid図表を表示するスペースID
    };

    /**
     * エラーメッセージをUIに表示する
     */
    const renderError = (container, title, message) => {
        const errorBox = document.createElement('div');
        Object.assign(errorBox.style, {
            color: '#d32f2f',
            backgroundColor: '#ffebee',
            border: '1px solid #ef5350',
            borderRadius: '4px',
            padding: '10px',
            marginTop: '5px',
            fontSize: '14px'
        });

        const titleEl = document.createElement('strong');
        titleEl.textContent = title;
        
        const msgEl = document.createElement('div');
        msgEl.textContent = message;
        msgEl.style.marginTop = '4px';
        msgEl.style.fontSize = '12px';
        msgEl.style.fontFamily = 'monospace';

        errorBox.appendChild(titleEl);
        errorBox.appendChild(msgEl);
        container.appendChild(errorBox);
    };

    /**
     * Mermaid図を描画する
     */
    const renderMermaid = async (text, container) => {
        container.innerHTML = '';

        if (typeof mermaid === 'undefined') {
            renderError(container, 'System Error', 'Mermaid.js library is not loaded.');
            return;
        }

        if (!text) {
            const placeholder = document.createElement('div');
            placeholder.textContent = 'Please enter Mermaid syntax and update.';
            placeholder.style.color = '#999';
            placeholder.style.padding = '20px';
            placeholder.style.textAlign = 'center';
            container.appendChild(placeholder);
            return;
        }

        const mermaidDiv = document.createElement('div');
        mermaidDiv.className = 'mermaid';
        mermaidDiv.textContent = text; // Prevent XSS
        container.appendChild(mermaidDiv);

        try {
            mermaid.initialize({ startOnLoad: false, securityLevel: 'strict' });
            await mermaid.run({ nodes: [mermaidDiv] });
        } catch (error) {
            mermaidDiv.remove();
            renderError(container, 'Mermaid Syntax Error', error.message);
        }
    };

    // 詳細画面イベント
    kintone.events.on('app.record.detail.show', async (event) => {
        const spaceElement = kintone.app.record.getSpaceElement(CONFIG.SPACE_ID);
        if (!spaceElement) return event;

        const text = event.record[CONFIG.FIELD_CODE].value;
        await renderMermaid(text, spaceElement);

        return event;
    });

    // 編集・追加画面イベント
    const editEvents = ['app.record.create.show', 'app.record.edit.show'];
    kintone.events.on(editEvents, (event) => {
        const spaceElement = kintone.app.record.getSpaceElement(CONFIG.SPACE_ID);
        if (!spaceElement) return event;

        spaceElement.innerHTML = '';

        // 更新ボタン作成
        const btn = document.createElement('button');
        btn.textContent = '🔄 Preview Diagram';
        Object.assign(btn.style, {
            marginBottom: '10px',
            padding: '8px 16px',
            backgroundColor: '#3498db',
            color: '#fff',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
        });

        // 描画エリア作成
        const viewArea = document.createElement('div');
        Object.assign(viewArea.style, {
            minHeight: '100px',
            border: '1px dashed #ccc',
            padding: '10px',
            backgroundColor: '#fff'
        });

        // ボタンクリック時の処理
        btn.onclick = async (e) => {
            e.preventDefault();
            const currentData = kintone.app.record.get();
            const currentText = currentData.record[CONFIG.FIELD_CODE].value;
            await renderMermaid(currentText, viewArea);
        };

        spaceElement.appendChild(btn);
        spaceElement.appendChild(viewArea);

        // 初期値があれば描画
        const initialText = event.record[CONFIG.FIELD_CODE].value;
        if (initialText) {
            renderMermaid(initialText, viewArea);
        }

        return event;
    });

})();

graph TD
    A[社長] --> B[部長]
    B --> C[課長]
    C --> D[担当者]
    B --> E[担当者]

/**
 * kintone × Mermaid.js Dynamic Input Helper
 * Description: 別アプリからテンプレートを取得し、選択・上書き挿入する
 * License: MIT
 * Copyright (c) 2026 Yugo Morita
 * Author: Yugo Morita
 */

(function() {
    'use strict';

    // ★ここに環境固有の設定を入力してください
    const CONFIG = {
        // 現在のアプリ（入力側）の設定
        TARGET_FIELD_CODE: 'mermaid_text', // 挿入先のフィールドコード
        SPACE_ID: 'select_mermaid',        // UIを表示するスペースID

        // テンプレート管理アプリ（データソース側）の設定
        TEMPLATE_APP_ID: xxx,              // ★テンプレートアプリのIDをここに記述
        TEMPLATE_LABEL_FIELD: 'template_name', // テンプレート名のフィールドコード
        TEMPLATE_CODE_FIELD: 'template_code',  // Mermaidコードのフィールドコード
        TEMPLATE_SORT_FIELD: 'sort_no'         // 並び順のフィールドコード（なければ空文字でOK）
    };

    /**
     * テンプレートアプリからデータを取得する関数
     */
    const fetchTemplates = async () => {
        const body = {
            app: CONFIG.TEMPLATE_APP_ID,
            query: `${CONFIG.TEMPLATE_SORT_FIELD ? 'order by ' + CONFIG.TEMPLATE_SORT_FIELD + ' asc' : ''} limit 500`
        };

        try {
            const resp = await kintone.api(kintone.api.url('/k/v1/records.json', true), 'GET', body);
            return resp.records.map(record => ({
                label: record[CONFIG.TEMPLATE_LABEL_FIELD].value,
                code: record[CONFIG.TEMPLATE_CODE_FIELD].value
            }));
        } catch (error) {
            console.error('Templates Fetch Error:', error);
            return [];
        }
    };

    const events = ['app.record.create.show', 'app.record.edit.show'];

    kintone.events.on(events, async (event) => {
        const spaceElement = kintone.app.record.getSpaceElement(CONFIG.SPACE_ID);
        if (!spaceElement) return event;

        // UI初期化（ローディング状態）
        spaceElement.innerHTML = '';
        spaceElement.style.padding = '10px';
        spaceElement.style.backgroundColor = '#f5f5f5';
        spaceElement.style.border = '1px solid #e3e7e8';
        spaceElement.style.display = 'flex';
        spaceElement.style.alignItems = 'center';
        spaceElement.style.gap = '10px';
        spaceElement.style.marginBottom = '10px';

        const label = document.createElement('span');
        label.textContent = 'テンプレート読込中...';
        label.style.fontSize = '12px';
        label.style.color = '#666';
        spaceElement.appendChild(label);

        // APIからデータを取得
        const templates = await fetchTemplates();

        // 取得失敗またはデータなしの場合
        if (templates.length === 0) {
            label.textContent = 'テンプレートが見つかりません (AppID確認)';
            label.style.color = 'red';
            return;
        }

        // UI再構築（取得完了後）
        spaceElement.innerHTML = ''; // ローディング表示を消去

        // ラベル
        const titleLabel = document.createElement('span');
        titleLabel.textContent = 'テンプレート選択: ';
        titleLabel.style.fontWeight = 'bold';
        titleLabel.style.color = '#333';

        // セレクトボックス
        const select = document.createElement('select');
        select.style.padding = '8px';
        select.style.borderRadius = '4px';
        select.style.border = '1px solid #ccc';
        select.style.cursor = 'pointer';
        select.style.maxWidth = '300px';

        // デフォルト選択肢
        const defaultOption = document.createElement('option');
        defaultOption.textContent = '--- 選択してください ---';
        defaultOption.value = '';
        select.appendChild(defaultOption);

        // 取得したテンプレートをOption化
        templates.forEach((tmpl, index) => {
            const option = document.createElement('option');
            option.value = index; // インデックスをValueにする
            option.textContent = tmpl.label;
            select.appendChild(option);
        });

        // 挿入ボタン
        const btn = document.createElement('button');
        btn.textContent = '新規作成 (上書き)';
        Object.assign(btn.style, {
            padding: '8px 16px',
            backgroundColor: '#009688',
            color: '#fff',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            fontWeight: 'bold'
        });

        // ホバー設定
        btn.onmouseover = () => btn.style.opacity = '0.8';
        btn.onmouseout = () => btn.style.opacity = '1.0';

        // ボタンクリック処理
        btn.onclick = (e) => {
            e.preventDefault();

            const selectedIndex = select.value;
            if (selectedIndex === '') {
                alert('テンプレートを選択してください');
                return;
            }

            const selectedTemplate = templates[selectedIndex];

            // 上書き確認
            const currentRecord = kintone.app.record.get();
            if (currentRecord.record[CONFIG.TARGET_FIELD_CODE].value) {
                if (!confirm(`テンプレート「${selectedTemplate.label}」で現在の内容を上書きしますか？`)) {
                    return;
                }
            }

            // 値をセット
            currentRecord.record[CONFIG.TARGET_FIELD_CODE].value = selectedTemplate.code;
            kintone.app.record.set(currentRecord);
        };

        // DOM追加
        spaceElement.appendChild(titleLabel);
        spaceElement.appendChild(select);
        spaceElement.appendChild(btn);

        return event;
    });

})();

graph TD
    Start((開始)) --> Step1[一次対応]
    Step1 --> Decision{解決した？}
    Decision -- Yes --> Step2[完了報告]
    Decision -- No --> Step3[エスカレーション]
    Step3 --> Step2
    Step2 --> Stop((終了))

stateDiagram-v2
    [*] --> 未処理
    未処理 --> 処理中 : 着手
    処理中 --> 承認待ち : 申請
    承認待ち --> 完了 : 承認
    承認待ち --> 差戻し : 却下
    差戻し --> 処理中 : 再開
    完了 --> [*]

gantt
    title プロジェクト進行表
    dateFormat  YYYY-MM-DD
    section 企画
    要件定義       :done,    des1, 2024-04-01, 2024-04-05
    section 開発
    実装           :active,  dev1, 2024-04-06, 5d
    テスト         :         dev2, after dev1, 5d
    section リリース
    本番公開       :crit,    rel1, 2024-04-20, 1d

mindmap
  root((kintone活用))
    全部署共通
      ポータル整備
      全社掲示板
    営業部
      案件管理
      日報
      ::icon(fa fa-money)
    開発部
      タスク管理
      仕様書共有
      ::icon(fa fa-code)

journey
    title ユーザーの商品購入体験
    section 認知
      広告を見る: 5: ユーザー
      クリックする: 3: ユーザー
    section 検討
      LPを見る: 5: ユーザー
      他社と比較: 2: ユーザー
    section 購入
      カートに入れる: 4: ユーザー, kintone
      決済完了: 5: ユーザー, kintone

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#FFD24C',
      'edgeLabelBackground':'#fff',
      'fontFamily': 'Meiryo'
    }
  }
}%%
graph LR
    %% クラス定義（色の設定）
    classDef main fill:#FFD24C,stroke:#fff,stroke-width:4px,color:#333,font-weight:bold,font-size:16px;
    classDef common fill:#7CE7D8,stroke:none,color:#333,rx:5,ry:5;
    classDef sales fill:#F4A6D7,stroke:none,color:#333,rx:5,ry:5;
    classDef dev fill:#92A6E8,stroke:none,color:#333,rx:5,ry:5;

    %% ノードと構造の定義
    Root((kintone活用)):::main
    
    %% 第2階層
    Root --- Common[全部署共通]:::common
    Root --- Sales[営業部]:::sales
    Root --- Dev[開発部]:::dev

    %% 第3階層（全部署共通）
    Common --- C1(ポータル整備):::common
    Common --- C2(全社掲示板):::common

    %% 第3階層（営業部）
    Sales --- S1(案件管理):::sales
    Sales --- S2(日報):::sales
    Sales --- S3(fa:fa-money):::sales

    %% 第3階層（開発部）
    Dev --- D1(タスク管理):::dev
    Dev --- D2(仕様書共有):::dev
    Dev --- D3(fa:fa-code):::dev

    %% 線のスタイル（曲線を滑らかにする）
    linkStyle default interpolate basis stroke:#ccc,stroke-width:2px;