when i want to modify graph context use function render(), it's not working #4392

hikari-He · 2023-05-13T08:07:07Z

hikari-He
May 13, 2023

I want to use a botton to modify graph context, i use function render() to achieve this, but it's not working.
The mermaid version i used is 9.4.3, file link is "https://cdn.bootcdn.net/ajax/libs/mermaid/9.4.3/mermaid.js"
This problem seems very simple, but I didn't find a solution on github and stack overflow. I'm also afraid to submit this problem to issue, so I post it here.
Code（is simple）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/mermaid/9.4.3/mermaid.js" type="module"></script>
</head>
<body>
    <button id="botton_1" type="button" class="btn btn-info  mx-2 my-2">modify mermaid graph</button>

    <div id="link" class="mermaid mx-2 my-2">
        graph BT
        AA[ClientAA] --> BB[ServerBB]
    </div>
</body>

<script  type="module">
    $("#botton_1").on("click",async function(){
        var graph = document.querySelector('#link');
        const graphDefinition = 'graph TB\na-->b';
        const { svg } = mermaid.render('link', graphDefinition);
        graph.innerHTML = svg;
    });

</script>
</html>

Display the result (before clicking the button):

After clicking the button:

mermaid graph disappeared

hikari-He · 2023-05-14T06:23:08Z

hikari-He
May 14, 2023
Author

OK i resolved this question.
i turn mermaid version from 9.4.3 to 9.1.0, and modify my code to:

    $("#botton_1").on("click", function(){
        const graphDefinition = 'graph TB\na-->b';
        $('#link').html(graphDefinition).removeAttr('data-processed');
        mermaid.init(undefined, $("#link"));
    });

then it's working.
cite web:
https://github.com/mermaid-js/mermaid/issues/311
https://stackoverflow.com/questions/73056709/mermaid-in-react-turns-into-plaintext-when-re-rendered

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mermaid-js

when i want to modify graph context use function render(), it's not working #4392

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

mermaid-js

when i want to modify graph context use function render(), it's not working #4392

hikari-He May 13, 2023

Replies: 1 comment

hikari-He May 14, 2023 Author

hikari-He
May 13, 2023

hikari-He
May 14, 2023
Author