如何通过Mermaid API动态修改状态图节点样式？

你提供的初始代码已实现给OFF节点应用selected样式，要在运行时动态切换OFF和ON节点的选中状态，可通过两种方式实现：

方法一：重新渲染图表（推荐，符合Mermaid官方工作流） #

Mermaid基于输入的文本代码生成SVG，可通过修改代码中的class指令，重新渲染图表来切换样式。

完整实现代码 #

<html>
  <body>
    <button onclick="toggleSelected()">切换选中节点</button>
    <pre id="mermaid-diagram" class="mermaid">
        stateDiagram

        OFF --> ON
        ON --> OFF

        classDef selected fill:yellow,font-weight:bold,stroke-width:2px

        class OFF selected
    </pre>

    <script type="module">
        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
        mermaid.initialize({ startOnLoad: false });
        await mermaid.run();

        // 保存图表代码模板，用占位符标记选中节点位置
        let diagramTemplate = `
            stateDiagram

            OFF --> ON
            ON --> OFF

            classDef selected fill:yellow,font-weight:bold,stroke-width:2px

            class {{selectedNode}} selected
        `;
        let currentSelected = 'OFF';

        window.toggleSelected = async () => {
            // 切换选中节点标识
            currentSelected = currentSelected === 'OFF' ? 'ON' : 'OFF';
            // 替换模板占位符，生成新的图表代码
            const newDiagramCode = diagramTemplate.replace('{{selectedNode}}', currentSelected);
            // 更新pre元素内容
            const diagramEl = document.getElementById('mermaid-diagram');
            diagramEl.textContent = newDiagramCode;
            // 重新渲染图表
            await mermaid.run();
        }
    </script>
  </body>
</html>

逻辑说明 #

• 将Mermaid代码封装为模板，用{{selectedNode}}作为选中节点的占位符
• 点击按钮时切换选中节点标识，替换模板占位符后更新pre元素内容
• 调用mermaid.run()重新渲染图表，完成样式切换

方法二：直接操作DOM元素（轻量，无需重新渲染） #

若不想重新渲染整个图表，可直接定位Mermaid生成的SVG元素，通过添加/移除CSS类修改样式。

完整实现代码 #

<html>
  <body>
    <button onclick="toggleSelected()">切换选中节点</button>
    <pre id="mermaid-diagram" class="mermaid">
        stateDiagram

        OFF --> ON
        ON --> OFF

        classDef selected fill:yellow,font-weight:bold,stroke-width:2px

        class OFF selected
    </pre>

    <script type="module">
        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
        mermaid.initialize({ startOnLoad: false });
        await mermaid.run();

        let currentSelected = 'OFF';

        window.toggleSelected = () => {
            // 获取Mermaid生成的SVG容器（pre元素的下一个兄弟节点）
            const svgContainer = document.getElementById('mermaid-diagram').nextElementSibling;
            // 通过ID后缀定位状态节点元素
            const offNode = svgContainer.querySelector(`[id$="-OFF"]`);
            const onNode = svgContainer.querySelector(`[id$="-ON"]`);

            // 切换样式类
            if (currentSelected === 'OFF') {
                offNode.classList.remove('selected');
                onNode.classList.add('selected');
                currentSelected = 'ON';
            } else {
                onNode.classList.remove('selected');
                offNode.classList.add('selected');
                currentSelected = 'OFF';
            }
        }
    </script>
  </body>
</html>

逻辑说明 #

• Mermaid会在pre元素后生成包含SVG的容器，通过nextElementSibling获取该容器
• 状态节点的ID以状态名结尾（如...-OFF），用属性选择器定位目标元素
• 通过classList.add/remove直接修改元素样式类，实现动态切换

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