問題解決には、抱えている人や解決しようとする人の間で共有することが重要です。しかし言葉や文章では思い違いが発生し共有は困難です。そこで、問題の増幅ル一プ等の可視化が重要になります。

詳しくは，著書「スマート化に必要な問題解決の極意」をご高覧願います。

また，アプリを作る部分については，著書「毎日無料のGeminiに相談するだけで作るGoogle Apps Script Webアプリ 3.1 Pro対応版」をご高覧願います。

問題の可視化ツール（Google Apps Script Webアプリ）

1. 操作方法

　■線を引く-始点の図形上でALTキーを押したまま，終点の図形上にマウスを移動し，ALTキーを離す。

　■図形や線の削除-図形や線をクリックして選択し，DELETEキーを押す。範囲指定も可能。

　■図形へのテキスト入力-ダブルクリックすると窓が開いて入力できる。

　■全体の位置の調整-全てを選択して，ドラク＆ドロップ操作で移動する。

2. Code.gs（サーバーサイド）

/**
 * 高度なフローチャート・エディタ (Code.gs)
 */
const DB_FILE_NAME = "フローチャートデータ";

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index')
      .setTitle('Advanced Flowchart Editor')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
      .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

// データベース(スプレッドシート)の取得、または新規作成
function getDatabaseSheet() {
  const files = DriveApp.getFilesByName(DB_FILE_NAME);
  let ss;
  if (files.hasNext()) {
    ss = SpreadsheetApp.open(files.next());
  } else {
    // 存在しない場合は新規作成（ルートに作成されます）
    ss = SpreadsheetApp.create(DB_FILE_NAME);
    const sheet = ss.getSheets()[0];
    sheet.appendRow(["Name", "JSON_Data", "Last_Updated"]); // ヘッダー
  }
  return ss.getSheets()[0];
}

// データの保存 (排他制御・LockService適用)
function saveFlowchartData(name, jsonData) {
  const lock = LockService.getScriptLock();
  // 10秒間ロックの取得を待機
  if (!lock.tryLock(10000)) {
    return { success: false, message: "他のユーザーが保存中のためタイムアウトしました。" };
  }

try {
    const sheet = getDatabaseSheet();
    const data = sheet.getDataRange().getValues();
    let rowIndex = -1;

// 既存の名前があれば上書き
    for (let i = 1; i < data.length; i++) {
      if (data[i][0] === name) {
        rowIndex = i + 1;
        break;
      }
    }

} catch (e) {
    return { success: false, message: "保存エラー: " + e.message };
  } finally {
    lock.releaseLock();
  }
}

// 保存済みリストの取得
function getSavedList() {
  try {
    const sheet = getDatabaseSheet();
    const data = sheet.getDataRange().getValues();
    const list = [];
    for (let i = 1; i < data.length; i++) { // ヘッダーをスキップ
      if (data[i][0]) list.push(data[i][0]);
    }
    return { success: true, list: list };
  } catch (e) {
    return { success: false, message: "リスト取得エラー: " + e.message };
  }
}

// データの読み込み
function loadFlowchartData(name) {
  try {
    const sheet = getDatabaseSheet();
    const data = sheet.getDataRange().getValues();
    for (let i = 1; i < data.length; i++) {
      if (data[i][0] === name) {
        return { success: true, data: data[i][1] };
      }
    }
    return { success: false, message: "データが見つかりません。" };
  } catch (e) {
    return { success: false, message: "読み込みエラー: " + e.message };
  }
}

3. index.html（フロントエンド）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
  * { box-sizing: border-box; user-select: none; }
  body { margin: 0; padding: 0; overflow: hidden; font-family: sans-serif; background: #f0f2f5; }
  
  /* ツールバー */
  #toolbar {
    position: absolute; top: 0; left: 0; width: 100%; height: 50px; background: #fff;
    border-bottom: 1px solid #ccc; display: flex; align-items: center; padding: 0 15px; gap: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 10;
  }
  button, select, input { padding: 6px 12px; cursor: pointer; border: 1px solid #aaa; border-radius: 4px; background: #fff; }
  button:hover { background: #eef; }
  .separator { width: 1px; height: 30px; background: #ccc; margin: 0 5px; }
  
  #canvas-container { position: absolute; top: 50px; left: 0; width: 100%; height: calc(100% - 50px); cursor: crosshair; }
  canvas { display: block; }
  
  /* カスタムUI（モーダル/トースト） */
  .modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 100; justify-content: center; align-items: center;
  }
  .modal-content { background: #fff; padding: 20px; border-radius: 8px; width: 300px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
  .modal-content h3 { margin-top: 0; }
  .modal-content input, .modal-content textarea { width: 100%; padding: 8px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; }
  .modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
  
  #toast {
    position: fixed; bottom: -50px; left: 50%; transform: translateX(-50%);
    background: #333; color: #fff; padding: 10px 20px; border-radius: 20px;
    transition: bottom 0.3s ease; z-index: 200; font-size: 14px;
  }
</style>
</head>
<body>

<div id="toolbar">
  <button onclick="addNode('rect')">+ 四角</button>
  <button onclick="addNode('circle')">+ 円</button>
  <div class="separator"></div>
  <button onclick="undo()">Undo</button>
  <button onclick="redo()">Redo</button>
  <button onclick="selectAll()">全選択</button>
  <div class="separator"></div>
  <button onclick="zoom(0.1)">拡大</button>
  <button onclick="zoom(-0.1)">縮小</button>
  <span id="zoom-label">100%</span>
  <div class="separator"></div>
  <button onclick="triggerAutoLayout()" style="background: #e3f2fd; border-color: #90caf9;">自動整列</button>
  <div class="separator"></div>
  <button onclick="exportPNG()">画像保存</button>
  <button onclick="printCanvas()">印刷</button>
  <div class="separator"></div>
  <button onclick="openSaveModal()">保存</button>
  <select id="load-select" onfocus="fetchSavedList()"><option value="">読込リスト...</option></select>
  <button onclick="loadFromGAS()">読込</button>
</div>

<div id="text-modal" class="modal-overlay">
  <div class="modal-content">
    <h3>テキスト編集</h3>
    <textarea id="edit-text-val" rows="3"></textarea>
    <div class="modal-actions">
      <button onclick="closeModal('text-modal')">キャンセル</button>
      <button onclick="applyTextEdit()" style="background:#4CAF50; color:#fff; border:none;">適用</button>
    </div>
  </div>
</div>

<div id="save-modal" class="modal-overlay">
  <div class="modal-content">
    <h3>サーバーへ保存</h3>
    <input type="text" id="save-name" placeholder="ファイル名を入力">
    <div class="modal-actions">
      <button onclick="closeModal('save-modal')">キャンセル</button>
      <button onclick="saveToGAS()" style="background:#2196F3; color:#fff; border:none;">保存</button>
    </div>
  </div>
</div>

<div id="toast"></div>

let scale = 1.0;
let offsetX = 0, offsetY = 0;
let isPanning = false;

// 選択状態
let selectedNodes = new Set();
let selectedEdges = new Set();
let isBoxSelecting = false;
let selectionBox = { x: 0, y: 0, w: 0, h: 0 };

// マウス状態
let mouseX = 0, mouseY = 0;
let isDraggingNode = false;
let isResizingNode = null;
let isDrawingEdge = false;
let edgeStartNode = null;
let currentEdgeTemp = null;

let dragOffsetMap = new Map(); // 複数ドラッグ用

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const container = document.getElementById('canvas-container');

// 初期化
function init() {
  resizeCanvas();
  window.addEventListener('resize', resizeCanvas);
  saveState();
  requestAnimationFrame(draw);
}

function resizeCanvas() {
  canvas.width = container.clientWidth;
  canvas.height = container.clientHeight;
  draw();
}

/**
 * ユーティリティ・数学関数
 */
function generateId() { return Math.random().toString(36).substr(2, 9); }

function getWorldMouse(e) {
  const rect = canvas.getBoundingClientRect();
  return {
    x: (e.clientX - rect.left - offsetX) / scale,
    y: (e.clientY - rect.top - offsetY) / scale
  };
}

// ベジェ曲線の制御点計算（常に進行方向の右側に膨らむ）
function getBezierControlPoint(x1, y1, x2, y2) {
  let dx = x2 - x1;
  let dy = y2 - y1;
  let dist = Math.sqrt(dx*dx + dy*dy) || 1;
  let midX = (x1 + x2) / 2;
  let midY = (y1 + y2) / 2;
  // 進行方向の右側法線ベクトル（CanvasはY軸下向きなので -dy, dx が右）
  let nx = -dy / dist;
  let ny = dx / dist;
  // カーブの膨らみ具合（距離の20%）
  let curveIntensity = dist * 0.2; 
  return { cx: midX + nx * curveIntensity, cy: midY + ny * curveIntensity };
}

// 図形の境界座標を求める
function getBoundaryPoint(node, targetX, targetY) {
  let dx = targetX - node.x;
  let dy = targetY - node.y;
  let angle = Math.atan2(dy, dx);
  
  if (node.type === 'circle') {
    return { x: node.x + (node.width/2) * Math.cos(angle), y: node.y + (node.width/2) * Math.sin(angle) };
  } else {
    // 矩形境界
    let hw = node.width / 2;
    let hh = node.height / 2;
    let absTan = Math.abs(dy / dx);
    let x, y;
    if (absTan < hh / hw) {
      x = dx > 0 ? hw : -hw;
      y = x * (dy / dx);
    } else {
      y = dy > 0 ? hh : -hh;
      x = y * (dx / dy);
    }
    return { x: node.x + x, y: node.y + y };
  }
}

// 2次ベジェ曲線上の点から距離を測る（当たり判定用サンプリング）
function getDistToBezier(px, py, x1, y1, cx, cy, x2, y2) {
  let minDist = Infinity;
  for(let t = 0; t <= 1; t += 0.1) {
    let bx = Math.pow(1-t, 2)*x1 + 2*(1-t)*t*cx + Math.pow(t, 2)*x2;
    let by = Math.pow(1-t, 2)*y1 + 2*(1-t)*t*cy + Math.pow(t, 2)*y2;
    let d = Math.hypot(bx - px, by - py);
    if(d < minDist) minDist = d;
  }
  return minDist;
}

/**
 * 描画ロジック
 */
function draw() {
  ctx.save();
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.translate(offsetX, offsetY);
  ctx.scale(scale, scale);

// エッジ描画
  edges.forEach(edge => drawEdgeObj(edge, selectedEdges.has(edge.id)));
  if (isDrawingEdge && currentEdgeTemp) drawTempEdge(currentEdgeTemp);

// ノード描画
  nodes.forEach(node => drawNode(node, selectedNodes.has(node.id)));

// 選択ボックス描画
  if (isBoxSelecting) {
    ctx.fillStyle = 'rgba(0, 120, 215, 0.2)';
    ctx.strokeStyle = 'rgba(0, 120, 215, 0.8)';
    ctx.lineWidth = 1 / scale;
    ctx.fillRect(selectionBox.x, selectionBox.y, selectionBox.w, selectionBox.h);
    ctx.strokeRect(selectionBox.x, selectionBox.y, selectionBox.w, selectionBox.h);
  }

ctx.restore();
}

// テキスト描画
  if (node.text) {
    ctx.fillStyle = '#000';
    ctx.font = `${14}px sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    let lines = node.text.split('\n');
    let lineH = 16;
    let startY = -(lines.length - 1) * lineH / 2;
    lines.forEach((line, i) => {
      ctx.fillText(line, 0, startY + i * lineH);
    });
  }
  ctx.restore();
}

function drawEdgeObj(edge, isSelected) {
  let from = nodes.find(n => n.id === edge.from);
  let to = nodes.find(n => n.id === edge.to);
  if (!from || !to) return;

let cp = getBezierControlPoint(from.x, from.y, to.x, to.y);
  let p1 = getBoundaryPoint(from, cp.cx, cp.cy);
  let p2 = getBoundaryPoint(to, cp.cx, cp.cy);

drawBezierArrow(p1, p2, cp, isSelected);
}

function drawTempEdge(temp) {
  let cp = getBezierControlPoint(temp.x1, temp.y1, temp.x2, temp.y2);
  drawBezierArrow({x: temp.x1, y: temp.y1}, {x: temp.x2, y: temp.y2}, cp, true);
}

function drawBezierArrow(p1, p2, cp, isSelected) {
  ctx.save();
  ctx.strokeStyle = isSelected ? '#ff5722' : '#666';
  ctx.lineWidth = (isSelected ? 3 : 2) / scale;
  
  // 曲線描画
  ctx.beginPath();
  ctx.moveTo(p1.x, p1.y);
  ctx.quadraticCurveTo(cp.cx, cp.cy, p2.x, p2.y);
  ctx.stroke();

// 終点の矢印方向を計算（制御点から終点へのベクトル）
  let dx = p2.x - cp.cx;
  let dy = p2.y - cp.cy;
  let angle = Math.atan2(dy, dx);
  let headlen = 10 / scale;

ctx.fillStyle = ctx.strokeStyle;
  ctx.beginPath();
  ctx.moveTo(p2.x, p2.y);
  ctx.lineTo(p2.x - headlen * Math.cos(angle - Math.PI / 6), p2.y - headlen * Math.sin(angle - Math.PI / 6));
  ctx.lineTo(p2.x - headlen * Math.cos(angle + Math.PI / 6), p2.y - headlen * Math.sin(angle + Math.PI / 6));
  ctx.fill();
  ctx.restore();
}

/**
 * イベントハンドラ (Canvas)
 */
canvas.addEventListener('mousedown', e => {
  let wPos = getWorldMouse(e);
  
  // 1. ノード判定
  let hitNode = null;
  let hitResize = null;
  for (let i = nodes.length - 1; i >= 0; i--) {
    let n = nodes[i];
    if (n.type === 'rect' && selectedNodes.has(n.id)) {
      // リサイズハンドル判定
      let rx = n.x + n.width/2; let ry = n.y + n.height/2;
      if (Math.abs(wPos.x - rx) < 10/scale && Math.abs(wPos.y - ry) < 10/scale) {
        hitResize = n; break;
      }
    }
    // 本体判定
    let isHit = false;
    if (n.type === 'rect') {
      if (Math.abs(wPos.x - n.x) < n.width/2 && Math.abs(wPos.y - n.y) < n.height/2) isHit = true;
    } else {
      if (Math.hypot(wPos.x - n.x, wPos.y - n.y) < n.width/2) isHit = true;
    }
    if (isHit) { hitNode = n; break; }
  }

// エッジ結線開始 (Alt + Drag)
  if (e.altKey && hitNode) {
    isDrawingEdge = true;
    edgeStartNode = hitNode;
    currentEdgeTemp = { x1: wPos.x, y1: wPos.y, x2: wPos.x, y2: wPos.y };
    return;
  }

// リサイズ開始
  if (hitResize) {
    isResizingNode = hitResize;
    saveState();
    return;
  }

// ノード選択・ドラッグ
  if (hitNode) {
    if (!e.shiftKey && !selectedNodes.has(hitNode.id)) {
      selectedNodes.clear(); selectedEdges.clear();
    }
    selectedNodes.add(hitNode.id);
    isDraggingNode = true;
    dragOffsetMap.clear();
    selectedNodes.forEach(id => {
      let n = nodes.find(nd => nd.id === id);
      dragOffsetMap.set(id, { dx: n.x - wPos.x, dy: n.y - wPos.y });
    });
    draw();
    return;
  }

// 2. エッジ判定
  let hitEdge = null;
  for (let edge of edges) {
    let from = nodes.find(n => n.id === edge.from);
    let to = nodes.find(n => n.id === edge.to);
    if(from && to) {
      let cp = getBezierControlPoint(from.x, from.y, to.x, to.y);
      let d = getDistToBezier(wPos.x, wPos.y, from.x, from.y, cp.cx, cp.cy, to.x, to.y);
      if (d < 10 / scale) { hitEdge = edge; break; }
    }
  }
  
  if (hitEdge) {
    if (!e.shiftKey) { selectedNodes.clear(); selectedEdges.clear(); }
    selectedEdges.add(hitEdge.id);
    draw();
    return;
  }

// 3. 何もヒットしない場合は範囲選択 or パン
  if (e.shiftKey || e.button === 1 || e.altKey) {
    isPanning = true;
  } else {
    isBoxSelecting = true;
    selectionBox = { startX: wPos.x, startY: wPos.y, x: wPos.x, y: wPos.y, w: 0, h: 0 };
    if (!e.shiftKey) { selectedNodes.clear(); selectedEdges.clear(); }
  }
});

canvas.addEventListener('mousemove', e => {
  let wPos = getWorldMouse(e);
  
  if (isPanning) {
    offsetX += e.movementX; offsetY += e.movementY;
    draw(); return;
  }

if (isDrawingEdge) {
    currentEdgeTemp.x2 = wPos.x; currentEdgeTemp.y2 = wPos.y;
    draw(); return;
  }

if (isResizingNode) {
    let nw = (wPos.x - isResizingNode.x) * 2;
    let nh = (wPos.y - isResizingNode.y) * 2;
    isResizingNode.width = Math.max(40, nw);
    isResizingNode.height = Math.max(40, nh);
    draw(); return;
  }

if (isDraggingNode) {
    selectedNodes.forEach(id => {
      let n = nodes.find(nd => nd.id === id);
      let offset = dragOffsetMap.get(id);
      n.x = wPos.x + offset.dx;
      n.y = wPos.y + offset.dy;
    });
    draw(); return;
  }

if (isBoxSelecting) {
    selectionBox.x = Math.min(selectionBox.startX, wPos.x);
    selectionBox.y = Math.min(selectionBox.startY, wPos.y);
    selectionBox.w = Math.abs(wPos.x - selectionBox.startX);
    selectionBox.h = Math.abs(wPos.y - selectionBox.startY);
    draw(); return;
  }
});

canvas.addEventListener('mouseup', e => {
  if (isDraggingNode || isResizingNode) saveState();

if (isDrawingEdge) {
    let wPos = getWorldMouse(e);
    let targetNode = nodes.find(n => {
      if (n.id === edgeStartNode.id) return false;
      let dx = wPos.x - n.x, dy = wPos.y - n.y;
      return (n.type==='rect') ? (Math.abs(dx) < n.width/2 && Math.abs(dy) < n.height/2) : (Math.hypot(dx,dy) < n.width/2);
    });
    if (targetNode) {
      edges.push({ id: generateId(), from: edgeStartNode.id, to: targetNode.id });
      saveState();
    }
  }

if (isBoxSelecting) {
    nodes.forEach(n => {
      if (n.x > selectionBox.x && n.x < selectionBox.x + selectionBox.w &&
          n.y > selectionBox.y && n.y < selectionBox.y + selectionBox.h) {
        selectedNodes.add(n.id);
      }
    });
  }

isPanning = false; isDraggingNode = false; isResizingNode = null;
  isDrawingEdge = false; currentEdgeTemp = null; edgeStartNode = null;
  isBoxSelecting = false;
  draw();
});

// ダブルクリックでテキスト編集
let editingNodeId = null;
canvas.addEventListener('dblclick', e => {
  if (selectedNodes.size === 1) {
    editingNodeId = Array.from(selectedNodes)[0];
    let n = nodes.find(nd => nd.id === editingNodeId);
    document.getElementById('edit-text-val').value = n.text || '';
    document.getElementById('text-modal').style.display = 'flex';
  }
});

// キー操作 (Delete)
window.addEventListener('keydown', e => {
  if (e.key === 'Delete' || e.key === 'Backspace') {
    // モーダル入力中は無視
    if(document.querySelectorAll('.modal-overlay[style="display: flex;"]').length > 0) return;
    if (selectedNodes.size > 0 || selectedEdges.size > 0) {
      nodes = nodes.filter(n => !selectedNodes.has(n.id));
      edges = edges.filter(ed => !selectedEdges.has(ed.id) && !selectedNodes.has(ed.from) && !selectedNodes.has(ed.to));
      selectedNodes.clear(); selectedEdges.clear();
      saveState(); draw();
    }
  }
});

/**
 * ツールバー・操作関数
 */
function addNode(type) {
  nodes.push({
    id: generateId(), type: type,
    x: (-offsetX + canvas.width/2) / scale, y: (-offsetY + canvas.height/2) / scale,
    width: 100, height: type==='rect' ? 60 : 100, text: 'Node'
  });
  saveState(); draw();
}

function zoom(delta) {
  scale = Math.max(0.2, Math.min(3.0, scale + delta));
  document.getElementById('zoom-label').innerText = Math.round(scale * 100) + '%';
  draw();
}

function selectAll() {
  nodes.forEach(n => selectedNodes.add(n.id));
  edges.forEach(e => selectedEdges.add(e.id));
  draw();
}

function applyTextEdit() {
  if(editingNodeId) {
    let n = nodes.find(nd => nd.id === editingNodeId);
    if(n) n.text = document.getElementById('edit-text-val').value;
    saveState(); draw();
  }
  closeModal('text-modal');
}

/**
 * UI制御 (Custom Modal & Toast)
 */
function closeModal(id) { document.getElementById(id).style.display = 'none'; }
function openSaveModal() { document.getElementById('save-modal').style.display = 'flex'; }
function showToast(msg) {
  const t = document.getElementById('toast');
  t.innerText = msg;
  t.style.bottom = '20px';
  setTimeout(() => { t.style.bottom = '-50px'; }, 3000);
}

/**
 * 履歴管理 (Undo / Redo)
 */
function saveState() {
  historyStack.push(JSON.stringify({nodes, edges}));
  redoStack = [];
}
function undo() {
  if (historyStack.length > 1) {
    redoStack.push(historyStack.pop());
    let state = JSON.parse(historyStack[historyStack.length - 1]);
    nodes = state.nodes; edges = state.edges;
    selectedNodes.clear(); selectedEdges.clear(); draw();
  }
}
function redo() {
  if (redoStack.length > 0) {
    let data = redoStack.pop();
    historyStack.push(data);
    let state = JSON.parse(data);
    nodes = state.nodes; edges = state.edges;
    selectedNodes.clear(); selectedEdges.clear(); draw();
  }
}

/**
 * 物理演算 (Auto Layout / Fruchterman-Reingold カスタマイズ)
 */
function triggerAutoLayout() {
  if(nodes.length === 0) return;
  showToast("自動整列を実行中...");
  
  let K = 200; // 理想距離
  let temp = 100; // 初期温度(クーリング用)
  let iterations = 150;
  
  // 交差判定(線分ABとCD)
  const ccw = (A,B,C) => (C.y-A.y)*(B.x-A.x) > (B.y-A.y)*(C.x-A.x);
  const intersect = (A,B,C,D) => ccw(A,C,D) !== ccw(B,C,D) && ccw(A,B,C) !== ccw(A,B,D);

function step() {
    nodes.forEach(v => v.disp = {x: 0, y: 0});

// 1. ノード同士の強い反発 (重なり防止)
    for (let i = 0; i < nodes.length; i++) {
      for (let j = i + 1; j < nodes.length; j++) {
        let v = nodes[i], u = nodes[j];
        let dx = v.x - u.x, dy = v.y - u.y;
        let dist = Math.hypot(dx, dy) || 1;
        let minDist = (v.width + u.width) / 1.5;
        
        let rep = dist < minDist ? (minDist - dist) * 20 : (K * K) / dist;
        let fx = (dx / dist) * rep, fy = (dy / dist) * rep;
        v.disp.x += fx; v.disp.y += fy;
        u.disp.x -= fx; u.disp.y -= fy;
      }
    }

// 2. 結線の引力
    edges.forEach(e => {
      let v = nodes.find(n=>n.id===e.from), u = nodes.find(n=>n.id===e.to);
      if(v && u) {
        let dx = v.x - u.x, dy = v.y - u.y;
        let dist = Math.hypot(dx, dy) || 1;
        let attr = (dist * dist) / K;
        let fx = (dx / dist) * attr, fy = (dy / dist) * attr;
        v.disp.x -= fx; v.disp.y -= fy;
        u.disp.x += fx; u.disp.y += fy;
      }
    });

// 4. 結線の交差解消 (交差していたら構成ノードを引き離す)
    for(let i=0; i<edges.length; i++){
      for(let j=i+1; j<edges.length; j++){
        let e1 = edges[i], e2 = edges[j];
        if(e1.from === e2.from || e1.from === e2.to || e1.to === e2.from || e1.to === e2.to) continue;
        let A = nodes.find(n=>n.id===e1.from), B = nodes.find(n=>n.id===e1.to);
        let C = nodes.find(n=>n.id===e2.from), D = nodes.find(n=>n.id===e2.to);
        if(A && B && C && D && intersect(A,B,C,D)) {
           // 交差している組に強力な反発力を付与
           [A,B].forEach(n1 => {
             [C,D].forEach(n2 => {
                let dx = n1.x - n2.x, dy = n1.y - n2.y;
                let dist = Math.hypot(dx, dy) || 1;
                n1.disp.x += (dx/dist)*200; n1.disp.y += (dy/dist)*200;
                n2.disp.x -= (dx/dist)*200; n2.disp.y -= (dy/dist)*200;
             });
           });
        }
      }
    }

// 5. 中央への弱い重力
    let cx = (-offsetX + canvas.width/2)/scale, cy = (-offsetY + canvas.height/2)/scale;
    nodes.forEach(v => {
      v.disp.x += (cx - v.x) * 0.03; v.disp.y += (cy - v.y) * 0.03;
    });

// 移動適用とクーリング
    nodes.forEach(v => {
      let dLen = Math.hypot(v.disp.x, v.disp.y) || 1;
      v.x += (v.disp.x / dLen) * Math.min(dLen, temp);
      v.y += (v.disp.y / dLen) * Math.min(dLen, temp);
    });

temp *= 0.95;
    draw();
    
    if(--iterations > 0) requestAnimationFrame(step);
    else saveState();
  }
  requestAnimationFrame(step);
}

/**
 * 出力・連携機能
 */
function exportPNG() {
  const link = document.createElement('a');
  link.download = 'flowchart.png';
  // 描画領域の補正のため、一時的に白背景を描画してからエクスポート
  let tmpCanvas = document.createElement('canvas');
  tmpCanvas.width = canvas.width; tmpCanvas.height = canvas.height;
  let tCtx = tmpCanvas.getContext('2d');
  tCtx.fillStyle = '#fff'; tCtx.fillRect(0,0, tmpCanvas.width, tmpCanvas.height);
  tCtx.drawImage(canvas, 0, 0);
  link.href = tmpCanvas.toDataURL('image/png');
  link.click();
}

function printCanvas() {
  let w = window.open();
  w.document.write('<html><head><title>Print Flowchart</title></head><body style="text-align:center;">');
  w.document.write('<img src="' + canvas.toDataURL() + '" style="max-width:100%;"/>');
  w.document.write('</body></html>');
  w.document.close();
  setTimeout(() => { w.print(); w.close(); }, 500);
}

// GAS連携: 保存
function saveToGAS() {
  const name = document.getElementById('save-name').value;
  if(!name) { showToast("ファイル名を入力してください"); return; }
  
  showToast("保存中...");
  closeModal('save-modal');
  const jsonStr = JSON.stringify({nodes, edges});
  
  google.script.run
    .withSuccessHandler(res => showToast(res.message))
    .withFailureHandler(err => showToast("エラー: " + err.message))
    .saveFlowchartData(name, jsonStr);
}

// GAS連携: リスト取得
function fetchSavedList() {
  google.script.run
    .withSuccessHandler(res => {
      if(res.success) {
        const sel = document.getElementById('load-select');
        sel.innerHTML = '<option value="">読込リスト...</option>';
        res.list.forEach(name => {
          let opt = document.createElement('option');
          opt.value = opt.innerText = name;
          sel.appendChild(opt);
        });
      }
    })
    .getSavedList();
}

// GAS連携: 読込
function loadFromGAS() {
  const name = document.getElementById('load-select').value;
  if(!name) return;
  showToast("読み込み中...");
  
  google.script.run
    .withSuccessHandler(res => {
      if(res.success) {
        let data = JSON.parse(res.data);
        nodes = data.nodes; edges = data.edges;
        selectedNodes.clear(); selectedEdges.clear();
        saveState(); draw();
        showToast("読み込み完了");
      } else {
        showToast(res.message);
      }
    })
    .loadFlowchartData(name);
}

// 起動
window.onload = init;
</script>
</body>
</html>

このブログを検索

問題解決のためには問題を抱えている人と解決しようとする人の間で問題を誤解なく共有することが重要です。このためには可視化手法を使って，図式化（□→□を描く）して問題の増幅等の因果関係を可視化するのが近道

問題解決には、抱えている人や解決しようとする人の間で共有することが重要です。しかし言葉や文章では思い違いが発生し共有は困難です。そこで、問題の増幅ル一プ等の可視化が重要になります。