@WhizzClocksposted at 2024-03-28

Mermaid.jsで制作したフローチャートのノードをクリックしてJavaScriptの関数を呼び出したい

Q&A

Closed

HTML JavaScript mermaid.js

解決したいこと

Mermaid.jsを使ったフローチャートのノードをクリックして、JavaScriptで記述する処理を実行できるようにしたいと考えています。

フローチャートのjsライブラリを探していたところ、Mermaid.jsが無料で使えるということで使ってみました。
styleなどで見た目を変化させることはできました。また、callbackやhrefで文字を出現させたり、別のWebサイトに飛べたりすることも確認できました。

しかし、
ノードをクリックしてjavascriptに記述した関数を実行するということができていません。

よろしくお願い致します。

サンプルhtmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/mermaid/dist/mermaid.min.css">
  <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title>Document</title>
</head>
<body>
  <div class="mermaid">
    graph TD
    A-->B
    A-->C
    B-->D
    B-->E
    E-->F
    F-->G
    click A href "javascript:callback();"
    
  </div>
  <script>
    // javascript の処理
    function callback(){
        alert('clickされました');
    }
  </script>
</body>
</html>

現状

クリックしても何も起きない

自分で試したこと

hrefをcallbackやonに置換すると、文字としてグラフの下部に出力されます。
どのように記述すればいいのか、はたまた不可能なのかわからない状態です。

1Answer

@nak435 posted at 2024-03-28

以下のコードでクリックできました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/mermaid/dist/mermaid.min.css">
  <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title>Document</title>
</head>
<body>
  <div class="mermaid">
    graph TD
    A-->B
    A-->C
    B-->D
    B-->E
    E-->F
    F-->G
    click A callback "A"
    click B callback "B"

  </div>
  <script>
    mermaid.initialize({
      securityLevel: 'loose',
    });

    $(document).ready(function () {
      mermaid.initialize();
    });

    // javascript の処理
    function callback(a){
        alert(a + 'が click されました');
    }
  </script>
</body>
</html>

なお、セキュリティレベルを下げることによる影響はご自身でご判断ください。

0Like

Comments

@WhizzClocks
Questioner
@nak435 さん
ありがとうございます！！
数日悩んでいたので、非常に助かりました！
@nak435

数日悩んでいたので、非常に助かりました！

解決して良かったです。
よろしければ、当Q＆Aをクローズしてください。

Are you sure you want to delete the question?