如何在Quarto（R）中结合Observable输入创建Mermaid动态流程图？

Quarto的{mermaid}代码块是静态预渲染的，无法直接引用动态变量（比如Observable的${input}语法），因为Quarto不支持这种运行时变量替换机制。要实现实时展示输入值和计算结果的流程图，需要通过JavaScript动态生成Mermaid代码并渲染。

实现步骤及代码示例 #

以下是完整的Quarto文档代码，可直接运行：

---
title: 动态计算流程图
format: html
---

## 动态计算流程图

<!-- 输入控件 -->
<div>
  <label for="input1">输入值1:</label>
  <input type="number" id="input1" value="0" min="0" max="100">
</div>
<div style="margin-top: 10px;">
  <label for="input2">输入值2:</label>
  <input type="number" id="input2" value="0" min="0" max="100">
</div>

<!-- 流程图容器 -->
<div id="flowchart-container"></div>

<!-- 计算结果展示 -->
<div id="result" style="margin-top: 10px; font-weight: bold;"></div>

<script>
// 引入Mermaid（确保动态渲染支持）
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: false });

// 获取DOM元素
const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');
const flowchartContainer = document.getElementById('flowchart-container');
const resultDiv = document.getElementById('result');

// 更新流程图和结果的核心函数
function updateFlowchart() {
  // 读取输入值，默认0处理非数字情况
  const val1 = parseInt(input1.value) || 0;
  const val2 = parseInt(input2.value) || 0;
  const sum = val1 + val2;
  
  // 更新结果文本
  resultDiv.textContent = `总和: ${sum}`;
  
  // 动态生成包含实时值的Mermaid代码
  const mermaidCode = `
    graph TD
    A[输入值1: ${val1}] --> C[总和: ${sum}]
    B[输入值2: ${val2}] --> C
  `;
  
  // 清空容器并重新渲染流程图
  flowchartContainer.innerHTML = '';
  mermaid.render('flowchart', mermaidCode).then(({ svg }) => {
    flowchartContainer.innerHTML = svg;
  });
}

// 页面加载时初始化一次
updateFlowchart();

// 监听输入变化，实时更新
input1.addEventListener('input', updateFlowchart);
input2.addEventListener('input', updateFlowchart);
</script>

关键说明 #

• 用原生HTML输入框替代Observable的Inputs.number，适配Quarto的HTML交互环境。
• 通过JavaScript动态生成Mermaid代码，将当前输入值和计算结果直接嵌入流程图节点文本。
• 使用Mermaid的renderAPI手动渲染流程图，实现实时更新效果。
• 如果Quarto环境已内置Mermaid，可移除import mermaid那行代码，否则保留CDN引用确保功能正常。

内容的提问来源于stack exchange，提问作者G B