Как динамически стилизовать график русалки?

У меня есть простой график русалки на html-странице:

<html>
  <body>
    <pre 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();
    </script>

  </body>
</html>

Это выглядит так:

У меня есть стиль selected, который выделяет текущий выбранный узел желтым цветом, в данном случае OFF.

Я хотел бы иметь возможность динамически изменять текущий выбранный узел изображения с ВЫКЛ на ВКЛ и наоборот.

Есть ли в API-интерфейсе русалки способ динамически применять стили или иным образом изменять стиль объектов на графике динамически во время выполнения с использованием JS?

mermaid

22.05.2024 05:24

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Один из способов сделать это — динамически добавить класс selected к нужному узлу:

<html>
  <body>
    <pre class = "mermaid">
        stateDiagram

        OFF --> ON
        ON --> OFF

        classDef selected fill:yellow,font-weight:bold,stroke-width:2px
    </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();

        document.querySelectorAll('g').forEach((g) => {
            g.classList.remove('selected');
        });
        document.querySelector('g[data-id=ON]').classList.add('selected');
        await mermaid.run();

</script>

  </body>
</html>

Я думаю, что на данный момент это лучший вариант

— 28.05.2024 17:14

22.05.2024 05:58